文章目录
1.DOM常见操作API
1.1.DOM对象的属性操作
| 方法 | 作用 |
|---|---|
| `attr(name | properties |
| `prop(name | properties |
removeAttr(name) | 移除标签的属性 |
removeProp(name) | 将标签的js对象的属性设置成未定义undefined或字符串"undefined"，如果属性值的类型是字符串，则设置成字符串"undefined"，否则设置成未定义undefined，而有些属性不能被设置成未定义undefined，浏览器自带的机制会将该属性还原成默认值，如单选和多选的checked会被还原成默认值false，下拉框的selectedIndex会被还原成默认值0等等 |
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>
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>
2. DOM节点的CRUD
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>
【需求】
向下拉框的最后添加广州（内部插入）
在上海的前面添加北京（外部插入）
【脚本代码】
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>
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()。
3.综合小练习
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 树向上。
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
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等操作也会发生移动的现象
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
