jQuery----获取兄弟元素的方法

① $(this).next()；获取的是当前元素的下一个兄弟元素

②$(this).nextAll(); 获取的是当前元素的后面的所有的兄弟元素

③$(this).prev(); 获取的是当前元素的前一个兄弟元素

④$(this).prevAll(); 获取的是当前元素的前面的所有的兄弟元素

⑤$(this).siblings(); 获取的是当前元素的所有的兄弟元素(自己除外)

案例练习：

需求分析：鼠标进入文字，当前文字背景变红色，当点击时候，当前文字前面文字背景颜色变为黄色，后面文字背景颜色变为蓝色，当鼠标移出时，所有背景颜色取消

效果：

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         ul {

             list-style-type: none;

             width: 200px;

             margin: 100px auto;

         }

         ul li {

             margin-top: 10px;

             cursor: pointer;

             text-align: center;

             font-size: 20px;

         }

     </style>

     <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

     <script>

         //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件

 //         $(function () {

 //             //获取ul->li

 //             $("ul>li").mouseenter(function () {

 //                 $(this).css("backgroundColor","red").siblings().css("backgroundColor","");

 //             }).mouseleave(function () {

 //                 $(this).css("backgroundColor","").siblings().css("backgroundColor","");

 //             }).click(function () {

 //                 //当前元素前面的所有兄弟元素背景颜色为黄色

 //                 //$(this).prevAll().css("backgroundColor","yellow");

 //                 //当前元素后面的所有兄弟元素背景颜色为蓝色

 //                 //$(this).nextAll().css("backgroundColor","blue");

 //

 //                 //链式编程代码

 //                 //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,

 //                 //解决断链--->恢复到断链之前的一个效果--修复断链

 //                 //.end()方法恢复到断链之前的效果

 //                 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

 //             });

 //         });

             $(function(){

                 //链式编程  鼠标进入--鼠标点击--鼠标移出

                 //$("ul>li").mouseover().click().mouseout();

                 $("ul>li").mouseover(function(){

                     $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");

                 }).click(function(){

                     $(this).prevAll().css("backgroundColor","yellow");

                     $(this).nextAll().css("backgroundColor","blue");

                 }).mouseout(function(){

                     $("ul>li").css("backgroundColor","");

                 });

             });

     </script>

 </head>

 <body>

 <ul>

     <li>青岛啤酒（TsingTao）</li>

     <li>瓦伦丁（Wurenbacher）</li>

     <li>雪花（SNOW）</li>

     <li>奥丁格教士（Franziskaner）</li>

     <li>科罗娜喜力柏龙（Paulaner）</li>

     <li>嘉士伯Kaiserdom</li>

     <li>罗斯福（Rochefort）</li>

     <li>粉象（Delirium）</li>

     <li>爱士堡（Eichbaum）</li>

     <li>哈尔滨牌蓝带</li>

 </ul>

 </body>

 </html>

注意：上述代码第49、50行可以压缩成一行，这样就引入了一个新的方法

end()；作用是恢复短链。

原来两行代码：

$(this).prevAll().css("backgroundColor","yellow");

$(this).nextAll().css("backgroundColor","blue");

修改后代码：

$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

巴特西

jQuery----获取兄弟元素的方法

最新文章

热门文章