jQuery链使用指南

 这篇文章主要介绍了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>

时间: 2024-08-02 14:52:45

jQuery链使用指南的相关文章

jQuery链使用指南_jquery

从前文的实例中,我们按到jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. 复制代码 代码如下:     <script type="text/javascript">             $(function() {                 $("div").addClass("css1").filter(function(index) {                     r

Jquery 学习笔记(二)jQuery性能优化指南

Jquery 学习笔记(二) -jQuery性能优化指南 2009年11月30日 一 作者:   邦畿千里   1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: <div id="content"> <form method="post" action="#"> <h2>交通信号灯<

jQuery 性能优化指南 (1)_jquery

1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: 复制代码 代码如下: <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"&

jQuery中文入门指南,翻译加实例,jQuery的起点教程_基础知识

jQuery中文入门指南,翻译加实例,jQuery的起点教程 中文版译者:Keel 此文以实例为基础一步步说明了jQuery的工作方式.现以中文翻译(添加我的补充说明)如下.如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知. 英文原版:http://jquery.bassistance.de/jquery-getting-started.html ,感谢原文作者 Jörn Zaefferer 本文发布已征求原作者同意. 另外我认为在学习过程中,有两个API文档你要打开随时

jQuery性能优化指南

jQuery性能优化指南,可以从以下12个方向考虑. 1,总是从ID选择器开始继承 2,在class前使用tag(标签名) 3,将jQuery对象缓存起来(在多次使用是,用一个中间变量代替,而不是总是用选择器)   4,对直接的DOM操作进行限制 5,注意尽量减少事件冒泡 6,推迟到 $(window).load   7,压缩JavaScript 8,尽量使用ID代替Class. 9,给选择器一个上下文   10,慎用 .live()方法(应该说尽量不要使用) 11,子选择器和后代选择器   1

jQuery链式操作的问题

两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来,对象当然可以继续调用方法啦,所以就可以链式操作了.那么,简单实现一个: //定义一个JS类 function Demo() { } //扩展它的prototype Demo.prototype ={ setName:function (name) { this.na

区块链技术指南.

区块链技术指南 邹均 张海宁 唐屹 李磊 等著 图书在版编目(CIP)数据 区块链技术指南 / 邹均等著. -北京:机械工业出版社,2016.11 ISBN 978-7-111-55356-4 I. 区- II. 邹- III. 电子商务-支付方式-指南 IV. F713.361.3-62 中国版本图书馆CIP数据核字(2016)第268750号 区块链技术指南 出版发行:机械工业出版社(北京市西城区百万庄大街22号 邮政编码:100037) 责任编辑:高婧雅 责任校对:殷 虹 印 刷: 版 次

《区块链开发指南》一一导读

前 言 Preface 比特币于2009年诞生,在很长一段时间内,人们只知比特币,不知区块链.从2015年开始,区块链像狂风一样席卷全球,倍受金融界和科技界的关注:2015年年底,区块链技术逐渐得到国内金融界和科技界的了解和认同. 区块链行业的蓬勃发展源于区块链有可能给各行业带来巨大的变革.麦肯锡在2016年年初发布报告,指出区块链技术将在未来五年内颠覆众多行业,特别是银行业和保险业:埃森哲预测到2025年,区块链技术每年可帮助全球8大投资银行节省80亿美元至120亿美元的基础设施成本. 全球金

jQuery应用之jQuery链用法实例_jquery

本文实例讲述了jQuery应用之jQuery链用法.分享给大家供大家参考.具体分析如下: 很多时候我们可以将jQuery语句链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果.先看如下代码: 复制代码 代码如下: <script type="text/javascript">     $(function() {  $("div").addClass("css1").filter(function(index) {