介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Title
& lt; style>
ul {
list-style-type:没有;
宽度:200 px;
保证金:100 px的汽车;
}
ul李{
margin-top: 10 px;
光标:指针;
text-align:中心;
字体大小:20 px;
}
& lt;/style>
& lt;脚本src=https://www.yisu.com/zixun/" js/jquery-1.12.2.js " type=" text/javascript " charset=" utf - 8 ">
<脚本>//获取ul中所有的,有鼠标进入事件,鼠标离开事件,点击事件//$(函数(){////获取ul ->//$ (“ul>李”)。mouseenter(函数(){//$ (). css(“写成backgroundColor”、“红色”).siblings () . css(“写成backgroundColor”、" ");//})。mouseleave(函数(){//$ (). css(“写成backgroundColor”、“) .siblings () . css(“写成backgroundColor”、" ");//})。点击(函数(){////当前元素前面的所有兄弟元素背景颜色为黄色////(美元).prevAll () . css(“写成backgroundColor”、“黄色”);////当前元素后面的所有兄弟元素背景颜色为蓝色////(美元).nextAll () . css(“写成backgroundColor”、“蓝色”);//////链式编程代码////断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,////解决断链- - - - - ->恢复到断链之前的一个效果,修复断链////指标()方最终法恢复到断链之前的效果//美元(这).prevAll () . css(“写成backgroundColor”、“黄色”)指标()最终.nextAll () . css(“写成backgroundColor”、“蓝色”);//});//});
$(函数(){//链式编程鼠标进入——鼠标点击——鼠标移出//$ (“ul>李”).mouseover () .click () .mouseout ();
$ (" ul>李”).mouseover(函数(){
$ (). css(“写成backgroundColor”、“红色”).siblings(“李”). css(“写成backgroundColor”、" ");
(){}).click(功能
美元(这).prevAll () . css(“写成backgroundColor”、“黄色”);
美元(这).nextAll () . css(“写成backgroundColor”、“蓝色”);
(){}).mouseout(功能
$ (" ul>李”). css(“写成backgroundColor”、" ");
});
});>
小编给大家分享一下jQuery获取兄弟元素的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
①(这). next();美元,,,,获取的是当前元素的下一个兄弟元素
②美元(这).nextAll ();,,,获取的是当前元素的后面的所有的兄弟元素
③美元(这).prev ();,,,,,获取的是当前元素的前一个兄弟元素
④美元(这).prevAll ();,,,获取的是当前元素的前面的所有的兄弟元素
⑤美元(这).siblings ();,,,获取的是当前元素的所有的兄弟元素(自己除外)
案例练习:
需求分析:鼠标进入文字,当前文字背景变红色,当点击时候,当前文字前面文字背景颜色变为黄色,后面文字背景颜色变为蓝色,当鼠标移出时,所有背景颜色取消
效果:
代码如下:
-
<李>青岛啤酒(青岛)
<李>瓦伦丁(Wurenbacher)
<李>雪花(雪)
<李>奥丁格教士(Franziskaner)
<李>科罗娜喜力柏龙(Paulaner)
<李>嘉士伯政权李
<李>罗斯福(罗什福尔)
<李>粉象(谵妄)
<李>爱士堡(Eichbaum)
<李>哈尔滨牌蓝带李