① $(this).next(); 获取的是当前元素的下一个兄弟元素
②$(this).nextAll(); 获取的是当前元素的后面的所有的兄弟元素
③$(this).prev(); 获取的是当前元素的前一个兄弟元素
④$(this).prevAll(); 获取的是当前元素的前面的所有的兄弟元素
⑤$(this).siblings(); 获取的是当前元素的所有的兄弟元素(自己除外)
案例练习:
需求分析:鼠标进入文字,当前文字背景变红色,当点击时候,当前文字前面文字背景颜色变为黄色,后面文字背景颜色变为蓝色,当鼠标移出时,所有背景颜色取消
效果:
代码如下:
- 青岛啤酒(TsingTao)
- 瓦伦丁(Wurenbacher)
- 雪花(SNOW)
- 奥丁格教士(Franziskaner)
- 科罗娜喜力柏龙(Paulaner)
- 嘉士伯Kaiserdom
- 罗斯福(Rochefort)
- 粉象(Delirium)
- 爱士堡(Eichbaum)
- 哈尔滨牌蓝带
注意: 上述代码第49、50行可以压缩成一行,这样就引入了一个新的方法
end();作用是恢复短链。
原来两行代码:
).prevAll().css("backgroundColor","yellow"
).nextAll().css("backgroundColor","blue");
修改后代码:
).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。