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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
vue插件实现v-model功能
Sep 10 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
详解Vue router路由
Nov 20 Vue.js
使用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实现ODBC数据分页显示一例
2006/10/09 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
chrome原生方法之数组
2011/11/30 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Django框架封装外部函数示例
2019/05/28 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
python将字母转化为数字实例方法
2019/10/04 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
创业计划书怎样才能打动风投
2014/01/01 职场文书
党员的自我评价范文
2014/01/02 职场文书
省文明单位申报材料
2014/05/08 职场文书
办公用品质量保证书
2015/05/11 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
高三化学教学反思
2016/02/22 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis