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 相关文章推荐
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
es6中比较有用的7个技巧小结
Jul 12 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
如何在 Vue 表单中处理图片
Jan 26 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
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
python如何在终端里面显示一张图片
2016/08/17 Python
Python中extend和append的区别讲解
2019/01/24 Python
python 读取数据库并绘图的实例
2019/12/03 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
酒店应聘自荐信
2013/11/09 职场文书
伦敦奥运会口号
2014/06/13 职场文书
个人授权委托书样本
2014/09/13 职场文书
杭白菊导游词
2015/02/10 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
golang中的空接口使用详解
2021/03/30 Python
多表查询、事务、DCL
2021/04/05 MySQL
vue封装数字翻牌器
2022/04/20 Vue.js