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 css样式操作代码(批量操作)
Oct 09 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
JS中的模糊查询功能
Dec 08 Javascript
微信小程序实现拼图小游戏
Oct 22 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
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python 实现数组相减示例
2019/12/27 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
python 多线程中join()的作用
2020/10/29 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
《云雀的心愿》教学反思
2014/02/25 职场文书
物业管理工作方案
2014/05/10 职场文书
会计求职自荐信
2014/06/20 职场文书
大学生简历求职信
2014/06/24 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
现场活动策划方案
2014/08/22 职场文书
丧事答谢词
2015/01/05 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
圣诞晚会主持词
2015/07/01 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
Python 中的Sympy详细使用
2021/08/07 Python
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技