At the time when frameworks such as angular.js, vue.js, and react.js are prevalent, developers no longer need to manipulate the DOM by themselves, so I have to admit that jQuery is slowly becoming obsolete.
But the development idea in jQuery is still very classic, and now it exists more as a front-end technology basis.
Article Directory
1. Getting to know jQuery
1.1 Introduction
jQuery is abbreviated as jq. Query means query. jQuery, as its name implies, is a JavaScriptlibrary that makes querying and controlling page controls more convenient .
Many people position jQuery as a JavaScript framework, which is not rigorous. The framework is the wheel of the solution, and the essence of jQuery is the js file, which is a superset (library) after condensing and optimizing native js.
The purpose of jQuery design is "write Less, Do More", that is, advocating to write less code and do more. It encapsulates JavaScriptcommonly used function codes, provides a simple JavaScriptdesign mode, optimizes HTMLdocument operations, event handling, animation design and Ajaxinteraction.
1.2 Many advantages
jQuery has been popular for many years with its excellent design ideas and simple and practical syntax, and it still has many advantages:
- While enhancing the JavaScript language, it greatly simplifies the writing of the code;
jQuery provides enhancements to the basic JavaScript structure, such as element iteration and array processing. Another point is the enhancement of js event handling:
jQuery provides a variety of page events, which can avoid programmers from adding too much event handling code in HTML, and most importantly, its event handler eliminates various browsers Compatibility issues! - Quickly obtain document elements;
jQuery's selection mechanism is built on the CSS selector, which provides the ability to quickly query elements in DOM documents, and greatly strengthens the way to obtain page elements in JavaScript. - Provide beautiful page dynamic effects;
jQuery has a series of built-in animation effects, which can develop very beautiful web pages. Many websites use jQuery's built-in effects, such as dynamic effects such as fade in and fade out, and element removal.
1.3 Shortcomings
- Need to introduce third-party jQuery files, and there are usage conflicts between jQuery versions;
- Extremely dependent on DOM nodes, full DOM operation, difficult to maintain;
- The size is bloated and many functions are not practical;
1.4 Import method
- Introducing online resources:
I prefer to use CDN services, and the link is attached: bootCDN-jQuery address
Of course, I have extracted thejquery-3.5.1min version link for everyone , and just copy it and put it inHTMLtheheadtag of your document .
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- Import local files:
If the network is not good, you can also download the jQuery library file locally:
click the copy link button, then open the address in the browser, select all to copy the code, paste it into the local emptyjsfile, and thensrcimport it.
<script src='文件路径'></script>
// 例如：
<script src="./jquery-3.5.1.min.js"></script>
❀ Expand a bit ❀
jquery.jsAnd jquery.min.jswhat is the difference? When to use which?
We opened the two file links separately. The jquery.jsnormal version is on the left and jquery.min.jsthe compressed version is on the right . It can be clearly seen that the file code of the production version is easier to read. Those who like to study the source code can download it and have a look;
the compressed version on the right The version is what we need to import in actual development. Relatively speaking, the compressed version has a smaller file size and faster loading speed.
1.5 Entry function
Since we need HTMLto load the jscode after the entire document is loaded , we can have the following four implementation methods:
- Conventional writing in jQuery:
$(document).ready()
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// js代码块
};
</script>
</head>
</html>
- The above method can also be abbreviated as:
$()
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
<script>
$(function(){
// js代码块
});
</script>
</head>
<body>
// html代码块
</body>
</html>
- You can also use the entry function of native js:
window.onload()
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
<script>
window.onload = function(){
// js代码块
};
</script>
</head>
<body>
// html代码块
</body>
</html>
- end of body tag
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
</head>
<body>
// html代码块
<script>
// js代码块
</script>
</body>
</html>
❀ Expand a bit ❀
The entry function of native js window.onload(): $(document).ready()What is the difference with the encapsulated in jQuery :?
| window.onload() | $(document).ready() | |
|---|---|---|
| Timing of execution | Must wait for all content in the webpage to load (including pictures) before execution | The dom tree of the entire webpage will be executed after the drawing is completed, and the resources associated with the dom element may not be loaded. |
| Definition times | Can only be defined once, multiple definitions will overwrite the previous | Can be defined multiple times |
| Short form | no | $() |
It can also be seen from here that jQuery is an upgraded version of native js, which greatly simplifies our js code writing.
1.6 jQuery版hello world
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
<script>
$(function(){
console.log("hello world");
});
</script>
</head>
</html>
2. jQuery function
The jQuery library only provides a function called jQuery $( ), which defines a large number of methods in the function and its prototype to facilitate the call of jQuery objects and jQuery functions. The jQuery function can accept the following four parameters:
2.1 DOM objects
The jQuery function will encapsulate the DOM object into a jQuery object and return it.
<div id='app'>hello jQuery!</div>
$(function(){
console.log($(document.querySelector('#app')));
})
2.2 HTML code snippet
The jQuery function creates an HTML element based on the incoming text and encapsulates it into a jQuery object to return. such as:
$("<div class='one'>one<div>");
2.3 Anonymous functions
The entry function mentioned earlier, when the document structure is loaded, the jQuery function calls the anonymous function.
$(function(){
});
2.4 Selector
The jQuery function obtains the corresponding DOM through the selector, and then encapsulates these DOM objects into a jQuery object and returns. Please see the example of jQuery object in the next chapter.
The detailed jQuery selector introduction will be updated later.
Three. jQuery object
<div id='app'>hello jQuery!</div>
$(function(){
console.log($('#app'));
})
The jQuery object is an array-like object, the elements of which are DOM objects (Element elements). You can call jQuery functions and prototype instance methods.
3.1 Converting jQuery objects into DOM objects
3.1.1 $(selector)[index]
Since the jQuery object is an array-like object, we can directly get its first element, and then we can transform the jQuery object into a DOM object. Still look at the example just now:
<div id='app'>hello jQuery!</div>
$(function(){
console.log($('#app'));
console.log($('#app')[0]);
// 对比于js原生dom操作
console.log(document.querySelector('#app'));
console.log($('#app')[0] === document.querySelector('#app'));
})
3.1.2 $(selector).get(index)
We can also use the getmethod in jQuery , which has the same effect as the direct bracket selection:
<div id='app'>hello jQuery!</div>
$(function(){
console.log($('#app'));
console.log($('#app').get(0));
})
