jQuery链式操作实例分析


Posted in Javascript onNovember 16, 2015

本文实例讲述了jQuery链式操作。分享给大家供大家参考,具体如下:

从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果。

<script type="text/javascript">
  $(function() {
    $("div").addClass("css1").filter(function(index) {
      return index == 1 || $(this).attr("id") == "fourth";
    }).addClass("css2");
  });
</script>

以上代码为整个<div>列表增加样式css1,然后再进行筛选,再为筛选的元素单独增加css2样式。如果不采用jQuery,实现上述的效果将非常麻烦。

在jQuery链中,后面的操作都是以前面的操作结果为对象的,如果希望操作对象为上一步的对象,则可以使用end()方法。

用end()方法来控制jQuery链。

<script type="text/javascript">
  $(function() {
    $("p").find("span").addClass("css1").end().addClass("css2");
  });
</script>
<p>Hello,<span>how</span>are you?</p>
<span>very nice,</span>Thank you.

以上代码在<p>中搜索<span>标记,然后添加风格css1,利用end()方法将操作对象往回设置为$("p")并添加样式风格css2.

另外,还可以通过andSelf()将前面两个对象进行组合后共同处理。

用andSelf()方法控制jQuery链。

<script type="text/javascript">
  $(function() {
    $("div").find("p").addClass("css1").andSelf().addClass("css2");
  });
</script>
<div>
  <p>第一段</p>
  <p>第二段</p>
</div>

以上jQuery代码首先在<div>中搜索<p>标记,添加css1,这个风格只对<p>标记有效,然后利用andSelf()方法将<div>和<p>组合在一起,然后添加样式css2,这个风格对<div>和<p>均有效。

运行效果如下:

<div class="css2">
  <p class="css1 css2">第一段</p>
  <p class="css1 css2">第二段</p>
</div>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
详解React服务端渲染从入门到精通
Mar 28 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
javascript伸缩型菜单实现代码
Nov 16 #Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 #Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 #Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 #Javascript
实例代码详解jquery.slides.js
Nov 16 #Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 #Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
php分页函数
2006/07/08 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python的标准模块包json详解
2017/03/13 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
pytest中文文档之编写断言
2019/09/12 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
Linux机考试题
2015/07/17 面试题
授权委托书格式模板
2014/04/03 职场文书
大学社团活动总结
2014/04/26 职场文书
影视后期实训报告
2014/11/05 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Nginx配置https的实现
2021/11/27 Servers