jQuery(二)链式操作

最新推荐文章于 2025-06-25 11:14:47 发布

更好的自己520

最新推荐文章于 2025-06-25 11:14:47 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础总结文章标签： jquery

本文链接：https://blog.youkuaiyun.com/a3060858469/article/details/80101375

前端基础总结专栏收录该内容

18 篇文章

订阅专栏

本文介绍了使用jQuery实现导航栏功能的链式操作方法。通过点击事件，为元素添加和删除样式，显示和隐藏元素，实现了简洁高效的交互效果。文章展示了如何通过一行代码完成复杂的DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(".level>a").click(function(){
     $(this).addClass("current")  给当前的元素添加 current样式
     .next().show()     下一个元素显示
     .parent().siblings().children("a").removeClass("current") 
          父元素的同辈元素的子元素<a>移除"current"样式

     .next().hide()   它们的下一个元素隐藏
     return  false;
})

当点击到a元素(class含有level1的子元素)时候，给其添加名为current的class，然后将紧邻其后面的元素显示出来，同时把它的父辈的同辈元素内部子元素a都去掉class=current，并且将紧邻它们后面的元素都隐藏。

这就是jQuery强大的链式操作，一行代码就完成了导航栏的功能。

总结：
1：对于同一个对象不超过3个操作的，可以直接写成一行。代码如下：

$("li").show().unbind("click");

2：对于同一个对象的较多操作，建议每行写一个操作，代码如下：

$(this).removeClass("mouseout")
       .addClass("mouseOver")
       .stop()
       .fadeTo("fast",0.6)
       .fadeTo("fast",1)
       .unbind("click")
       .click(function(){
         //do something...
})

3：对于多个对象的少量操作，可以每个对象写一行，如果涉及到子元素，可以考虑适当的锁进，例如上面提到的代码

$(this).addClass("highlight")
       .children("li").show().end()
       .siblings().removeClass("highlight")
       .children("li").hide();

代码简析

$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");

这段代码的作用是，在一个id为table的表格的tbody元素中，如果每行的一列中的checkbox没有被禁用，则把这一行的背景色设为红色。