jQuery之dom操作(遍历节点)

来源：互联网发布：淘宝新店推广编辑：程序博客网时间：2024/04/30 20:28

jQuery之dom操作(遍历节点)

children()/children(selector) -- 只考虑子元素，不考虑其他后代元素

next()/next(selector) -- 下一个兄弟节点

prev()/prev(selector) -- 上一个兄弟节点

siblings()/siblings(selector) -- 其他兄弟节点

find(selector) -- 从某个节点开始查找后代中满足selector的节点

parent() -- 父节点

示例代码：/jQuery01/WebRoot/dom/d7.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>遍历节点</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>    <script type="text/javascript">    $(function(){        $('#b1').click(function(){            //children()/children(selector) --只考虑子元素，不考虑其他后代元素            //var $obj = $('#d1').children();            //获取后代中所有的div子节点            var $obj = $('#d1').children('div');            //length属性：获得jQuery对象包含的dom对象个数            //alert($obj.length);            //next()/next(selector)  --  下一个兄弟节点            //$('#d4').next().css('color','red');            //$('#d4').next('p').css('color','red');            //prev()/prev(selector)  --  上一个兄弟节点            //$('#d4').prev().css('color','red');            //siblings()/siblings(selector)  --  其他兄弟节点            //$('#d3').siblings('div').css('font-size','60px');            //find(selector)--从某个节点开始查找后代中满足selector的节点            //$('#d1').find('span').css('font-size','60px');            //parent()  --  父节点            alert($('#d2').parent().attr('id'));            });        });    </script>  </head>  <body style="font-size:30px;">  <div id="d1">  <div id="d2">hello 1</div>  <div id="d3">  hello 2  <span>1111</span>  </div>  <div id="d4">hello 3</div>  <p>hello 4</p>  </div>  <input id="b1" type="button" value="遍历节点"><br/>  </body></html>

0 0