目录
关于jQuery
jQuery简介
选择器之基础选择器(一)
选择器之基础选择器(二)
选择器之属性选择器(一)
选择器之属性选择器(二)
选择器之jQuery扩展(一)
选择器之jQuery扩展(二)
关于jQuery
现在是否还需要学习jQuery，毫无疑问到目前为止，我们仍然需要学习jQuery，原因如下：
1 各大网站还在应用（京东、百度）
2 一些广告页面、落地页还在应用
3 源码非常优秀，有助于理解JavaScript
4 其实对DOM操作并不能完全移除，只要涉及到DOM操作，jQuery是非常方便的
jQuery简介
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画操作更加简单。
jQuery最大的优点就是简化DOM操作
官网文档：https://jquery.com/
中文文档：https://www.jquery123.com/
体验jQuery
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title></title><script src="./js/jquery-3.6.0.min.js" charset="utf-8"></script>
</head><body><div class="container"><p class="name">Hello jQuery</p></div><script type="text/javascript">$('.name').html("Hello 体验 jQuery")</script>
</body>
</html>
jQuery版本说明
jQuery分为三个大版本：1.x 2.x 3.x
1.x版本
兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)
2.x版本
不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x版本
不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.0
jQuery重点讲解知识点
1 选择器
2 DOM操作
3 CSS操作
4 事件处理
5 遍历
6 动画
选择器之基础选择器(一)
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 class="box">类选择器</div><div class="box">类选择器</div><span>元素选择器</span><a id="it" href="#">ID选择器</a><script>// 类选择器var div1 = document.getElementsByClassName("box")[0]var div2 = document.getElementsByClassName("box")[1]div1.innerHTML = "JS类选择器1"div2.innerHTML = "JS类选择器2"// 元素选择器var span = document.getElementsByTagName("span")[0]span.innerHTML = "JS元素选择器"// ID选择器(ID是唯一的)var a = document.getElementById("it");a.innerHTML = "JSID选择器"</script>
</body>
</html>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="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><div class="box">类选择器</div><div class="box">类选择器</div><span>元素选择器</span><a id="it" href="#">ID选择器</a><script>// $就是jQuery的缩写，他就代表了jQuery// 类选择器$(".box").html("jQuery类选择器")// 元素选择器$("span").html("jQuery元素选择器")// ID选择器$("#it").html("jQuery ID选择器")</script>
</body>
</html>选择器之基础选择器(二)
子元素选择器 ("parent > child")
选择所有指定“parent”元素中指定的"child"的直接子元素
<!DOCTYPE html>
<html>
<head><style>body {font-size: 14px;}</style><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><ul class="topnav"><li>Item 1</li><li>Item 2<ul><li>child item 1</li><li>child item 2</li><li>child item 3</li></ul></li><li>Item 3</li></ul><script>$(".topnav > li").css("border", "3px double red");</script>
</body>
</html>后代元素选择器（"parent child"）
选择所有指定“parent”元素中指定的"child"的后代元素
<!DOCTYPE html>
<html>
<head><style>body {font-size: 14px;}</style><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><ul class="topnav"><li>Item 1</li><li>Item 2<ul><li>child item 1</li><li>child item 2</li><li>child item 3</li></ul></li><li>Item 3</li></ul><script>$(".topnav li").css("border", "3px double red");</script>
</body>
</html>选择器之属性选择器(一)
Attribute Selector [name="value"]
选择指定属性是给定值的元素
attribute: 属性
Selector: 选择器
name: 选中的属性
value: 属性值
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head><body><div><input type="radio" name="user" value="name" /><span>name</span></div><div><input type="radio" name="user" value="age" /><span>age</span></div><script>$('input[value="name"]').next().html("username");</script></body>
</html>Attribute Selector [name|="value"]
选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head><body><a href="#" alt="txc">童小纯</a><a href="#" alt="txc-web">童小纯-前端</a><a href="#" alt="txcxiaotong">txcxiaotong</a><script>$('a[alt|="txc"]').css('border','3px solid green');</script></body>
</html>
Attribute Selector [name*="value"]
选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><input name="txc-itxiaotong" /> <input name="txcweb" /><input name="xiaotongweb" /><input name="itxiaotong" /><script>$('input[name*="txc"]').val('study!');</script>
</body>
</html>选择器之属性选择器(二)
Attribute Selector [name~="value"]
选择指定属性用空格分隔的值中包含一个给定值的元素
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><input name="txc-itxiaotong" /> <input name="txc web" /><input name="txcxiaotongweb" /><script>$('input[name~="txc"]').val('study!');</script>
</body>
</html>
Attribute Selector [name$="value"]
选择指定属性是以给定值结尾的元素。这个比较是区分大小写的
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><input name="txc-itxiaotong" /> <input name="txcweb" /><input name="txcxiaotongweb" /><script>$('input[name$="web"]').val('study!');</script>
</body>
</html>Attribute Selector [name^="value"]
选择指定属性是以给定字符串开始的元素
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><input name="txc-itxiaotong" /> <input name="txc web" /><input name="xttxcweb" /><script>$('input[name^="txc"]').val('study!');</script>
</body>
</html>
选择器之jQuery扩展(一)
:eq(index) Selector
在匹配的集合中选择索引值为index的元素。
温馨提示
index下标计算是从0开始的
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><ul class="nav"><li>List 1, item 1</li><li>List 1, item 2</li><li>List 1, item 3</li></ul><script>$("li:eq(2)").css("border","2px solid red")</script>
</body>
</html>:even Selector
选择所引值为偶数的元素
特别注意
这是基于0的索引，所以 :even 选择器是选择第一个元素，第三个元素，依此类推在匹配。
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><table border="1"><tr><td>Row with Index #0</td></tr><tr><td>Row with Index #1</td></tr><tr><td>Row with Index #2</td></tr><tr><td>Row with Index #3</td></tr></table><script>$("tr:even").css("background-color", "#bbbbff");</script>
</body>
</html>
:odd Selector
选择索引值为奇数元素
特别注意
这是基于0的索引，所以 :odd 选择器是选择第二个元素，第四个元素，依此类推在匹配。
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><table border="1"><tr><td>Row with Index #0</td></tr><tr><td>Row with Index #1</td></tr><tr><td>Row with Index #2</td></tr><tr><td>Row with Index #3</td></tr></table><script>$("tr:odd").css("background-color", "#bbbbff");</script>
</body>
</html>
选择器之jQuery扩展(二)
:first Selector
选择第一个匹配的元素
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><table border="1"><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr></table><script>$("tr:first").css("background-color", "red");</script>
</body>
</html>:last Selector
选择最后一个匹配的元素
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><table border="1"><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr></table><script>$("tr:last").css("background-color", "red");</script>
</body>
</html>:gt(index) Selector
选择匹配集合中所有大于给定index（索引值）的元素。
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>gt demo</title><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><table border="1"><tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr><tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr><tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr></table><script>$("td:gt(4)").css("backgroundColor","yellow");</script>
</body>
</html>
:lt(index) Selector
选择匹配集合中所有索引值小于给定index参数的元素
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>gt demo</title><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><table border="1"><tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr><tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr><tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr></table><script>$("td:lt(4)").css("backgroundColor","yellow");</script>
</body>
</html>
