chengtongpo 发表于 2021-3-4 15:56

DOM节点选取:

<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="遍历">
页: [1]
查看完整版本: DOM节点选取: