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 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
10分钟学会js处理json的常用方法
Dec 06 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代码(星期六,星期日总和)
2009/11/12 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP引用返回用法示例
2016/05/28 PHP
JS实现可改变列宽的table实例
2013/07/02 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
后勤主管岗位职责
2014/03/01 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
个人查摆剖析材料
2014/10/04 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
超市员工管理制度
2015/08/06 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
python munch库的使用解析
2021/05/25 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android