zoukankan      html  css  js  c++  java
  • jquery遍历

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>jquery遍历</title>
            <script src="../js/jquery-1.8.3.js"></script>
            <script src="../js/jquery-1.4.2.js"></script>
            <style>
                .ancestors *
                { 
                    display: block;
                    border: 2px solid lightgrey;
                    color: lightgrey;
                    padding: 5px;
                    margin: 15px;
                }
            </style>
            <script>
                /*
                 * 祖先是父、祖父或曾祖父等等。
                 * 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。
                 * 
                 * 向上遍历 DOM 树
                 * 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
                 * parent()
                 * parents()
                 * parentsUntil()
                 */
                $(document).ready(function(){
                    /*
                     * jQuery parent() 方法
                     * parent() 方法返回被选元素的直接父元素。
                     * 该方法只会向上一级对 DOM 树进行遍历。
                     * 下面的例子返回每个 <span> 元素的的直接父元素:
                     */
                    $("span").parent().css({
                        "color":"red",
                        "border":"2px solid red"
                    });
                    /*
                     * jQuery parents() 方法
                     * parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
                     * 下面的例子返回所有 <span> 元素的所有祖先:
                     * 实例
                     */
                    $("span").parents().css({
                        "color":"red",
                        "border":"2px solid red"
                    });
                    //下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:
                     $("span").parents("ul").css({"color":"red","border":"2px solid red"});
                     
                     /*
                      * jQuery parentsUntil() 方法
                      * parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
                      * 下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
                      */
                      $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
                });
            </script>
        </head>
        <body>
            <div class="ancestors">
                <div style="500px;">div (曾祖父)
                    <ul>ul (祖父)  
                      <li>li (直接父)
                      <span>span</span>
                        </li>
                    </ul>   
                </div>
    
              <div style="500px;">div (祖父)   
                <p>p (直接父)
                <span>span</span>
                  </p> 
              </div>
        </div>
        </body>
    </html>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>jquery遍历-后代</title>
            <script src="../js/jquery-1.8.3.js"></script>
            <script src="../js/jquery-1.4.2.js"></script>
            <style>
                .descendants *
                { 
                    display: block;
                    border: 2px solid lightgrey;
                    color: lightgrey;
                    padding: 5px;
                    margin: 15px;
                }
            </style>
            <script>
                /*
                 * jQuery 遍历 - 后代
                 * 后代是子、孙、曾孙等等。
                 * 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。
                 * 向下遍历 DOM 树
                 * 下面是两个用于向下遍历 DOM 树的 jQuery 方法:
                 * children()
                 * find()
                 */
                $(document).ready(function(){
                    
                    /*
                     * jQuery children() 方法
                     * children() 方法返回被选元素的所有直接子元素。
                     * 该方法只会向下一级对 DOM 树进行遍历。
                     * 下面的例子返回每个 <div> 元素的所有直接子元素:
                     */
                    
                    $("div").children().css({"color":"red","border":"2px solid red"});
                    
                    /*
                     * 您也可以使用可选参数来过滤对子元素的搜索。
                     * 下面的例子返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:
                     * 
                     * $(document).ready(function(){
                     *     $("div").children("p.1");
                     * });
                     */
                    
                    /*
                     * jQuery find() 方法
                     * find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
                     * 下面的例子返回属于 <div> 后代的所有 <span> 元素:
                     */
                    $("div").find("span").css({"color":"red","border":"2px solid red"});
                });
            </script>
        </head>
        <body>
            <div class="descendants" style="500px;">div (当前元素) 
                <p>p (子)
                    <span>span (孙)</span>     
                  </p>
                  <p>p (child)
                <span>span (孙)</span>
                  </p> 
            </div>
        </body>
    </html>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>jquery遍历-同胞</title>
            <script src="../js/jquery-1.8.3.js"></script>
            <script src="../js/jquery-1.4.2.js"></script>
            <script>
                /*
                 * 同胞拥有相同的父元素。
                 * 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素
                 * 
                 * 在 DOM 树中水平遍历
                 * 有许多有用的方法让我们在 DOM 树进行水平遍历:
                 * siblings()
                 * next()
                 * nextAll()
                 * nextUntil()
                 * prev()
                 * prevAll()
                 * prevUntil()
                 */
                
                /*
                 * jQuery siblings() 方法
                 * siblings() 方法返回被选元素的所有同胞元素。
                 * 下面的例子返回 <h2> 的所有同胞元素:
                 */
                $(document).ready(function(){
                    $("h2").siblings().css({"color":"red","border":"2px solid red"});
                    /*
                     * 您也可以使用可选参数来过滤对同胞元素的搜索。
                     * 下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素:
                     * 
                     * $(document).ready(function(){
                     *     $("h2").siblings("p");
                     * });
                     */
                    
                    
                    
                    /*
                     * jQuery next() 方法
                     * next() 方法返回被选元素的下一个同胞元素。
                     * 该方法只返回一个元素。
                     * 下面的例子返回 <h2> 的下一个同胞元素:
                     */
                    
                    $("h2").next().css({"color":"red","border":"2px solid red"});
                    
                    
                    
                    /*
                     * jQuery nextAll() 方法
                     * nextAll() 方法返回被选元素的所有跟随的同胞元素。
                     * 下面的例子返回 <h2> 的所有跟随的同胞元素:
                     */
                    $("h2").nextAll().css({"color":"red","border":"2px solid red"});
                    
                    
                    /*
                     * jQuery nextUntil() 方法
                     * nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
                     * 下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素:
                     */
                    
                    $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
                    
                    /*
                     * prev(), prevAll() 以及 prevUntil() 
                     * 方法的工作方式与上面的方法类似,只不过方向相反而已:
                     * 它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
                     */
                    
                });
            </script>
        </head>
        <body class="siblings">
            <div>div (父)
                <p>p</p>
                <span>span</span>
                <h2>h2</h2>
                <h3>h3</h3>
                <p>p</p>
             </div>
        </body>
    </html>
    一纸高中万里风,寒窗读破华堂空。 莫道长安花看尽,由来枝叶几相同?
  • 相关阅读:
    按需取余
    P3372 【模板】线段树 1
    POJ 3180 The Cow Prom ( korasaju 算法模板)
    【题解】Qin Shi Huang's National Road System HDU 4081 ⭐⭐⭐⭐ 【次小生成树】
    iOS 端容器之 WKWebView 那些事
    无影,会是接近未来的工作场景吗?
    Serverless Devs 2.0 全新发布,让 Serverless 应用开发更简单
    李飞飞:新技术变革时代的数据库产业
    如何攻破容器持久化存储挑战?
    Dubbo 和 HSF 在阿里巴巴的实践:携手走向下一代云原生微服务
  • 原文地址:https://www.cnblogs.com/byczyz/p/11200981.html
Copyright © 2011-2022 走看看