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实现雪花飘落效果
Aug 26 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
javascript连续赋值问题
Jul 08 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
新手如何快速理解js异步编程
Jun 24 Javascript
JS自定义滚动条效果
Mar 13 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python中的代码编码格式转换问题
2015/06/10 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python的re模块使用方法详解
2019/07/26 Python
关于Python解包知识点总结
2020/05/05 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
生物科学专业职业规划书范文
2014/02/11 职场文书
服务行业演讲稿
2014/09/02 职场文书
房屋认购协议书
2015/01/29 职场文书
公司放假通知怎么写
2015/04/15 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书