Know the first and then the second;
Directory
Why do you need JQuery
The concept of jQuery:
Before that, review JavaScript object knowledge:
Simple JQuery written by myself:
Why do you need JQuery
In the JS code we wrote before, we often encounter document.getElementById, etc. to obtain element objects. When a large number of element objects need to be obtained, many similar codes will be written repeatedly. For this reason, in order to reduce the amount of code writing , To improve the efficiency of JavaScript development, a great man wrote a jQuery;
jQuery concept:
jQuery is a popular JavaScript library that simplifies JavaScript programming and provides many useful functions and features. It makes it easier to handle HTML document traversal and event handling, animation effects, AJAX, etc. in web development by using concise syntax and encapsulating complex operations.
jQuery provides web developers with a cross-browser API that allows them to easily write efficient JavaScript code. You can introduce jQuery files in HTML, and then use jQuery API to select and manipulate page elements, handle events, send Ajax requests, create animation effects, and more. jQuery simplifies common tasks such as DOM manipulation, event handling, AJAX, and animation, making web development faster and more convenient.
Due to its advantages of easy learning and use, strong scalability, and good compatibility, jQuery has become one of the most popular JavaScript libraries and is widely used in various types of websites and web applications.
Advantages of jQuery:
Writing complex DOM manipulation and event handling code using native JavaScript can be tedious and time-consuming. And jQuery enables developers to complete these operations more quickly and efficiently by providing an easy-to-use API.
The JQuery URL written by a great person: If you want to use it, just add the following code to the code:
<script type="text/javascript" src=".././jQuery/jquery-3.6.0.min.js"></script>
The code written before using Ajax to achieve dynamic page refresh effects:
window.onload=function () {
document.getElementById("btn1").onclick=function () {
//1. Create an XMLHttpRequest object
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function (){
if (this. readyState == 4) {
if (this. status == 200) {
document.getElementById("div1").innerText=this.responseText
}else{
alert(this. status)
}
}
}
let value = document.getElementById("ipt1").value;
xhr.open("get","/ajax/ajaxrequest1?value=" + value,true)
xhr. send()
}
document.getElementById("btn2").onclick=function () {
//1. Create an XMLHttpRequest object
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function (){
if (this. readyState == 4) {
if (this. status == 200) {
document.getElementById("div2").innerText=this.responseText
}else{
alert(this. status)
}
}
}
xhr.open("post","/ajax/ajaxrequest1",true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
let value1 = document.getElementById("ipt1").value;
xhr.send("username=" + value1)
}
}
It can be seen that the code is very complicated, and the same things appear a lot;
Use jQuery to achieve the above functions:
$(function () {
$("#btn"). click(function () {
$.ajax({
methodType: "post",
url: "/ajax/ajaxrequest3",
date: "username=zhangsan",
asuyc: true,
success: function (jsonst) {
$("#div").html(jsonst.username)
}
})
})
})
From this we can see the power of JQuery; to learn the principle of JQuery, I wrote a simple version of JQuery by hand to deepen my understanding:
Review JavaScript object knowledge before:
Simple JQuery written by myself:
function JQuery(selector) {
if (typeof selector == "string") {
if (selector. charAt(0) == "#") {
// var doc = document. getElementById(selector. substring(1))
//Remove var so that doc is upgraded to a global variable
doc = document. getElementById(selector. substring(1))
//The encapsulated function cannot be called before the doc is upgraded to a global variable, because the function can only be called by the object, so the following code appears
return new JQuery()
}
}
if (typeof selector == "function") {
window.onload = selector
}
this.html = function (htmlstr) {
//Define the global variable doc
doc.innerHTML = htmlstr
}
this. click = function (fun) {
doc.onclick = fun
}
this. getvalue = function () {
return doc.value
}
//Encapsulate Ajax into a static function;
JQuery. ajax = function (jsonstr) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this. readyState == 4) {
if (this. status == 200) {
var jsonobj = JSON. parse(this. responseText);
jsonstr.success(jsonobj)
} else {
alert(this. status)
}
}
}
// var jsonstr = JSON.parse(jsonstr); error code,
if (jsonstr. methodType. toUpperCase() == "POST") {
xhr.open("post", jsonstr.url, jsonstr.async)
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
xhr.send(jsonstr.date)
}
if (jsonstr. methodType. toUpperCase() == "GET") {
xhr.open("get", jsonstr.url + "?" + jsonstr.date, jsonstr.async)
xhr. send()
}
}
}
$ = JQuery
//If there is no following code, an error will be reported when calling Ajax, because there is no return new JQuery() at the beginning of execution,
//So the object is not created, so it cannot be called
new JQuery()