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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
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截取html字符串及自动补全html标签的方法
2015/01/15 PHP
深入浅出php socket编程
2015/05/13 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
js运动事件函数详解
2016/10/21 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
python3中int(整型)的使用教程
2017/03/23 Python
Python 操作MySQL详解及实例
2017/04/30 Python
基于python socketserver框架全面解析
2017/09/21 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
Jar包的作用是什么
2014/03/30 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
市场营销求职信范文
2014/02/21 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
股权转让协议范本
2014/12/07 职场文书
如何写好活动总结
2019/06/21 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL