Article Directory
1. What is jquery?
jQuery is a fast, small and feature-rich JavaScript library. It uses easy-to-use APIs (which can work across multiple browsers) to make HTML document traversal and manipulation, event handling, animation, and Ajax easier. jQuery combines versatility and extensibility, changing the way millions of people write JavaScript.
Let's take a look at the official logo
write less do more. Using jquery allows us to operate html documents more easily. Simplify writing.
2. Simple experience of the benefits of using JQuery
Example: Define three divs and get the corresponding dom nodes. Modify its properties.
1. Compare and obtain DOM nodes.
Use native js to obtain DOM nodes:
<script>
//1、原生js查找div的方法
window.onload = function () {
let div1 = document.getElementsByTagName("div")[0];
let div2 = document.getElementById("div1");
let div3 = document.getElementsByClassName("div2")[0];
console.log(div1);
console.log(div2);
console.log(div3);
}
</script>
Use jquery to get:
<script>
$(function () {
let $div1 = $('div')[0];
let $div2 = $("#div1");/*id选择器就直接使用#*/
let $div3 = $(".div2")[0];/*类选择器就直接.id*/
console.log($div1);
console.log($div2);
console.log($div3);
}
</script>
We can see that using jquery to get the dom node is obviously more concise and easy to remember.
2. Next, compare the parts that modify the DOM attributes.
We use native js to modify the background color of the div
<script>
//1、原生js查找div的方法
window.onload = function () {
let div1 = document.getElementsByTagName("div")[0];
let div2 = document.getElementById("div1");
let div3 = document.getElementsByClassName("div2")[0];
console.log(div1);
console.log(div2);
console.log(div3);
div1.style.backgroundColor = "red";
div2.style.backgroundColor = "green";
div3.style.backgroundColor = "yellow";
}
</script>
<script>
//2、使用jquery查找dom节点、修改颜色
$(function () {
let $div1 = $('div')[0];
let $div2 = $("#div1");/*id选择器就直接使用#*/
let $div3 = $(".div2")[0];/*类选择器就直接.id*/
console.log($div1);
console.log($div2);
console.log($div3);
$div1.css({
backgroundColor:"blue",
width:100,/*以逗号隔开，最后一个也要隔开，而且定义高度时没有px*/
});
$div2.css({
backgroundColor:"green",
});
$div3.css({
backgroundColor:"yellow",
});
})
</script>
Use jquery to modify the color of the div background:
Open Google Chrome: Effect
At first we will report an error: saying that css is an undefined function. We modify the code to:
<script>
//2、使用jquery查找dom节点
$(function () {
/* let $div1 = $('div')[0];
let $div2 = $("#div1");/!*id选择器就直接使用#*!/
let $div3 = $(".div2")[0];/!*类选择器就直接.id*!/*/
let $div1 = $('div');
let $div2 = $("#div1");
let $div3 = $(".div2");
console.log($div1);
console.log($div2);
console.log($div3);
$div1.css({
backgroundColor:"blue",
width:100,/*以逗号隔开，最后一个也要隔开，而且定义高度时没有px*/
});
$div2.css({
backgroundColor:"green",
});
$div3.css({
backgroundColor:"yellow",
});
})
</script>
Browser refresh:
Analysis summary
- We can see that using jquery to get the node, only one is needed
$(参数), the class selector.+类名, the id selector plus#+id名. Simple memory. - When using jqurey to modify the properties of a node, just call css and pass in the parameters. Multiple parameters can be passed in. Using native js is more troublesome. Of course you can use
setAttribute("style","value")；it, but it's hard to remember.
3. How to download JQuery file (js file)
Method 1. Official download:
https://jquery.com/
Method 2: Microsoft, Google and other hosting CDNs
come from Microsoft CDN,
click on the file to be downloaded, right-click and save as after loading.
Method 3: Do not download and directly quote the jquery file provided by the above CDN. If your site users are domestic, it is recommended to use domestic CDN addresses such as Baidu, Youpaiyun, and Sina. If your site users are foreign, you can use Google and Microsoft.
<head>
引用微软的CDN如下：
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>
4. About the compressed and uncompressed versions of JQuery
Compressed version: comes with min suffix,
uncompressed version has no min suffix
The compressed version is to remove comments, compress words, and reduce the size of js files. The format is messy. Do not use reading. The uncompressed version has a beautiful format and complete notes.
Enterprise development recommendation: use the uncompressed version when developing and the compressed version when going online
Compare compressed and uncompressed versions:
