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>

赞 (0)

相关推荐

  • 自己动手手写jQuery插件总结

    自己动手手写jQuery插件总结

    jQuery是继Prototype之后的又一款优秀的JavaScript框架,深受广大开发者热爱,用户甚广.而jQuery一个很好的地方在 于用户的自定义,即我们可以书写自己的插件来完善jQuery的各项功能,定制自己所需要的功能,剔除冗余的代码,在页面加载时候可以有一定程度上的提 升. 面试之后,触动很大,就是你要做的是一个了解十项还是精通一项的开发者?于是花了几天时间苦逼的研读jQuery源码,了解了jQuery的事件机制.选择器以及浏览器兼容性是如何做到的等.之后就一直想要书写一款jQue

  • 使用jQuery管理选择结果

    使用jQuery选择出来的元素与数组非常类似,可以通过jQuery提供的一系列方法对其进行处理,包括长度.查找某个元素,截取某个段落等. 1.获取元素的个数. 在jQuery中可以通过size()方法获取选择器中元素的个数,它类似数组中的length属性,返回整数值,例如: $("img").size() 获取页面中,所有图片<img>的数目 如下是一个实例,通过不断的点击添加div块并计算页面中的<div>块. 复制代码 代码如下: <style>

  • jQuery中Ajax的get、post等方法详解

    load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称 类型 说明 url String 请求的HTML页的URL地址 data(可选) Obj

  • jQuery中delegate()方法用法实例

    本文实例讲述了jQuery中delegate()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数. 语法结构: 复制代码 代码如下: $(selector).delegate(childofselector,type,data,function) 参数列表: 参数 描述 childofselector 定义要附加事件处理程序的一个或多个子元素. type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值.

  • jquery tagname 取得方法

    如果你查找Jquery的API,会发现这个好象是Jquery的一个盲点,找来找去也没有明确说明用什么办法可以取到HTML标签的名字,如果直接用 $("H1").tagName 这样的方式也无法取到"H1"这样的值,好象只会得到"undifined". 后来发现Jquery居然将tagName也视为属性之一了,有趣. 所以用 $("H1").attr("tagName") jquery tagname fun

  • jquery+ajax实现跨域请求的方法

    本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为  "jsonp"  :type 只能为 GET 前台请求代码如下: 复制代码 代码如下: $.ajax({  type: "GET",  url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin",  dataType: "j

  • 利用JQuery为搜索栏增加tag提示

    利用JQuery为搜索栏增加tag提示

    很简单的一个功能,就是当用户在搜索栏输入搜索字符时候,利用JQuery的功能把一些预设好的关键字浮现出来,除了让用户意外一下,还有就是让用户简化输入.比如象下图的样子: 实现的方法很简单,首先是要在你的网站上加载JQuery,然后再加载下面的JS文件,下载之 复制代码 代码如下: (function($){var globalTags=[];window.setGlobalTags=function(tags){globalTags=getTags(tags);};function getTag

  • jQuery实现tag便签去重效果的方法

    本文实例讲述了jQuery实现tag便签去重效果的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: 复制代码 代码如下: <head> <script type="text/javascript" src="js/jQuery.js"></script>  <!--jquery引用代码--> <script type="text/javascript" src="j

  • jQuery链使用指南

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

  • jQuery 性能优化指南 （1）

    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 性能优化指南（3）

    8,尽量使用ID代替Class. 前面性能优化已经说过,ID选择器的速度是最快的.所以在HTML代码中,能使用ID的尽量使用ID来代替class.看下面的一个例子: // 创建一个list var $myList = $('#myList'); var myListItems = '<ul>'; for (i = 0; i < 1000; i++) { myListItems += '<li class="listItem' + i + '">This i

  • jQuery应用之jQuery链用法实例

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

  • jQuery 性能优化指南（2）

    4,对直接的DOM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM . 这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 .直接的DOM操作速度很慢. 例如,你想动态的创建一组列表元素,千万不要这样做,如下所示: var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $("#mylist"); // jQuery 选择到 <ul> 元素 for (var i=0,

  • jQuery链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <script type="text/javascript"> $(function() { $("div").addClass("css1").filter(function(index) { return index == 1 || $(this).

  • 详解jQuery 链式调用

    详解jQuery 链式调用

    链式调用 jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用jQuery的方法和属性.即--可以使用jQuery对象进行连续打点调用 console.log($(this).css("background-color", "pink").html("hello")); jQuery对象调用除了节点关系的方法之外,其他的方法执行后,返回

  • jQuery链式操作如何实现以及为什么要用链式操作

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

  • jQuery链式调用与show知识浅析

    jQuery链式调用与show知识浅析

    上篇文章给大家介绍了jQuery的框架,有关jquery的基础知识可以参考下. jQuery使用许久了,但是有一些API的实现实在想不通.下面将使用简化的代码来介绍,主要关注jQuery的实现思想. 相较于上一篇,代码更新了:21~78 (function(window, undefined){ function jQuery(sel){ return new jQuery.prototype.init(sel); } jQuery.prototype = { constructor: jQue

随机推荐