Introduction to jQuery
jQuery is an efficient, streamlined and feature-rich JavaScript tool library. The API it provides is easy to use and compatible with many browsers, which makes operations such as HTML document traversal and manipulation, event handling, and animation operations easier.
The biggest advantage of jQuery is to simplify DOM operations
Official website documentation: jQuery
Chinese documentation: jQuery API Chinese documentation | jQuery Chinese website
jQuery release notes
jQuery is divided into three major versions: 1.x 2.x 3.x
1.x version
Compatible with ie678, the most widely used version, the official only does bug maintenance, and no new functions will be added. Therefore, for general projects, you can use version 1.x. Final version: 1.12.4 (May 20, 2016)
2.x version
It is not compatible with ie678 and is rarely used. The official only does bug maintenance and no new functions will be added. If you do not consider browsers that are compatible with lower versions, you can use 2.x. Final version: 2.2.4 (May 20, 2016)
3.x version
Not compatible with ie678, only supports the latest browsers. Unless there are special requirements, version 3.x is generally not used. Many old jQuery plug-ins do not support this version. This version is currently the official main update and maintenance version. Latest version: 3.6.0
jQuery focuses on explaining knowledge points
Selector
DOM manipulation
CSS operations
event handling
Traverse
animation
The following is to modify the content using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">新年快乐</div>
<script>
var root = document.getElementById("root")
root.innerHTML = "大展宏图"
</script>
</body>
</html>The following is to modify the content using jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="root">新年快乐</div>
<script>
$("#root").html("2023年")
</script>
</body>
</html>1. jQuery selector
Implementation of JavaScript Basic Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">类选择器</div>
<span>元素选择器</span>
<a id="root" href="#">ID选择器</a>
<script>
// 类选择器
var container = document.getElementsByClassName("container")[0]
container.innerHTML = "JS类选择器"
// 元素选择器
var span = document.getElementsByTagName("span")[0]
span.innerHTML = "JS元素选择器"
// ID选择器
var root = document.getElementById("root")
root.innerHTML = "JS的ID选择器"
</script>
</body>
</html>
Implementation of jQuery selector
Basic selector: class selector ID selector element selector
Attribute selector: perfect match Prefix (|) Contains (*) Space (~) Begins (^) Ends ($)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="container">类选择器</div>
<span>元素选择器</span>
<a id="root" href="#">ID选择器</a>
<ul class="navtop">
<li>item1</li>
<li>
<ul>
<li>child-item1</li>
<li>child-item1</li>
<li>child-item1</li>
</ul>
</li>
<li>item3</li>
</ul>
<div>
<input type="radio" name="user" value="username" />
<span>name</span>
</div>
<div>
<input type="radio" name="user" value="age" />
<span>age</span>
</div>
<a href="#" alt="sxt">sxt</a>
<a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
<a href="#" alt="sxtitbaizhan">sxtitbaizhan</a>
<a href="#" alt="itbaizhan">itbaizhan</a>
<a href="#" alt="sxt itbaizhan">sxt itbaizhan</a>
<script>
// 类选择器
$(".container").html("jQuery类选择器")
// 元素选择器
$("span").html("jQuery元素选择器")
// ID选择器
$("#root").html("jQuery的ID选择器")
// 子代选择器 .css("属性"，"属性值")
$(".navtop > li").css("border","1px solid red")
// 后代选择器
$(".navtop li").css("border","1px solid red")
// 属性选择器（完美匹配）
// .next()是同一目录下的下一个标签
// .html()等同于JavaScript 的innerHTML()
$("input[value = 'username']").next().html("username")
// 属性选择器 前缀（-）
$("a[alt |= 'sxt']").css("border","2px solid red")
// 属性选择器 包含即可
$("a[alt *= 'sxt']").css("border","2px dashed green")
// 属性选择器 包含空格中任意一个单词
$("a[alt ~= 'sxt']").css("border","2px dotted red")
// 属性选择器，以给定字符开始
$("a[alt ^= 'sxt']").css("border","2px double orange")
// 属性选择器，以给定字符结束
$("a[alt $= 'baizhan']").css("border","2px dashed pink")
</script>
</body>
</html>jQuery extension selector:
:eq(index) :odd :even :first :last :gt(index) :lt(index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
<table border="1">
<tr>
<td>Row #1</td>
</tr>
<tr>
<td>Row #1</td>
</tr>
<tr>
<td>Row #1</td>
</tr>
</table>
<table border="1">
<tr>
<td>item #0</td>
<td>item #1</td>
<td>item #2</td>
</tr>
<tr>
<td>item #3</td>
<td>item #4</td>
<td>item #5</td>
</tr>
<tr>
<td>item #6</td>
<td>item #7</td>
<td>item #8</td>
</tr>
</table>
<script>
// jQuery扩展选择器 :eq(index)
// index 是下标，下标从0 开始
$("li:eq(2)").css("border","2px dashed green")
// jQuery扩展选择器 :even 偶数 从0开始
$("li:even").css("border","3px solid red")
// jQuery扩展选择器 :odd 奇数
$("li:odd").css("border","2px dotted orange")
// jQuery扩展选择器 :first 选择第一个(效果看第一个table)
$("tr:first").css("background-color","orange")
// jQuery扩展选择器 :last 选择最后一个（效果看第一个table）
$("tr:last").css("background-color","greenyellow")
// jQuery扩展选择器 :gt(index) 选择大于index的 （效果看第二个table）
$("td:gt(5)").css("background-color","red")
//jQuery扩展选择器 :lt(index) 选择小于index的 （效果看第二个table）
$("td:lt(5)").css("background-color","pink")
</script>
</body>
</html>2. DOM operation of jQuery
js operation add class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">Hello</div>
<script>
var div = document.getElementsByTagName("div")[0]
// 增加class 会覆盖原来的class
div.className = "text success"
// 清空class如下
div.className = ""
</script>
</body>
</html><Add class for jQuery_DOM operation
1.addClass(): add class
2.removeClass(): remove class
3.toggleClass(): Verify whether there is a class. If so, delete it. If not, add it.
4.hasClass(): Verify whether there is a class and return a Boolean value