文章目录
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等操作也会发生移动的现象