jQuery应用之jQuery链用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery应用之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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
Node调用Java的示例代码
Sep 20 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 #Javascript
jQuery中ready事件用法实例
Jan 19 #Javascript
jQuery中offsetParent()方法用法实例
Jan 19 #Javascript
jQuery中outerWidth()方法用法实例
Jan 19 #Javascript
javascript数据类型示例分享
Jan 19 #Javascript
jQuery中outerHeight()方法用法实例
Jan 19 #Javascript
jQuery中innerWidth()方法用法实例
Jan 19 #Javascript
You might like
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
php获取mysql版本的几种方法小结
2008/03/25 PHP
smarty section简介与用法分析
2008/10/03 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
php防攻击代码升级版
2010/12/29 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
python实现猜单词游戏
2020/05/22 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
就业表自我评价分享
2014/02/06 职场文书
白酒市场营销方案
2014/02/25 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
英语复习计划
2015/01/19 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle