【Web前端】jQuery入门与基础（一）
jQuery简介
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画操作更加简单。
jQuery最大的优点就是简化DOM操作
<--例子：-->
<!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选择器
基础选择器
在Javascript中：
类选择器是document.getElementsByClassName(),
元素选择器是document.getElementsByTagName()，
ID选择器是document.getElementById()
例子：
<!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中，要使用$()来选择相应元素
选择类使用：$(".ClassName"),用 . 选择类
选择元素使用：$("TagName")，
选择ID使用:$("#IdName")，用 # 选择ID
例子：
<!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定位ul标签下的li标签$(".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="jQuery">jQuery</a><a href="#" alt="jQuery-web">jQuery-前端</a><a href="#" alt="HTML">HTML</a><script>$('a[alt|="jQuery"]').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="jQuery-Web" /> <input name="jQueryWeb" /><input name="HTMLWeb" /><input name="HTML" /><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="jQuery-Web" /> <input name="jQueryWeb" /><input name="HTMLWeb" /><input name="HTML" /><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="jQuery-Web" /> <input name="jQueryWeb" /><input name="CSS" /><input name="HTML" /><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="jQuery-Web" /> <input name="CSSWeb" /><input name="CSS" /><input name="HTML" /><script>$('input[name^="CSS"]').val('study!');</script>
</body>
</html>
扩展选择器
: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>
: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>
jQuery_DOM操作
Class操作
addClass()给元素添加class
值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上。
$("p").addClass("myClass");
也可以同时添加多个class.
$("p").addClass("myClass1 myClass2");
removeClass()移除元素中每个匹配元素上一个，多个或全部样式。
一：通过class名字移除元素
$('p').removeClass('myClass yourClass')
二：移除全部class
$('p').removeClass()
三：配合addClass() 一起使用用来切换元素的样式
$('p').removeClass('myClass noClass').addClass('yourClass');
toggleClass()这是一个开关方法，如果class存在则删除，如果class不存在则添加。
$('#foo').toggleClass(className, addOrRemove);
hasClass()判断一个元素上是否具有某个class。
<!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><div id="mydiv" class="foo bar"></div><script>var flag = $('#mydiv').hasClass('foo')if(flag){$('#mydiv').html("div具有foo class")}</script>
</body>
</html>
文本操作
html()获取元素中的HTML内容
$('div.demo-container').html();
html()方法还可以设置元素的html内容
$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');
val()用于获取<input>标签中的内容
$(".input").val();
也可以设置<input>标签内容
$(".input").val("username")
属性操作
attr()获取匹配的元素的属性的值 或 设置匹配元素的一个或多个属性
<!DOCTYPE html>
<html>
<head><style>img {padding: 10px;width: 100px;}div {color: red;font-size: 24px;}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><img /><div><B>Attribute of Ajax</B></div><script>$("img").attr({src: "。/1.jpeg",title: "jQuery",alt: "jQuery Logo"});$("div").text($("img").attr("alt"));</script>
</body>
</html>
removeAttr()为匹配的元素集合中的每个元素中移除一个属性（attribute）
img.removeAttr("title")
DOM 插入并包裹现有内容
.wrap() 在每个匹配的元素外层包上一个html元素
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>jQuery</p><script>$("p").wrap("<div class='container'></div>");</script>
</body>
</html>
.unwrap() 将匹配元素集合的父级元素删除，保留自身在原来的位置
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div><p>jQuery</p></div><script>$("p").unwrap();</script>
</body>
</html>
.wrapAll() 在所有匹配元素外面包一层HTML结构
<!DOCTYPE html>
<html>
<head><style>div { border: 2px solid blue; }p { background:yellow; margin:4px; }</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>jQuery</p><p>HTML</p><p>web</p><script>$("p").wrapAll("<div></div>");</script>
</body>
.wrapInner()在匹配元素里的内容外包一层结构
<!DOCTYPE html>
<html>
<head><style>p {background: #bbf;}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>jQuery</p><p>HTML</p><p>web</p><script>$("p").wrapInner("<b></b>");</script>
</body>
</html>
DOM 插入现有元素内
.append() 在每个匹配元素里面的末尾处插入参数内容
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>I would like to say: </p><script>$("p").append("<strong>Hello</strong>");</script>
</body>
</html>
.prepend() 将参数内容插入到每个匹配元素的前面（元素内部）
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>, jQuery</p><script>$("p").prepend("<strong>Hello</strong>");</script>
</body>
</html>
DOM 插入现有元素外
.after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>I would like to say: </p><script>$("p").after("<b>Hello</b>");</script>
</body>
</html>
.before() 根据参数设定，在匹配元素的前面插入内容，作为其兄弟节点
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>I would like to say: </p><script>$("p").before("<b>Hello</b>");</script>
</body>
</html>
DOM 移除
.empty() 从DOM中移除集合中匹配元素的所有子节点
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>Hello, <span>Person</span> <a href="javascript:;">and person</a></p><script>$("p").empty();</script>
</body>
</html>
.remove() 将匹配元素集合从DOM中删除
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>Hello</p><script>$("p").remove();</script>
</body>
DOM 替换
.replaceAll() 用集合的匹配元素替换每个目标元素
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>Hello</p><script>$("<b>World</b>").replaceAll("p");</script>
</body>
</html>
.replaceWith() 用提供的内容替换集合中所有匹配的元素
<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>Wrold</p><script>$("p").replaceWith("<div>Hello</div>");</script>
</body>
</html>