jQuery链使用指南


Posted in Javascript onJanuary 20, 2015

从前文的实例中,我们按到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>
Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
使用jQuery管理选择结果
Jan 20 #Javascript
javascript动态修改Li节点值的方法
Jan 20 #Javascript
js+css实现tab菜单切换效果的方法
Jan 20 #Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 #Javascript
js动态切换图片的方法
Jan 20 #Javascript
JavaScript 基本概念
Jan 20 #Javascript
自己动手手写jQuery插件总结
Jan 20 #Javascript
You might like
Php+SqlServer实现分页显示
2006/10/09 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python实现图片文件批量重命名
2020/03/23 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
如何基于Python批量下载音乐
2019/11/11 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Linux如何压缩可执行文件
2014/03/27 面试题
大学新生欢迎词
2014/01/10 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
公司捐书倡议书
2015/04/27 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
党支部评议意见
2015/06/02 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书