经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery链式编程
来源:cnblogs  作者:bignewbie  时间:2019/3/25 9:15:27  对本文有异议

链式编程

多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程

.html(‘val’).text(‘val’).css()链式编程,隐式迭代

链式编程注意:$(‘div’).html(‘设置值’).val(‘设置值’);这样可以,但是$(‘div’).html().text()这样是不对的,因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。

 

案例:

页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红,
当点击某个li的时候,让该li之前的所有li背景色变黄,之后的所有li背景色变蓝。自
己不变色。注意:nextAll()、prevAll()等方法返回值是一个元素集合,这里链式编程
时要想清楚当前返回的值是什么。

 

获得兄弟元素的几个方法:

next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素(上一个)
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素

以下代码为主要代码:

  1. $("ul>li").mouseenter(function () {
  2.   $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
  3.   }).click(function () {
  4.     $(this).prevAll().css("backgroundColor","yellow");
  5.   $(this).nextAll().css("backgroundColor","blue");
  6.   }).mouseleave(function () {
  7.   $(this).css("backgroundColor","");
  8. });

显示效果:

 

 

 

特此声明:如需转载请注明出处,如有疑问请及时提出以便于改正,如有侵权,联系删除,谢谢

 

原文链接:http://www.cnblogs.com/CGWTQ/p/10577233.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号