定义和用法

end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

以上是官方说法，比较难理解。

还是用一个例子来说明

<!DOCTYPE html>

<html>

<head>

  <style>p { margin:10px; padding:10px; }</style>

  <script type="text/javascript" src="/jquery/jquery.js"></script>

</head>

<body>

  <p><span>Hello</span>, how are you?</p>

  <script>$("p").find("span").end().css("border", "2px red solid");</script>

</body>

</html>

$("p").find("span")表示查找P元素下的SPAN元素

但是我想更改P的边框，这时我就要返回到P元素（即从SPAN返回到P,就是还原为之前的状态)

$("p").find("span").end()这个语句就返回来了。

$("p").find("span").end().css("border", "2px red solid")把P的边框设置了。

-------------------

对于end()方法，jQuery文档是这样解释的：jQuery回到最近的一个"破坏性"操作 之前。即: 将匹配的元素列表变为前一次的状态。

    但给的例子并不是很明显，相信不少人并没有理解它的用法。

    下边我们以一个非常简单的例子来说明下用法，html代码如下：

<div id="test">

    <h1>jQuery end()方法</h1>

    <p>讲解jQuery中end()方法。</p>

</div>

JS代码：

$(document).ready(function() {

    $("#test").click(function() {

        $(this).find("p").hide().end().hide();

    });

});

点击id为test的div时，首先找到div里边的p标签，将其隐藏。接下来使用end()方法结束了对p标签的引用，此时返回的是#test(jQuery对象)，从而后边的hide()方法隐藏了div。这样相信大家已经理解了jQuery中end()方法。

----------------------

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

<!--

    $(function(){

        $('<input type="button" value="click me" /><input type="button" value="triggle click me" /><input type="button" value="detach handle" /><input type="button" value="show/hide text" />').appendTo($('body'));

        $('input[type="button"]').eq(0).click(function(){

            alert('you clicked me!');

        })

        .end().eq(1).click(function(){

            $('input[type="button"]:eq(0)').trigger('click');

        })

        .end().eq(2).click(function(){

            $('input[typw="button"]:eq(0)').unbind('click');

        })

        .end().eq(3).toggle(function(){

            $('.panel').hide('slow');

        },function(){

            $('.panel').show('slow');

        });

    })

//-->

</script>

<style type="text/css">

    .panel{

        padding:20px;

        color:#FFFFFF;

        font-weight:bold;

        width:200px;

        height:50px;

    }

</style>

<div class="panel">welcome to jQuery!</div>

jQuery中的end()方法的更多相关文章

  1. jquery 中一些 特殊方法 的特殊使用 一览表

    cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...

  2. 解决关于jquery中$.get(）方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy”错的方法

    解决关于jquery中$.get()方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the ...

  3. jQuery中的join方法

    和JS 中的JOIN 方法一样,将一数组按照JOIN的参数连接起来.比如: var arr = [ "a", "b", "c", " ...

  4. jquery中的index方法

    问题描述:灵活使用jquery中的index方法 方法签名:index([selector|element]) 用法概述:P1.index(P2)  //调用者P1可以为对象或集合 参数为空,返回P1 ...

  5. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

  6. jQuery中的ready方法及实现按需加载css,js

    模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...

  7. $.ajax()方法详解 jquery中的ajax方法

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  8. jQuery中的$.ajax()方法

    jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...

  9. jquery中的ajax方法参数

    引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...

  10. HTML5中的data-*属性和jQuery中的.data()方法使用

    原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...

随机推荐

  1. Python的可迭代对象、迭代器和生成器

    可迭代对象(Iterable) 这些可以直接作用于for循环的对象统称为可迭代对象:Iterable. 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.t ...

  2. JavaScript Best Practices (w3cschool)

    JavaScript Best Practices (w3cschool) Local Variables: ·      总是在前面集中定义变量,(包括 for 的i).(strict mode) ...

  3. 2-scala集合

    1.集合的数据结构: array.seq .set .map(映射) 2.集合分类 集合分为可变集合和不可变集合(除元组外,元组没有可变和不可变) scala.collection.immutable ...

  4. github提交代码后没有contribution问题

    好气啊,好几天的代码提交后发现没有contribution,强迫症表示不能忍,仔细排查了下原因 可能有以下几个原因 1.提交代码的用户名和邮箱和账号不符合 方法1:git命令行设置用户名和邮箱 git ...

  5. Spring中BeanFactory与ApplicationContext的区别

    BeanFactory:Bean工厂接口,是访问Spring Bean容器的根接口,基本Bean视图客户端.从其名称上即可看出其功能,即实现Spring Bean容器的读取. ApplicationC ...

  6. C# .NET 配置404,500等错误信息

    <customErrors mode="On" defaultRedirect="viewAll.html"><!--所有的错误显示页--&g ...

  7. 数据库设计和ER模型-------之ER模型的基本概念（第二章）

    ER模型(实体联系模型)的基本元素 实体:是一个数据对象,在ER模型中,实体用方框表示,方框内注明实体的名称 联系:表示一个或多个实体之间的关联关系,联系用菱形框表示,并用线段将其与相关的实体联系起来 ...

  8. mke2fs

    mke2fs - create an ext2/ext3/ext4 filesystem # mke2fs -b -c -N -t ext4 /dev/sdb #(注意末尾是/dev/sdb....? ...

  9. 关于Access导入Oracle会产生双引号的问题

    把Access2007的数据导入到oracle 10g xe中,成功了,可是在写sql语句时必须加双引号 ,如select “name” from “Product”,貌似是因为access为了防止列 ...

  10. 自动化脚本编写环境部署_win7（RF）

    第一步 安装Python并设置环境变量 1.安装python: python下载地址https://www.python.org/,建议用2.7.x版本 2.设置环境变量: 方法如下所示  第二步 安 ...