DOM节点选取：

显示全部楼层 · 2021-3-4 15:56

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").click(function(){
//DOM节点选取
$(this).siblings();//兄弟
$(this).addClass('active').siblings().removeClass('active');
$(this).parent();//直接父元素
$(this).parents();//祖先
//DOM插入
$(this).before('<li>(标签外)之前</li>');//在被选元素之前插入内容
$(this).prepend('<b>开头</b>');//在被选元素的开头插入内容
$(this).append('<b>结尾</b>');//在被选元素的结尾插入内容
$(this).after('<li>(标签外)之后</li>');//在被选元素之后插入内容
});
$("#button").click(function(){
//遍历
$("ul li").each(function(){
console.log($(this).text())
});
$("ul li").each(function(i,element){
console.log($(this).text())
console.log($(element).text());
console.log(i);
});
});
});
</script>
<ul><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li></ul>
<input type="button" id="button" value="遍历">

复制代码