jQuery----获取兄弟元素的⽅法
① $(this).next()；获取的是当前元素的下⼀个兄弟元素
②$(this).nextAll();      获取的是当前元素的后⾯的所有的兄弟元素
③$(this).prev();          获取的是当前元素的前⼀个兄弟元素
④$(this).prevAll();      获取的是当前元素的前⾯的所有的兄弟元素
⑤$(this).siblings();      获取的是当前元素的所有的兄弟元素(⾃⼰除外)
案例练习：
需求分析：⿏标进⼊⽂字，当前⽂字背景变红⾊，当点击时候，当前⽂字前⾯⽂字背景颜⾊变为黄⾊，后⾯⽂字背景颜⾊变为蓝⾊，当⿏标移出时，所有背景颜⾊取消
效果：
代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <style>
7        ul {
8            list-style-type: none;
9            width: 200px;
10            margin: 100px auto;
11        }
12
13        ul li {
14            margin-top: 10px;
15            cursor: pointer;
16            text-align: center;
17            font-size: 20px;
18        }
19    </style>
20    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
21    <script>
22//获取ul中所有的li，有⿏标进⼊事件,⿏标离开事件，点击事件
23//        $(function () {
24//            //获取ul->li
25//            $("ul>li").mouseenter(function () {
26//                $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
27//            }).mouseleave(function () {
28//                $(this).css("backgroundColor","").siblings().css("backgroundColor","");
29//            }).click(function () {
30//                //当前元素前⾯的所有兄弟元素背景颜⾊为黄⾊
31//                //$(this).prevAll().css("backgroundColor","yellow");
32//                //当前元素后⾯的所有兄弟元素背景颜⾊为蓝⾊
33//                //$(this).nextAll().css("backgroundColor","blue");
34//
35//                //链式编程代码
36//                //断链：对象调⽤⽅法，返回的不是当前的对象，再调⽤⽅法，调⽤不了,
37//                //解决断链--->恢复到断链之前的⼀个效果--修复断链
38//                //.end()⽅法恢复到断链之前的效果
39//                $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
40//            });
41//        });
42
43            $(function(){
44//链式编程⿏标进⼊--⿏标点击--⿏标移出
45//$("ul>li").mouseover().click().mouseout();
46                $("ul>li").mouseover(function(){
47                    $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
48                }).click(function(){
49                    $(this).prevAll().css("backgroundColor","yellow");
50                    $(this).nextAll().css("backgroundColor","blue");
51                }).mouseout(function(){
52                    $("ul>li").css("backgroundColor","");
53                });
54            });
55    </script>
56 </head>
57 <body>
58 <ul>
59    <li>青岛啤酒（TsingTao）</li>
60    <li>⽡伦丁（Wurenbacher）</li>
61    <li>雪花（SNOW）</li>
62    <li>奥丁格教⼠（Franziskaner）</li>
63    <li>科罗娜喜⼒柏龙（Paulaner）</li>
64    <li>嘉⼠伯Kaiserdom</li>
65    <li>罗斯福（Rochefort）</li>
66    <li>粉象（Delirium）</li>
67    <li>爱⼠堡（Eichbaum）</li>
68    <li>哈尔滨牌蓝带</li>
69 </ul>
70
71 </body>
72 </html>
注意：上述代码第49、50⾏可以压缩成⼀⾏，这样就引⼊了⼀个新的⽅法
end()；作⽤是恢复短链。
jquery在一个元素后追加标签原来两⾏代码：
$(this).prevAll().css("backgroundColor","yellow");
$(this).nextAll().css("backgroundColor","blue");
修改后代码：
$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。