2018/2/2 19:06:55当前位置推荐好文程序员浏览文章
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>jQuery遍历</title>        <link rel="stylesheet" type="text/css" href="css/jQuery.css" />        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    </head>    <body>        <div>            <ul>                <li>                    <h1>大标题</h1>                    <span>我是span</span>                    <p class="p1">我是p 1</p>                    <p >我是p 2</p>                </li>            </ul>        </div>        <div>            <button type="button" id="button1">祖先</button>            <button type="button" id="button2">后代</button>            <button type="button" id="button3">同胞</button>            <button type="button" id="button4">过滤</button>        </div>        <script>            $("#button1").click(function() {                // 001//              $("span").parents().css({//                  "border": "2px solid red"//              });                // 002//              $("span").parents("ul").css({"background-color":"red"})                // 003                $("span").parentsUntil("ul").css({"border":"2px solid red"});            })            $("#button2").click(function() {                // 001 //              $("div").children().css({"border":"2px solid red"});                // 002 children 只对子元素查找 查不到孙子//              $("div").children("ul").css({"border":"2px solid red"});                // 003 可以查儿子、孙子、曾孙子...                $("div").find("span").css({"border":"2px solid red"});                // 004 所有后代//              $("div").find("").css({"border":"2px solid red"});            })            $("#button3").click(function() {                // 001 同胞//              $("p").siblings().css({"border":"2px solid red"});                // 002 指定同胞//              $("p").siblings("span").css({"border":"2px solid red"});                // 003 下一个同胞//              $("span").next().css({"border":"2px solid red"});                // 004 //              $("h1").nextAll().css({"border":"2px solid red"});                // 005                 $("h1").nextUntil("p").css({"border":"2px solid red"});            })            $("#button4").click(function() {                // 001//              $("div p").last().css({"border":"2px solid red"});                // 002 //              $("p").eq(1).css({"border":"2px solid red"});                // 003 //              $("p").filter(".p1").css({"border":"2px solid red"});                // 004                $("p").not(".p1").css({"border":"2px solid red"});            })        </script>    </body></html>
网友评论