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 相关文章推荐
angularjs基础教程
Dec 25 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
原生js实现简单轮播图
Oct 26 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中动态显示签名和ip原理
2007/03/28 PHP
PHP 编程安全性小结
2010/01/08 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python复制文件到指定目录的实例
2018/04/27 Python
python format 格式化输出方法
2018/07/16 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
人事部经理岗位职责
2014/03/07 职场文书
2014年国培研修感言
2014/03/09 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
毕业横幅标语
2014/10/08 职场文书
公司租房协议书
2014/10/14 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS