查找节点, 修改属性
查找属性节点: 查找到所需要的元素之后, 可以调用jQuery对象的attr()方法用来 设置/返回 它的各种属性值
- 设置属性值 $(“img”).attr(“width”, “300”);
- 返回属性值 $(“img”).attr(“width”);
创建节点
- 创建节点: 使用jQuery的工厂函数$(): $(html标签); 会根据传入的html标记字符串创建一个jQuery对象并返回.
- 动态创建的新元素节点不会自动地添加到文档中, 而是需要使用其它方法将其插入到文档中
- 当创建单个元素时, 需要注意闭合标签和使用标准的XHTML格式. 例如创建一个<p>元素, 可以使用$(“<p/>”)或者$(“<p></p>”), 但不能使用$(“<p>”)或$(“</p>”)
- 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
第1组方法(内部插入法)
- append(content): 向每个匹配的元素的内部的结尾处追加内容
A.append(B) 解读: (1) A, B都是Jquery对象; (2) 表示把B对象插入到A对象内部的结尾处; (3) 结果是: B对象成为了A对象的子元素/子节点- appendTo(content): 将每个匹配的元素追加到指定元素中的内部结尾处
A.appendTo(B) 解读: (1) A, B都是Jquery对象; (2) 表示把A对象插入到B对象内部的结尾处; (3) 结果是: A对象成为了B对象的子元素/节点- prepend(content): 向每个匹配的元素的内部的开始处插入内容
A.prepend(B) 解读: (1) A, B都是Jquery对象; (2) 表示把B对象插入到A对象内部的开始处; (3) 结果是: B对象成为了A对象的子元素/节点- prependTo(content): 将每个匹配的元素插入到指定元素中的内部开始处
A.prependTo(B) 解读: (1) A, B都是Jquery对象; (2) 表示把A对象插入到B对象内部的开始处; (3) 结果是: A对象成为了B对象的子元素/节点
总结: 内部插入法是在元素内插入内容(该内容成为该元素的子元素或子节点)
第2组方法(外部插入法)
- after(content): 在每个匹配的元素之后插入内容
A.after(B) 解读: A, B都是Jquery对象; (2) 把B对象插入到A对象的后面; (3) 结果是: B对象成为A对象的兄弟节点- before(content): 在每个匹配的元素之前插入内容
A.before(B) 解读: A, B都是Jquery对象; (2) 把B对象插入到A对象的前面; (3) 结果是: B对象成为A对象的兄弟节点- insertAfter(content): 把所有匹配的元素插入到另一个指定的元素集合的后面
A.insertAfter(B) 解读: (1) A, B都是Jquery对象; (2) 把A对象插入到B对象的后面; (3) 结果是: A对象成为B对象的后一个兄弟节点- insertBefore(content): 把所有匹配的元素插入到另一个指定的元素集合的前面
A.insertBefore(B) 解读: (1) A, B都是Jquery对象; (2) 把A对象插入到B对象的前面; (3) 结果是: A对象成为B对象的前一个兄弟节点
总结: 外部插入法是在元素的外面插入内容(其内容变为元素的兄弟节点)
注意: 以上方法不但能将新的DOM元素插入到文档中, 也能对原有的DOM元素进行移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建节点</title>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//添加重庆li到上海后面(用传统的dom方式)
$("#btn1").click(function () {
//1.创建重庆li元素
var cq_li = document.createElement("li");
//2.设置属性和内容
cq_li.setAttribute("id", "cq");
cq_li.setAttribute("name", "chongqing");
cq_li.innerText = "重庆";
//3.添加到指定元素的后面
var sh_li = document.getElementById("sh");
sh_li.append(cq_li);
});
//添加重庆li到上海后面(jquery完成节点添加)
$("#btn2").click(function () {
var $cq_li = $("<li id='cq' name='chongqing'>重庆</li>");
//内部插入法, 相当于<li id="sh" name="shanghai">上海<li id='cq' name='chongqing'>重庆</li></li>
$cq_li.appendTo($("#sh"));
//外部插入法, 更合适
$cq_li.insertAfter($("#sh"));
});
//添加济宁li到北京前(jquery完成节点添加)
$("#btn3").click(function () {
//创建济宁li
var $jn_li = $("<li id='jn' name='jiNing'>济宁</li>");
//添加到北京li前面, 此时不能使用内部插入法, 必须使用外部插入法, 不信看效果
// $("#bj").prepend($jn_li);
$jn_li.insertBefore($("#bj"));
});
//添加成都li到北京和上海之间(jquery完成节点添加)
$("#btn4").click(function () {
//创建成都li
var $cd_li = $("<li id='cd' name='chengdu'>成都</li>");
// $cd_li.insertAfter($("#bj"));
$cd_li.insertBefore($("#sh"));
})
//添加成都li到吉林前面(jquery完成节点添加)
$("#btn5").click(function () {
//创建成都li
var $cd_li = $("<li id='cd' name='chengdu'>成都</li>");
$cd_li.insertBefore($("#jl"));
})
})
</script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="jl" name="jilin">吉林</li>
<li id="xj" name="xinjiang">新疆</li>
</ul>
<input type="button" id="btn1" value="添加重庆li到上海后面(用传统的dom方式)">
<input type="button" id="btn2" value="添加重庆li到上海后面(jquery完成节点添加)">
<input type="button" id="btn3" value="添加济宁li到北京前(jquery完成节点添加)">
<input type="button" id="btn4" value="添加成都li到北京和上海之间(jquery完成节点添加)">
<input type="button" id="btn5" value="添加成都li到吉林前面(jquery完成节点添加)">
</body>
</html>
移动节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动节点</title>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//使用aflter插入法, 把地下城li移动到穿越火线后面
$("#btn1").click(function () {
//(1)使用外部插入法, 把地下城li移动到穿越火线后面(推荐)
$("#dnf").insertAfter($("#jl"));
//(2)使用内部插入法, 把地下城li移动到穿越火线后面(不推荐)
$("#dnf").appendTo($("#jl"));
});
})
</script>
</head>
<body>
您喜欢的城市:
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="jl" name="jilin">吉林</li>
</ul>
您爱好的游戏:
<ul id="game">
<li id="dnf" name="dnf">地下城</li>
<li id="cf" name="cf">穿越火线</li>
</ul>
<input type="button" id="btn1" value="使用aflter插入法, 把地下城li移动到穿越火线后面">
</body>
</html>
删除节点
- remove(): 从DOM中删除所有匹配的元素, 传入的参数用于根据jQuery表达式来筛选元素. 当某个节点用remove()方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用
- empty(): 清空节点 - 清空元素中的所有后代节点(包括文本节点, 但不包含属性节点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除节点</title>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//删除所有<p>元素
$("#btn1").click(function () {
$("p").remove();//这不是jquery方法
});
//所有p清空
$("#btn2").click(function () {
$("p").empty();
});
//删除上海这个li
$("#btn3").click(function () {
//这个是完全移除
$("#sh").remove();
//这个会保留<li id="sh" name="shanghai"></li>
$("#sh").empty();
})
});
</script>
</head>
<body>
您喜欢的城市:
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="jl" name="jilin">吉林</li>
</ul>
<p>你好 </p> 刀剑神域 <p>亚丝娜</p>
<p name="test">你好 <span>刀剑神域</span> <a>桐谷和人</a></p>
<input type="button" id="btn1" value="删除所有<p>元素">
<input type="button" id="btn2" value="所有p清空">
<input type="button" id="btn3" value="删除上海这个li">
</body>
</html>
复制节点
- clone(): 克隆匹配的DOM元素, 返回值为克隆后的副本, 但此时复制的新节点不具有任何行为, 也就是说它没有把事件复制过来
- clone(true): 复制元素的同时也复制元素中的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆节点</title>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//点击p, 弹出文本信息
$("p").click(function () {
//隐式的传入一个this->p的dom对象
alert("段落的内容=" + $(this).text());
})
//克隆p, 插入到按钮后面
//1.$("p").clone() 表示克隆p元素, 但没有复制事件
$("p").clone().insertAfter($("button"));
//2.$("p").cloine() 表示克隆p元素, 同时复制事件
$("p").clone(true).insertAfter($("button"));
});
</script>
</head>
<body>
<button>保存</button>
///
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>
替换节点
- replaceWith(): 将所有匹配的元素都替换为指定的HTML或DOM元素.
A.replaceWith(B) 用B来替换A(这里的B可以是HTML元素或DOM元素) - replaceAll(): 颠倒了的replaceWith()方法
A.replaceAll(B) 用A去替换B(这里的A只能是DOM元素, B一般是DOM元素, 还未遇到是HTML元素的情况)
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换节点</title>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//1.将p元素替换为button元素(HTML或DOM元素)
// (1)
$("p").replaceWith("<button>亚丝娜</button>");
// (2)
var $button = $("<button value='亚丝娜'>亚丝娜</button>");
$button.click(function () {
alert($(this).val());
})
$("p").replaceWith($button);
// (3)
$button.replaceAll($("p"));
//2.将p元素替换为超链接
// (1)
$("p").replaceWith("<a href='http://www.baidu.com'>超链接</a>");
// (2)
var $a = $("<a href='http://www.baidu.com'>超链接</a>");
$("p").replaceWith($a);
// (3)
$a.replaceAll($("p"));
});
</script>
</head>
<body>
<h1>节点替换</h1>
<p>你好</p>
<p>刀剑神域</p>
<p>亚丝娜</p>
</body>
</html>
属性操作
- attr(): 获取属性和设置属性
- attr() 传递一个参数时, 表示获取某个元素指定的属性
- attr() 传递两个参数时, 表示为某个元素设置指定属性的值
- jQuery中有很多方法都是一个函数实现获取和设置. 比如: attr(), html(), text(), val(), height(), width(), css()等.
示例: var $button = $(“<button><span>亚丝娜</span></button>”);
alert($button.text()): -> 亚丝娜
alert($button.html()): -> <span>亚丝娜</span>
$(this).text(“桐人”); -> button标签会变成 <button>桐人</button>
$(this).html(“桐人”); -> button标签会变成 <button><span>桐人</span></button>
- removeAttr(): 删除指定元素的属性
样式操作
- 获取class和设置class: class是元素的一个属性, 所以获取class和设置lass都可以使用attr()方法来完成
- 追加样式: addClass()
- 移除样式: removeClass() — 从匹配的元素中删除全部或指定的class
- 切换样式: toggleClass() — 控制样式上的重复切换. 如果类名存在则删除它, 如果类名不存在则添加它
- 判断是否具有某个样式: hasClass() — 判断元素中是否含有某个class. 如果有, 返回true; 如果没有,返回false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式操作</title>
<style>
input {
height: 40px;
margin-top: 5px;
}
div {
width: 200px;
height: 200px;
margin: 20px;
float: left;
}
.one {
background-color: pink;
}
</style>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//1.获取class和设置class都可以使用attr()方法来完成--给id为first的元素添加.one样式
$("#btn01").click(function () {
$("#first").attr("class", "one");
})
//2.追加样式: addClass()--给id为first的元素添加.one样式
$("#btn02").click(function () {
$("#first").addClass("one");
})
//3.移除样式: removeClass()--从匹配的元素中删除全部或指定的样式
$("#btn03").click(function () {
$("#first").removeClass("one");
})
//4.切换样式: toggleClass()--给id为first的元素切换.one样式(如果类名存在就删除, 如果类名不存在就添加)
$("#btn04").click(function () {
$("#first").toggleClass("one");
})
//5.判断是否含有某个样式: hasClass()--判断元素中是否含有某个class.如果有,返回true;如果没有,返回false
$("#btn05").click(function () {
alert($("#first").hasClass("one"));
})
});
</script>
</head>
<body>
<input type="button" value="获取class和设置class都可以使用attr()方法来完成--给id为first的元素添加.one样式" id="btn01"/><br/>
<input type="button" value="追加样式: addClass()--给id为first的元素添加.one样式" id="btn02"/><br/>
<input type="button" value="移除样式: removeClass()--从匹配的元素中删除全部或指定的样式" id="btn03"/><br/>
<input type="button" value="切换样式: toggleClass()--给id为first的元素切换.one样式" id="btn04"/><br/>
<input type="button" value="判断是否含有某个样式: hasClass()--判断元素中是否含有某个class.如果有,返回true;如果没有,返回false" id="btn05"/><br/>
<div id="first">first</div>
<div id="second">second</div>
</body>
</html>
获取html 文本和值
- 设置或返回所选元素的内容(包括HTML标记): html()
- 读取或设置所选元素的文本内容: text(). 该方法既可以用于HTML也可以用于XML文档
- 读取或设置某个元素的值: val(). 该方法类似JavaScript中的value属性, 对于文本框input, 下拉框select, 单选框radio, 该方法可以返回元素的值
this.defaultValue: 表单元素的默认值属性(this是dom对象, 不是Jquery对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>val()练习</title>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//1.给btn01绑定一个获取焦点事件
// 当用户把光标定位到输入框btn01时, 该事件就会被触发
$("#btn01").focus(function () {
//获取->判断
//获取到当前值
var currentVal = $(this).val();
//如果当前值就是默认值, 就清空, 让用户输入自己的值
if (currentVal == this.defaultValue) {
$(this).val('');
}
})
//2.给btn01绑定一个失去焦点事件
// 当用户的光标离开输入框, 就会触发该事件
$("#btn01").blur(function () {
//获取当前值
var currentVal = $(this).val();
//如果当前值为'',说明用户没有输入内容
//就恢复显示默认信息
if (currentVal == '') {
$(this).val(this.defaultValue);
}
})
});
</script>
</head>
<body>
<input type="text" value="用户邮箱/手机号/用户名" id="btn01"/><br/>
<input type="password" value="" id="btn02"/><br/>
<input type="button" value="登录" id="btn03"/>
</body>
</html>
🌳常用遍历节点方法
常用遍历节点方法
- 取得匹配元素的所有子元素组成的集合: children() . 该方法只考虑子元素而不考虑任何后代元素(隔代元素不考虑)
- $(selector).find(filter)方法返回被选元素的后代元素, 包括直接子元素
- 取得匹配元素后面的同辈元素的集合: next()(紧邻)/nextAll()(所有)
- 取得匹配元素前面的同辈元素的集合: prev()(紧邻)/prevAll()(所有)
- 取得匹配元素前后所有的同辈元素: siblings()
- 获取指定的第几个元素: nextAll().eq(index)
- 对获取到的同辈元素进行过滤 nextAll().filter(“标签”)
- 取得匹配元素的直接父元素: parent()
- 取得匹配元素的所有祖先元素: parents(“元素标签”)
参考👉
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历元素</title>
<style>
input[type=button] {
height: 30px;
}
</style>
<script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//1.查找class为one的div元素的所有子元素
$("#btn01").click(function () {
$("div.one").children().each(function () {
alert("子div的内容是= " + $(this).text());
})
//获取指定第几个子元素, eq(1), 表示获取第2个子元素(索引从0开始)
alert($("div.one").children().filter("div").eq(1).text());
})
//2.查找class为one的div元素的class为five的后代元素
$("#btn02").click(function () {
alert($("div.one").find("div:eq(5)").text());
})
//3.获取后面的同辈div元素(class为one的div元素)
$("#btn03").click(function () {
$("div.one").nextAll().filter("div").each(function () {
alert("后面同辈的div的内容是= " + $(this).text());
})
//获取指定第几个元素, eq(1), 表示获取第2个子元素(索引从0开始)
alert($("div.one").nextAll().filter("div").eq(1).text());
//如果我们希望获取后面紧邻的同辈元素
alert("后面紧邻的同辈元素= " + $("div.one").next().text());
});
//4.获取前面的同辈div元素(class为one的div元素)
$("#btn04").click(function () {
$("div.one").prevAll().filter("div").each(function () {
alert("前面同辈的div的内容是= " + $(this).text());
})
//规则: 越靠近$(this)元素,索引越小; 反之越远离, 索引越大
//获取前一个紧邻的元素: eq(0), 表示获取第1个子元素(索引从0开始)
alert($("div.one").prevAll().filter("div").eq(0).text());
//如果我们希望获取前面紧邻的同辈元素
alert("前面紧邻的同辈元素= " + $("div.one").prev().text());
});
//5.获取所有同辈的div元素(class为one的div元素)
$("#btn05").click(function () {
$("div.one").siblings().filter("div").each(function () {
alert("所有同辈的div的内容是= " + $(this).text());
});
//获取第几个元素, eq(2), 表示获取第3个子元素(索引从0开始)
alert($("div.one").siblings().filter("div").eq(2).text());
})
//6.获取父元素及祖先元素(class为five的div元素)
$("#btn06").click(function () {
//(1)获取父元素: 匹配元素集合中每个元素的直接父元素
var $div = $("div.five").parent();//返回的是一个对象
alert($div.html());
//获取父元素的父元素, 返回的是一个对象
var parent = $("div.five").parent().parent();//获取到了class="one"的祖先元素
alert(parent.attr("class"));
//(2)获取祖先元素: 返回的是一个数组, 当前匹配元素的所有祖先元素, 包括父元素
var parents = $("div.five").parents("div");
parents.each(function () {//获取到了id=five, class=one的元素
alert($(this).html());
})
})
})
</script>
</head>
<body>
<input type="button" value="查找class为one的div元素的所有子元素" id="btn01"/><br/>
<input type="button" value="查找class为one的div元素的class为five的后代元素" id="btn02"/><br/>
<input type="button" value="获取后面的同辈div元素(class为one的div元素)" id="btn03"/><br/>
<input type="button" value="获取前面的同辈div元素(class为one的div元素)" id="btn04"/><br/>
<input type="button" value="获取所有的同辈div元素(class为one的div元素)" id="btn05"/><br/>
<input type="button" value="获取父元素及祖先元素(class为five的div元素)" id="btn06"/><br/>
<hr/>
<div>aaaaaaaaaaaa</div>
<div class="one">
<div id="one">
xxxxxxxx one
</div>
<div id="two">
xxxxxxxx two
</div>
<div id="three">
xxxxxxxx three
</div>
<div id="four">
xxxxxxxx four
</div>
<div id="five">
xxxxxxxx five_01
<div class="five">
xxxxxxxx five_02
</div>
</div>
</div>
<div>bbbbbbbbbbbb</div>
<div>cccccccccccc</div>
<div>dddddddddddd</div>
</body>
</html>
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
