本文详细介绍了jQuery的入门，包括jQuery的简介、核心函数、选择器和DOM操作。从jQuery的选择器分类如基本选择器、层次选择器、过滤选择器，到DOM操作如属性操作、CSS样式修改、节点的添加、删除和替换，深入探讨了jQuery的使用方法和技巧。通过实例展示了如何利用jQuery实现动态表格的增删、全选/全不选功能和下拉框选项的移动。
1.开始jQuery的学习之旅
1.1.jQuery简介
JQuery是继Prototype之后又一款非常优秀的JavaScript框架，由John Resig创建于2006年1月。jQuery体积小，运行速度快，它独有的极为强大的选择器，使得页面元素的查找变得非常简单，其出色的DOM操作、可靠的事件处理、完善的浏览器兼容性和链式操作等优点。
Jquery本身也是JS，只不过是对原生的JS进行封装，形成了一个JS的开发库!
JQuery官方介绍：
1.2.jQuery简介
JQuery的核心理念是：“write less, do more”，即：写得少，做得多!
jQuery独特的选择器、链式的DOM操作、可靠的事件处理机制和封装完善的Ajax都是其他JavaScript框架望尘莫及的。
2.jQuery快速入门
2.1.第1个jQuery程序
需求：当页面加载完成之后，alert弹出"Hello World!"。
准备：新建Web工程：jquery，新建测试目录和html文件
2.1.1.window.onload加载
部署到tomcat，测试
http://127.0.0.1:8080/jquery/a_quickstart/01_helloworld.jsp
2.1.2.jQuery的ready加载
1.引入jQuery
a.在项目中加入jQuery的js文件
b.将文件引入到页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入JQuery的开发库-->
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//页面加载的时候执行
//window.οnlοad=function () {
//alert("Hello,JavaScript!!!");
//}
/**
* 01- 页面加载的时候执行
*/
jQuery(window).ready(function () {
alert("标准的页面加载事件写法1！");
});
/**
* 02- 页面加载的时候执行
*/
jQuery(document).ready(function () {
alert("标准的页面加载事件写法2！");
});
/**
* 03-简化写法
*/
$(document).ready(function () {
alert("标准的页面加载事件写法3！");
});
/**
* 04-终极简化写法
*/
$(function () {
alert("标准的页面加载事件写法4！");
});
</script>
</head>
<body>
</body>
</html>
2.1.3.window.onload和jQuery的ready区别
代码示例：
<script type="text/javascript">
// 页面加载完成之后执行
window.onload = function() {
alert("Hello World！---------传统js方式");
};
// 赋值操作，会覆盖之前的onload
window.onload = function() {
alert("Hello World！---------传统js方式2");
};
/*
代码解析：
jQuery()
这是jQuery的核心函数，可以把这个函数理解为一个工厂，生产出来的是一个jQuery对象
jQuery(document)
把document转换为jQuery对象
jQuery(document).ready(回调函数);
既然是jQuery对象，就可以调用jQuery对象中的方法！
ready(回调函数)，这个方法的作用是：DOM载入就绪后，执行回调函数中的代码
*/
// 不会覆盖windown.onload
jQuery(document).ready(function() {
alert("Hello World！---------jquery方式");
});
// 不会覆盖之前的ready
jQuery(document).ready(function() {
alert("Hello World！---------jquery方式2");
});
</script>
运行结果：
alert("Hello World！---------jquery方式111");
alert("Hello World！---------jquery方式222");
alert("Hello World！---------传统js方式222");
结论：先按顺序执行jQuery的每一个ready事件，最后执行最后一次绑定的window.onload事件
2.1.4.jQuery的别名$
为了简化代码，jQuery定义了一个全局的变量
作
为
别
名
来
代
替
j
Q
u
e
r
y
，
即
作为别名来代替jQuery，即
作为别名来代替jQuery，即=jQuery，$是jQuery的别名
例如，jQuery(document).ready(回调函数); 可以简写为 $(document).ready(回调函数);
2.2.jQuery的核心函数
-
jQuery(callback) //页面onload函数，相当于jQuery(document).ready(callback)
-
jQuery(html[, prop]) //将html片段转换为jQuery对象$(“
1”)<script type="text/javascript"> //JS DOM标签转换化 Jquert中的对象 var t=jQuery("<input type='button' value='哈哈'/>"); alert(t.val()); //简写 var t=$("<input type='button' value='哈哈'/>"); alert(t.val()); </script> 注意： JS和Jquery不能混用！可以把JS对象转为Jquery对象！ -
jQuery(selector [, context]) //根据选择器查找页面元素，默认查找整个文档document
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> //JS DOM标签转换化 Jquert中的对象 //var t=jQuery("<input type='button' value='哈哈'/>"); //alert(t.val()); //简写 var t=$("<input type='button' value='哈哈'/>"); //alert(t.val()); //页面加载的时候执行 $(function () { //标签选择器 $("h1").css("color","red").css("background","green"); //ID选择器 $("#h").css("color","red"); }); </script> </head> <body> <h1>哈哈</h1> <h2 id="h">呵呵</h2> <h2>呵呵</h2> </body> </html>
2.2.1.$(callback)：页面加载完成事件
用法：
简化过程：
jQuery(document).ready(callback) ——> $(document).ready(callback) ——> $(callback)
2.2.2.$(html代码)：将html转换为jQuery对象
用法：
3.2.3.$(selector)：根据选择器查找页面元素
用法：
3.3.jQuery对象和DOM对象
3.3.1.jQuery对象和DOM对象的区别
什么是jQuery对象？
jQuery对象是jQuery框架独有的，通过jQuery的核心函数$(selector)获取。
selector也可以是一个DOM对象，jquery会把DOM对象转换为jQuery对象
什么是DOM对象？
DOM的全称是"Document Object Model"，即文档对象模型，而DOM对象指的是
某个或某些具体的节点对象，通过document.getElementXXX()获取。
两者之间的区别？
jQuery对象只能使用jQuery对象的属性和方法，不能直接使用DOM对象的属性和方法；
同样，DOM对象只能使用DOM对象的属性和方法，不能直接使用jQuery对象的属性和方法。
两种对象的属性和方法不通用！
jQuery对象在使用其属性和方法的时候，实际上底层使用的依然是DOM对象中的属性和方法。
那么，在页面中如何区分jQuery对象和DOM对象呢？在开发中有个约定：在jQuery对象的前面加$，例如：
var $mydiv = $("#mydiv"); // $mydiv是jQuery对象
var mydiv = document.getElementById(“mydiv”); // mydiv是DOM对象
3.jQuery选择器
3.1.概述
我们学习jQuery，主要是学习jQuery中的方法，来简化js开发。因此，学习jQuery主要是学习jQuery对象的各种方法，但前提是要先获取jQuery对象，即操作必先选中（获取），一切从选择器开始！
如何选中元素？
语法：$(selector)
补充：context可选的，如果指定，就会在指定的元素下查找。默认值：document.
选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM、Ajax等各种操作都依赖于选择器。
选择器的语法可参考官方手册的选择器章节，如下图所示
jQuery内部提供了三大类共9种选择器
- 基本选择器
- 层级选择器
- 过滤选择器
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象过滤选择器
表单对象属性过滤选择器
过滤选择器一般用于对其他选择器的补充（缩小选择范围）
3.2.基本选择器：第1大类
基本选择器，是jQuery所有选择器的基础，通过元素的id属性、class属性、标签名称进行选择。
基本选择器的语法和用法：
- #id（id选择器）根据id属性查找一个元素例如：$("#mydiv")
- element（标签选择器） 根据元素标签名称查找所有元素，例如： $(“div”);
- .class（类选择器） 根据class属性查找元素，例如：
$(".myclass");原理是遍历所有的DOM节点，然后逐个判断是否使用了
指定的类选择器，可以想象，如果页面上节点很多的情况下，效率很低，因此类选择器通常和标签选择器同时使用，
例如：$("div.myclass")，意思是获取所有使用了.myclass类的div元素，这样，jQuery会先找页面中的所有div，然后再遍历判断，大大减少了循环次数，从而提高了查询效率！ - selector1,selector2,selectorN（组合选择，多选，混用选择器）将每一个选择器匹配到的元素合并后一起返回
例如：$("#myinput,div,p.pClass");意思是获取页面中ID为myinput的元素和所有的div元素和使用了.pClass的p元素
此种方式获取的是所有匹配元素的并集 *匹配所有元素 例如 $("*"); 意义不大！
【示例】
<div>DIVAAAA</div>
<div class="demo">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<div class="demo">DIVEEEE</div>
<div id="foo">DIVFFFF</div>
<p>PAAAA</p>
<p class="demo">PBBBB</p>
<p>PCCCC</p>
需求：
获取页面中ID为foo的元素的内容
通过each()遍历所有div，在每个div元素前 加入"hello"
通过size() 或 length 打印页面中 class属性为 demo 的元素数量
获取class属性为demo的div的个数
相关函数参考文档：一定要自己点进去看看，里面有例子
脚本代码：
<script type="text/javascript">
jQuery(function($) {
//获取页面中ID为foo的元素的内容
//alert( $("#foo").html() );
//通过each()遍历所有div，在每个div元素前 加入"hello"
// each中的函数中的i表示div的索引，o表示当前div对象：DOM对象！DOM对象！DOM对象！
/* $("div").each(function(i, o) {
// this === o 表示当前DOM对象
var newHTML = "hello" + $(this).html();
$(this).html(newHTML);
}); */
//$("div").prepend("hello");
//$("div").append("world");
//通过size() 或 length 打印页面中 class属性为 demo 的元素数量
alert( $(".demo").size() );
alert( $(".demo").length );
//获取class属性为demo的div的个数
alert( $("div.demo").length );
});
</script>
交集和并集选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function () {
// 小标为0的li 双击事件
$("li:eq(0)").dblclick(function () {
//并集选择
//$("#xx,.ff,li:eq(5)").css("color","green").css("font-family","楷体");
//交集选择器
$("li.ff").css("color","green").css("font-family","楷体");
});
});
</script>
</head>
<body>
<ul>
<li>貂蝉</li>
<li id="xx">西施</li>
<li >王昭君</li>
<li>杨玉环</li>
<li class="ff">凤姐</li>
<li>芙蓉姐</li>
<p class="ff">哈哈</p>
</ul>
</body>
</html>
3.3.层次选择器：第2大类
层次选择器是根据DOM元素的层级关系进行选择。
参考文档：
DOM元素层级的位置关系：
ancestor 祖先元素（父亲、爷爷、。。。。）
descendant 后代元素（儿子、孙子。。。。）
parent 父元素
child 子元素
prev 上一个元素
next 下一个元素
siblings 兄弟（平级的）元素
注意：每个单词都代表任意选择器！
例如，有如下html代码：
<form id="myform">
<label>Name:</label>
<div></div>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
则：
ancestor空格descendant $("form input") 获取form元素中的input元素（儿子、孙子。。。）。
parent > child $("form>input") 获取form元素中的input元素（只有儿子）。
prev + next $("label+input") 获取匹配的每个label元素后面紧跟着的一个兄弟元素input，如果后面一个元素不是input,则不会继续查询同级的下一个input 。
prev ~ siblings $("form~input") 获取所有form元素后面的所有兄弟(平级)元素。
【需求练习】：
将class属性值为demo的元素下所有a元素字体变为红色
将class属性值为demo的元素下直接a元素字体变为蓝色
将div元素后所有兄弟a元素，字体变为绿色，大小变为30px
将div元素后紧跟着的那个兄弟a元素，背景色变为灰色的
【示例代码】
<div class="demo">
<a>div link</a>
<p>
info <a>p link</a>
</p>
</div>
<a>link</a>
<p class="demo">
<a>p link</a>
</p>
<a>link</a>
使用jQuery改变元素的css样式，参考如下文档
脚本代码：
<script type="text/javascript">
// jQuery核心函数1：$(callback);
jQuery(function($) {
//将class属性值为demo的元素下所有a元素字体变为红色
$(".demo a").css("color", "red");
//将class属性值为demo的元素下直接a元素字体变为蓝色
$(".demo > a").css("color", "blue");
//将div元素后所有兄弟a元素，字体变为绿色，大小变为30px
$("div~a").css({
color: "green",
//"font-size": 30, // 默认单位为px
// 样式属性可以使用驼峰名法来书写：连字符去掉，然后连字符后的每个单词的首字母大写
fontSize: "50px"
});
//将div元素后紧跟着的那个兄弟a元素，背景色变为灰色的。
$("div+a").css("backgroundColor", "gray");
// 获取指定的样式属性
//alert( $("div+a").css("backgroundColor") );
});
</script>
【相关函数的使用】
css()函数设置css样式的两种用法：
设置一个样式用：css("属性名", "属性值")
设置多个样式用：css({"属性名1": "属性值1","属性名1": "属性值1"…})
只能获取匹配元素中的第一个元素的样式值
css()函数获取css样式：
css(“属性名”)
3.4.过滤选择器：第3大类
作用：过滤选择器通常是对基本选择器和层次选择器的结果进行过滤（缩小选择范围）。
也可以单独使用（不推荐，对整个document文档进行过滤）。
过滤选择器基本语法：通过":条件" 进行过滤，例如：
("div:first") 匹配第一个div元素
("div:last") 匹配最后一个div元素
解释如下：
$(“div”)是获取所有div，加上过滤条件":first"就表示第一个div，加上":last"就表示最后一个div
按照不同的过滤规则，过滤选择器被分为七类
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象过滤选择器
表单对象属性过滤选择器
3.4.1.基本过滤选择器
基本选择器可以通过元素的索引、位置(特殊索引)和特殊性来过滤，因此可以分为三类：
- 根据索引(从0开始)来缩小范围
:eq(index) 选取指定索引的元素，例如$("tr:eq(0)")：第一个tr,$("tr:eq(-1)")最后一个tr!
:gt(index) 选取索引大于指定索引的元素，例如$("tr:gt(1)")：索引大于1的tr，即第2个tr之后的tr
:lt(index) 选取索引小于指定索引的元素，例如$("tr:lt(3)")：索引小于3的tr，即前3个tr(0,1,2)
- 根据位置(特殊索引)来缩小范围
:first 第一个位置，例如$("tr:first")：第一个tr,相当于eq(0)
:last 最后一个位置，例如$("tr:last")：最后一个tr 相当于eq(-1) -1表示从最后一个开始算
:odd 索引为奇数位置，例如$("tr:odd")：奇数索引行(1,3,5,7,9...) 实际匹配偶数行
:even 索引为偶数位置，例如$("tr:even")：偶数索引行(0,2,4,6,8,10...) 实际匹配奇数行
- 根据元素的特殊性来缩小范围
:not(selector) 去除与给定选择器匹配的元素，例如$("tr:not(:first)")，所有tr（第一个除外）
:header 匹配所有的标题元素，即h1到h6,实际上能够匹配h7,h8....hn
:focus 当前获取焦点的元素
3.4.2.内容过滤选择器
该选择器是根据元素中是否包含指定的内容来过滤的。
参考API：
:contains(text) 过滤含有给定文本的元素，例如$("div:contains(Jack)")，$("p:contains(hello)")
:empty 过滤不包含子元素或文本的空元素，例如$("td:empty")，$("div:empty")<td></td><div></div>
:has(selector) 过滤含有指定选择器匹配的元素的元素，例如$("div:has(p)")，$("td:has(div.myClass)")
:parent 过滤含有子元素或文本的非空元素，和:empty相反
【示例练习】
<div>今天是个晴天</div>
<div>明天要去学 java</div>
<div><span>JavaScript</span> 是网页开发中脚本技术</div>
<div>Ajax 是异步的 JavaScript和 XML</div>
<div><p>jQuery</p>是 JavaScript一个 轻量级框架</div>
<div></div>
【需求】
设置含有文本内容"java" 的 div 的字体颜色为红色
设置没有子元素的div元素 文本内容 "这是一个空DIV"
设置包含p元素 的 div 背景色为黄色
设置所有含有子元素或文本的span元素的字体为蓝色
【脚本代码】
<script type="text/javascript">
jQuery(function($) {
//设置含有文本内容"java" 的 div 的字体颜色为红色
$("div:contains(java)").css("color", "red");
//设置没有子元素的div元素 文本内容 "这是一个空DIV"
$("div:empty").html("这是一个空DIV");
//设置包含p元素 的 div 背景色为黄色
$("div:has(p)").css("background-color", "yellow");
//设置所有含有子元素或文本的span元素的字体为蓝色
//$("span:parent")
$("span:not(:empty)")
.css({
color: "blue",
"border": "1px solid red",
display: "block", // 让span变成块元素
width: 100,
height: 30
});
});
</script>
注意：内容过滤选择器的原理先找到所有的元素，然后再判断元素中是否包含指定的内容，
因此在效率上偏低！因此通常和基本的选择器一起使用来提高查询效率
3.4.3.可见性过滤选择器
该选择器是根据元素的可见性(显示或隐藏)来过滤的，其中隐藏有两种形式
一种不占位置(完全隐藏)，另一种虽然也是隐藏的，但元素的位置还占着，没有完全隐藏
参考API：
:hidden 完全隐藏的元素
:visible 看得见的和不完全隐藏的元素，和:hidden相反
【预备知识】
<div>AAAAAAAAAAAAAAAAAAAA</div>
<div style="display:none;">BBBBBBBBBBBBBBBBBBBB</div>
<div>CCCCCCCCCCCCCCCCCCCC</div>
<div style="visibility:hidden;">DDDDDDDDDDDDDDDDDDDD</div>
<div>EEEEEEEEEEEEEEEEEEEE</div>
显示效果如下：
【示例练习】
<style>table,td,th{border:1px solid black;border-collapse:collapse;}</style>
<table width="600px">
<tr><th>商品编号</th><th>商品名称</th><th>售价</th><th>数量</th></tr>
<tr style="display:none;"><td>001</td><td>冰箱</td><td>3000</td><td>100</td></tr>
<tr><td>002</td><td>洗衣机</td><td>2000</td><td>50</td></tr>
<tr style="visibility:hidden;"><td>003</td><td>热水器</td><td>1500</td><td>20</td></tr>
<tr><td>004</td><td>手机</td><td>2188</td><td>200</td></tr>
</table>
<input type="hidden" />
【需求】
设置table所有"可见的行"背景为灰色，并显示不完全隐藏的行
设置table所有"完全隐藏的行"字体为红色，并显示隐藏的行
设置隐藏域的值为hello，并输出隐藏域中的值
【脚本代码】
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
/*页面加载完成事件：相当于jQuery(document).ready(fn);****/
jQuery(function($) {
//设置table所有"可见的行"背景为灰色，并显示不完全隐藏的行
$("table tr:visible") // 匹配看得见的和不完全因此的元素
.css("background", "gray")
// .show() // 将元素的display属性修改为默认值
.css("visibility", "visible")
;
//设置table所有"完全隐藏的行"字体为红色，并显示完全隐藏的行
$("table>tbody>tr:hidden").css("color", "red").show();
//设置隐藏域的值为hello，并输出隐藏域中的值
// 隐藏域不可以通过设置display属性让其显示，隐藏域永远是完全隐藏的！
alert( $("input:hidden").val("hello").show().val() );
});
</script>
</head>
<body>
<style>table,td,th{border:1px solid black;border-collapse:collapse;}</style>
<table width="600px">
<tr><th>商品编号</th><th>商品名称</th><th>售价</th><th>数量</th></tr>
<tr style="display:none;"><td>001</td><td>冰箱</td><td>3000</td><td>100</td></tr>
<tr><td>002</td><td>洗衣机</td><td>2000</td><td>50</td></tr>
<tr style="visibility:hidden;"><td>003</td><td>热水器</td><td>1500</td><td>20</td></tr>
<tr><td>004</td><td>手机</td><td>2188</td><td>200</td></tr>
</table>
<input type="hidden" />
<!-- <div>11</div>
<span style="border:1px solid red;width:200px;height:100px;display:inline-block;">1</span>
<span style="border:1px solid red;width:200px;height:100px;display:inline-block;">2</span> -->
</body>
</html>
3.4.4.属性过滤选择器
该选择器是通过元素的属性来过滤选的。
参考API：
[attribute] 过滤拥有指定属性的元素，例如：$("input[name]") 拥有name属性的input元素<input name />
[attribute=value] 过滤指定属性的值为value的元素，例如：$("input[name=username]") name属性为username的input元素<input name="username" />
[attribute!=value] 过滤指定属性的值不为value的元素，例如：$("input[value!=张三]")
[attribute^=value] 过滤指定属性的值以value开始的元素，例如：$("input[name^=myClass]") myClass myClassasdfsadfs 匹配不到a1myClass123
[attribute$=value] 过滤指定属性的值以value结束的元素，例如：$("input[name$=myClass]") myClass hhmyClass 匹配不到a myClassb
[attribute*=value] 过滤指定属性的值包含value的元素，例如：$("input[class*=myClass]") myClass aaaamyClass111 amyClass myC5lassb
[attrSel1] [attrSel2]... 过滤指定的多个属性同时满足条件的元素，以上属性过滤的任意组合，例如：$("input[name=username][value!=张三]...")
注意：如果属性的值中包含特殊字符，使用单引号将值引起来，如果没有特殊字符，也可以使用单引(保险写法！)
【示例练习】
<div>AAAA</div>
<div id="mydiv" class="demo1 a b">BBBB</div>
<div class="demo2">CCCC</div>
<div id="mydiv2">DDDD</div>
<div class="divclass">EEEE</div>
<div id="xxx" class="demo3">FFFF</div>
<p class="p-demo">PPPPPP</p>
<input type="text" name="username"/>
【需求】
设置所有含有id属性的div字体颜色为红色
class属性中含有demo的元素背景为金色
对所有既有id又有class属性的div元素，添加一个点击事件，打印div标签中内容
给name属性是username的input输入框中设置一个值"zhangsan"
【脚本代码】
<script type="text/javascript">
jQuery(function($) {
//设置所有含有id属性的div字体颜色为红色
$("div[id]").css("color", "red");
//设置所有class属性中含有demo的元素背景为金色
$("[class*=demo]").css("background-color", "blue");
//对所有既有id又有class属性的div元素，添加一个点击事件，打印div标签中内容
$("div[id][class]").click(function() {
alert( $(this).html() );
});
//给name属性是username的input输入框中设置一个值"zhangsan"
$("input[name=username]").val("zhangsan");
// 属性中如果包含空格等特殊符号，需要使用单引号
$("div[class='demo1 a b']").css("fontSize", 100);
});
</script>
4.jQuery之DOM操作
4.1.DOM常见操作API
4.1.1DOM对象的属性操作
| 方法 | 作用 |
|---|---|
attr(name | properties | name,value | name, fn) | 设置或获取标签的属性，操作自定义属性 |
prop(name | properties | name,value | name, fn) | 设置或获取标签的js对象(DOM对象)的属性，操作DOM对象的属性 |
removeAttr(name) | 移除标签的属性 |
removeProp(name) | 将标签的js对象的属性设置成未定义undefined或字符串"undefined"，如果属性值的类型是字符串，则设置成字符串"undefined"，否则设置成未定义undefined，而有些属性不能被设置成未定义undefined，浏览器自带的机制会将该属性还原成默认值，如单选和多选的checked会被还原成默认值false，下拉框的selectedIndex会被还原成默认值0等等 |
4.1.2.DOM对象的CSS样式操作
相关API：
addClass(className) 添加class属性，例如：$("div").addClass("class1 class2")，如果是多个，用空格分开
removeClass([className]) 移除class属性，例如：$("div").removeClass("class1 class2")，如果是多个，用空格分开，如果不指定则全部移除
toggleClass(className) class属性的开关：如果存在就删除，如果不存在就添加
css(name) 获取css样式属性，只能获取匹配元素中的第一个
css(name, value) 设置css样式属性
css(properties) 传递key-value对象，设置多个css样式属性
css(name, fn) 方法的返回值作为name的值
【示例练习】
<div id="div1">AAAAAA</div>
<input type="button" value="背景颜色变为黄色" id="button1" />
<input type="button" value="字体颜色开关" id="button2" />
需求：
点击button，使一个div的背景颜色变为 黄色
通过toggleClass(class) 实现点击 字体变为蓝色，再点击样式还原
脚本代码：
<script type="text/javascript">
// jQuery核心函数1：$(callback);
jQuery(function($) {
//点击button，使一个div的背景颜色变为 黄色
$("#button1").click(function() {
$("#div1")
.css("backgroundColor", "yellow")
.addClass("bgyellow")
//.attr("style", "font-size:50px;")
;
});
//通过toggleClass(class) 实现点击 字体变为蓝色，再点击样式还原
$("#button2").click(function() {
$("#div1").toggleClass("fontColor");
});
});
</script>
4.1.3.DOM对象的HTML、text和value的设置和获取
相关API：
html() 获取元素的html内容，仅匹配元素中的第一个$("div").html();
html(html) 设置元素的html内容，设置所有的匹配元素的html内容，会解析html内容中的标签
text() 获取元素的文本内容，获取所有匹配元素的文本的拼接的结果<div>1</div><span>2</span> $("div,span").text() ===> 12
text(text) 设置元素的文本内容，设置所有的匹配元素的文本内容，不会解析html内容中的标签
val() 获取表单元素的值，仅匹配元素中的第一个，对于select下拉框，获取到的是所有选中项的值的DOM数组
val(value) 设置表单项元素的值，设置所有匹配元素的值
提示：
单选框、复选框和下拉框是3个比较特殊的表单元素：都是让用户选择，而且提交到服务器的值并不一定是用户看到的，
而是它们的value属性的值。因此在使用val()对单选框、复选框和下拉框进行设置和获取值的时候很特殊！
【示例练习】：需求在页面上
<div id="demo"><p>用户信息</p></div>
用户名：<input type="text" id="username" /><br/><br/>
性 别：<input type="radio" name="sex" value="1" />男
<input type="radio" name="sex" value="0" />女<br/><br/>
爱 好：<input type="checkbox" name="hobby" value="吃饭" />吃饭
<input type="checkbox" name="hobby" value="睡觉" />睡觉
<input type="checkbox" name="hobby" value="编程" />编程
<input type="checkbox" name="hobby" value="装逼" />装逼
<input type="checkbox" name="hobby" value="把妹" />把妹<br/><br/>
城 市：<select id="city" multiple>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select><br/><br/><br/>
<b><font color="red">使用开发人员工具中的控制台进行如下操作：</font></b>
<ul>
<li>获取div中 html和text 对比</li>
<li>使用val() 设置和获取输入框中的值</li>
<li>使用val() 获取单选框、复选框、下拉框选中的值</li>
<li>测试能否通过val() 设置单选框、复选框、下拉框的值（选中效果）？</li>
</ul>
4.2. DOM节点的CRUD
4.2.1.添加节点
回顾传统DOM添加节点：
document.createElement(元素名称); // 创建空节点
element.setAttribute(name, value) ; // 设置元素属性值
element. textContent = 文本内容; // 浏览器不兼容
父节点.appendChild(elements) ; // 添加节点元素
jQuery添加节点两步：
1.创建节点
使用核心函数$(html片段)，直接获得jQuery对象，例如：$("<div id=’1’ name=’2’>你好，jQuery!</div>")
2.添加节点
内部插入：都是指儿子
$node.append($newNode) 向匹配元素内部的最后位置添加新元素，$newNode可以是jquery对象，也可以是DOM对象，但是如果给定一个选择器，则认为这个选择器是一个字符串，例如:$("div").append("select")
$newNode.appendTo($node) 将新元素添加到匹配元素内部的最后，$newNode一定是jQuery对象，$node是jquery对象或者是DOM对象，也可以是选择器
$node.prepend($newNode) 向匹配元素内部的开始位置添加新元素
$newNode.prependTo($node) 将新元素添加到匹配元素内部的开始
外部插入：都是指兄弟
$node.after($newNode) 向匹配元素之后添加新元素，添加的是兄弟元素
$newNode.insertAfter($node) 将新元素添加到匹配元素之后
$node.before($newNode) 向匹配元素之前添加新元素
$newNode.insertBefore($node) 将新元素添加到匹配元素之前
总结：内部插入，插入的是子元素；外部插入，插入的是兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("h1").click(function () {
// 内部插入：都是指儿子
//$("ul").append("<li>小乔</li>");
//$("<li>小乔</li>").appendTo("ul");
//$("ul").prepend("<li>刘备</li>");
//$("<li>刘备</li>").prependTo("ul");
// 外部插入：都是指兄弟
//$("li:eq(2)").after("<li>庞统</li>");
//$("<li>庞统</li>").insertAfter("li:eq(2)");
//$("li:eq(2)").before("<li>庞统</li>");
$("<li>庞统</li>").insertBefore("li:eq(2)");
});
});
</script>
</head>
<body>
<h1>三国英雄排行</h1>
<ul>
<li>曹操</li>
<li>吕布</li>
<li>诸葛亮</li>
<li>董卓</li>
</ul>
</body>
</html>
【示例】
<select>
<option value="上海">上海</option>
</select>
【需求】
向下拉框的最后添加广州（内部插入）
在上海的前面添加北京（外部插入）
【脚本代码】
4.2.2.删除节点
回顾传统DOM删除节点：
获取被删除节点 obj
通过父节点删除子节点 obj. parentNode. removeChild(obj);
传统的dom节点删除需要通过父节点来删除子节点，但jQuery可以让当前节点自己被删除（自杀）。
语法和作用：
empty() 清空匹配元素下的所有子元素，例如：$("p").empty(); <p>aaa></p> ——> <p></p>
remove([selector]) 删除所有匹配元素，删除时还可以指定一个选择器，例如：$("p").remove(".hello")
该方法返回的是被删除的节点
该方法会连同节点的事件一起删除
detach([selector]) 删除所有匹配元素，删除时还可以指定一个选择器，例如：$("p").detach(".hello")
该方法与remove的区别是，会保留节点的事件
【示例】
<select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
【需求】
清空下拉框
分别使用detach和remove 删除带有change事件的select标签，再将select 重新加入body 查看事件是否存在？
【脚本代码】
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$("#city")
//以下是清空下拉框的三种方式
//.prop("length",0)
//.html("")
//.empty()
;
$("#city")
.change(function(){
alert(this.value);
})
//.remove() //连同节点的事件一起删除
//.detach() //保留节点的事件
.apppendTo("body")
;
});
</script>
</head>
<body>
<select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
4.2.3.节点的替换和复制（克隆）
回顾传统DOM中的节点复制和替换：
替换节点： 父节点.replaceChild(新节点, 原节点) ;
复制节点： 节点.cloneNode(boolean) 要不要复制节点的子节点和属性 （默认false）
使用jQuery替换和复制：
替换节点：
原节点.replaceWith(新节点);
如：$("p").replaceWith("<b>DEMO</b>"); 将所有p元素，替换为"<b>DEMO</b>"
新节点.replaceAll(原节点); 源节点可以是选择器或DOM对象或jQuery对象
如：$("<b>DEMO</b>").replaceAll("p"); 与replaceWith写法上相反，效果一样
复制(克隆)节点：
节点.clone(boolean, boolean);
返回节点的克隆对象
克隆时，可以接收两个boolean值
第一个boolean：是否复制节点的事件，默认false
第二个boolean：是否复制节点的子节点的事件，默认true，仅当第一个boolean值为true时有效
【示例练习】
<div id="mydiv">
<p id="p1">AAAAAAAAAA</p>
</div>
<p id="p2">BBBBBBBBBB<a href="#">CCCCCCCCCC</a></p>
【需求】
将id为p1的节点，替换成id为p2的节点
给id为p2的节点和它的子节点分别绑定一个单击事件
将id为p1的节点，替换成id为p2的节点，保留原来的p2节点
将id为p1的节点，替换成id为p2的节点，保留原来的p2节点和p2节点的事件
将id为p1的节点，替换成id为p2的节点，保留原来的p2节点和p2节点的事件，但不包含p2节点的子节点的事件
【脚本代码】
<script type="text/javascript">
// jQuery核心函数1：$(callback);
jQuery(function($) {
//将id为p1的节点，替换成id为p2的节点
// p2节点发生剪切现象
//$("#p1").replaceWith( $("#p2") );
//给id为p2的节点和它的子节点分别绑定一个单击事件
$("#p2").children()
.andSelf() // p2节点和他的子节点
.click(function() {
alert( $(this).text() );
});
//将id为p1的节点，替换成id为p2的节点，保留原来的p2节点
//var $clone = $("#p2").clone(); // 事件没有被复制
//$("#p1").replaceWith( $clone );
//将id为p1的节点，替换成id为p2的节点，保留原来的p2节点和p2节点的事件
//var $clone = $("#p2").clone(true); // 连同节点的事件一起复制，子节点的事件也会被复制
//$("#p1").replaceWith( $clone ); // 事件没有被复制
//将id为p1的节点，替换成id为p2的节点，保留原来的p2节点和p2节点的事件，但不包含p2节点的子节点的事件
var $clone = $("#p2").clone(true, false); // 连同节点的事件一起复制，不复制子节点的事件
$("#p1").replaceWith( $clone ); // 事件没有被复制
});
</script>
从jQuery1.8开始，.andSelf()方法已经被标注过时，在jQuery1.8和更高版本中应使用.addBack()。
4.3.综合小练习
4.3.1.基于页面的动态表格的添加和删除
网页布局：
<div align="center">
<h2>添加用户</h2>
<form>
<table>
<tr>
<td align="right">姓名：</td>
<td><input name="username" /></td>
</tr>
<tr>
<td align="right">邮箱：</td>
<td><input name="email" /></td>
</tr>
<tr>
<td align="right">电话：</td>
<td><input name="tel" /></td>
</tr>
<tr>
<td align="right" colspan="2">
<input id="addBtn" type="button" value=" 添 加 " />
<input type="reset" value=" 重 置 " />
</td>
</tr>
</table>
</form>
<hr/><br/>
<style type="text/css">
body{background-color: #f1f1f1;}div{margin-top:50px;}
#list {width: 500px;border-collapse: collapse;}
td,th{font-size: 14px;}
#list th,#list td {text-align: center;border:1px solid black;}
</style>
<table id="list">
<tr>
<th width="100px">姓名</th>
<th width="180px">邮箱</th>
<th width="130px">电话</th>
<th>操作</th>
</tr>
<tr>
<td>伊一</td>
<td>yiyi@163.cn</td>
<td>11111111111</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>牛二</td>
<td>niuer@163.cn</td>
<td>22222222222</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>张三</td>
<td>zhangsan@163.cn</td>
<td>33333333333</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</table>
</div>
分析步骤：
1.在添加按钮上绑定单击事件
2.在事件中，先获取表单的数据
3.将数据拼成tr，并转成jQuery对象
4.找到tr中的删除链接，并绑定单击事件：让tr自杀
5.将tr添加到id为list的table中
代码示例：
<script type="text/javascript">
/*页面加载完成事件：相当于jQuery(document).ready(fn);****/
jQuery(function($) {
//1．在添加按钮上绑定单击事件
$("#addBtn").click(function() {
//2．在事件中，先获取表单的数据
var username = $("input[name=username]").val();
var email = $("input[name=email]").val();
var tel = $("input[name=tel]").val();
//3．将数据拼成tr，并转成jQuery对象
$(
"<tr>\
<td>" + username + "</td>\
<td>" + email + "</td>\
<td>" + tel + "</td>\
<td><a href='javascript:;'>删除</a></td>\
</tr>"
)
//4．找到tr中的删除链接，并绑定单击事件：让tr自杀
.find("a").click(function() {
$(this).closest("tr").remove();
})
.end()
//5．将tr添加到id为list的table中
.appendTo("#list");
});
});
</script>
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
4.3.2.全选/全不选、反选
<input type="checkbox" id="selectAllCb" /> 全选/全不选
<input type="button" id="selectReverseBtn" value="反选" />
<br/><br/>
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="唱歌" />唱歌
脚本代码：
<script type="text/javascript">
/*页面加载完成事件：相当于jQuery(document).ready(fn);****/
jQuery(function($) {
var $cks = $(":checkbox[name=hobby]");
// 全选/全不选
$("#selectAllCb").click(function() {
// 让所有的爱好复选框和全选复选框的选中状态保持一致即可
$cks.prop("checked", this.checked);
});
// 当改变某个爱好的选中状态时，需要同步全选按钮的状态
$cks.click(function() {
// 先让全选按钮选中
/* $("#selectAllCb").prop("checked", true);
$cks.each(function() {
if (this.checked === false) {
$("#selectAllCb").prop("checked", false);
return false; // 要结束each循环，必须return false
}
}); */
// 将所有的选项和选中的选项做比较，如果数量相等，则全选按钮为选中状态
$("#selectAllCb").prop("checked", $cks.size() == $cks.filter(":checked").size());
//$("#selectAllCb").prop("checked", !$cks.is(":not(:checked)"));
});
// 反选
$("#selectReverseBtn").click(function() {
/* $cks.each(function() {
this.checked = !this.checked;
}); */
$cks.prop("checked", function(i, v) {
return !v;
});
});
});
</script>
is( ) 方法用于查看选择的元素是否匹配选择器。
https://www.w3school.com.cn/jquery/traversing_is.asp
4.3.3.下拉框选项左右移动
左移右移可以做权限的分配（用户、角色、权限）
html代码：
<table align="center" style="margin-top:200px;">
<tr>
<td>
<!-- 左边选择框 -->
<select id="leftSelect" multiple style="width:100px;height:200px">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="南京">南京</option>
<option value="杭州">杭州</option>
<option value="深圳">深圳</option>
</select>
</td>
<td>
<style>input{width:100px;margin:5px 10px;}</style>
<input type="button" id="toRightBtn" value="选中的右移"/><br/>
<input type="button" id="toRightAllBtn" value="全部右移"/><br/>
<input type="button" id="toLeftBtn" value="选中的左移"/><br/>
<input type="button" id="toLeftAllBtn" value="全部左移"/><br/>
</td>
<td>
<!-- 右边选择框 -->
<select id="rightSelect" multiple style="width:100px;height:200px">
<option value="郑州">郑州</option>
</select>
</td>
</tr>
</table>
脚本代码：
<script type="text/javascript">
// jQuery核心函数1：$(callback);
jQuery(function($) {
// 选中的右移：在对节点进行追加的时候，如果追加的元素在页面中已经存在，会发生剪切效果
$("#toRightBtn").click(function() {
$("#leftSelect option:selected").appendTo("#rightSelect");
});
$("#toRightAllBtn").click(function() {
$("#leftSelect option").appendTo("#rightSelect");
});
// 左移
$("#toLeftBtn").click(function() {
$("#rightSelect option:selected").appendTo("#leftSelect");
});
$("#toLeftAllBtn").click(function() {
$("#rightSelect option").appendTo("#leftSelect");
});
//$(":button[id^=to]")
$(":button[id$=Btn]")
.click(function() {
//$("option").prop("selected", false);
$("select").val( [] );
});
});
</script>
结论：如果追加的元素是页面上已存在的，会发生移动的现象，类似节点的替换
实际上append appendTo after before等操作也会发生移动的现象
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
