关于jQuery中的end()使用方法

在官方的API上是这样描述end()方法的：“回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。”；
看样子好像是找到最后一次操作的元素的上一元素，在如下的例子中：
html代码：


代码如下:

<div>测试内容1</div>
<div>测试内容2</div>

jQuery代码：


代码如下:

$('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2');

得到的结果是：


代码如下:

<div>测试内容1 <p class="c1 c2">新增内容</p></div>
<div>测试内容2 <p class="c1">新增内容</p></div>

这里我就有一点不太明白了，怎么只有第一个<p>标签有两个样式，end()方法后返回的是什么,在火狐里添加了监控，得到如下结果：
1.$('<p>新增内容</p>').appendTo('div')返回的是：[p,p]对象数组，即新增后的两个p标签；
2.$('<p>新增内容</p>').appendTo('div').addClass('c1')返回的是：[p.c1,p.c1]对象数组，即添加了c1类样式后的p对象数组；
3.$('<p>新增内容</p>').appendTo('div').addClass('c1').end()返回的是[p.c1],是第1个<div>中的<p>,在2操作中，最后“破坏”的是第2个<div>中的 <p>,所以他的前一次操作的对象是第1个<div>中的<p>,返回的就是它;
4.$('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2')返回的仍然是第1个<div>中的<p>;
现在算是有点明白了，关键是要搞清楚最后一次操作的元素的上一元素是什么。

赞 (0)

相关推荐

  • jQuery的end()方法使用详解

    end()方法的定义和用法: end()方法能够回到最近的一个"破坏性"操作之前,即将匹配的元素列表变为前一次的状态. 如果没有破坏性操作将返回一个空集. 破坏性操作的概念:指任何改变所匹配元素的操作.可能大家对这个概念比较模糊,举个例子: $("li").css("color","red"); 以上代码的CSS函数就不是一个破坏性操作,因为匹配元素列表并没有发生变化,改变的是元素中的文本内容的CSS属性. $("l

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

    本文实例讲述了jQuery中end()方法用法.分享给大家供大家参考.具体分析如下: end()方法能够回到最近的一个"破坏性"操作之前,即将匹配的元素列表变为前一次的状态. 如果没有破坏性操作将返回一个空集. 破坏性操作的概念:指任何改变所匹配元素的操作.可能大家对这个概念比较模糊,举个例子: 复制代码 代码如下: $("li").css("color","red"); 以上代码的CSS函数就不是一个破坏性操作,因为匹配元素

  • jQuery中ajax的get()方法用法实例

    本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

  • jQuery中ajax的load()方法用法实例

    本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.

  • jQuery中ajax的post()方法用法实例

    本文实例讲述了jQuery中ajax的post()方法用法.分享给大家供大家参考.具体分析如下: $.post() 方法通过HTTP POST请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.post(URL,data,callback); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,规定连同请求发送的数据. 3.callback:可选,规定请求成功后所执行的函数名. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • jQuery中的deferred使用方法

    jQuery中的deferred使用方法

    deferred简介 deferred对象是jQuery的回调函数解决方案,jQuery之前的版本中异步回调这块做的不是很好,所以后期补上了该解决方案. 普遍的ajax操作方式 我们先来回顾一下jQuery中普通的ajax操作 $.ajax({ url: 'test.html', success: function (res) { console.log('数据读取成功'); }, error: function () { console.log('数据读取失败'); } }); 1.5版本后的

  • jquery中animate的stop()方法作用实例分析

    本文实例分析了jquery中animate的stop()方法作用.分享给大家供大家参考.具体分析如下: 这里以一个视频中的代码段告诉你stop()的作用: 代码如下: <style type="text/css"> ul li{ width:50px; height:30px; background:#333; margin-bottom:10px; color:#fff;} </style> <ul id="flyul"> &l

  • jQuery中slidedown与slideup方法用法示例

    这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jQuery中fadein与fadeout方法用法示例

    本文实例讲述了jQuery中fadein与fadeout方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • Jquery中find与each方法用法实例

    本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id") $(this) $(element) 等等,只要灵活运用,就能爆发出强大的可造型. 但是在实际使用中,仍然觉得有些不足. 如果想要在某个元素下寻找特定的元素,仅仅依靠上面这个方法,就必须对 $("

  • jQuery中show与hide方法用法示例

    本文实例分析了jQuery中show与hide方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • jQuery中的一些常见方法小结(推荐)

    1.filter()和not()方法 filter()和not()是一对反方法,filter()是过滤. filter()方法是针对元素自身.(跟has()方法有区别) <script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> /*filter(): 过滤 not():filter的反义词<BR>*/ $(function(

随机推荐