jQuery中andSelf()方法用法实例

本文实例讲述了jQuery中andSelf()方法用法。分享给大家供大家参考。具体分析如下：

此方法可以将先前所选的元素加入当前元素集合中。

语法结构:


代码如下:

.andSelf()

对于此方法可能理解起来有所困难，那么下面就详细分析一下下面的一段实例，为了便于查看代码，只截取了代码中的核心内容。

代码如下:

$(".second").nextAll().css("color","green");
<ul>
  <li>html专区</li>
  <li class="second">DIV+CSS专区</li>
  <li>Javascript专区</li>
  <li>Jquery专区</li>
</ul>

以上代码运行之后，第三个和第四个li中的文本颜色被设置为绿色。再看下面这个代码:

代码如下:

$(".second").nextAll().andSelf().css("color","green");
<ul>
  <li>html专区</li>
  <li class="second">DIV+CSS专区</li>
  <li>Javascript专区</li>
  <li>Jquery专区</li>
</ul>

以上代码运行之后，第二个、第三个和第四个li中的文本颜色被设置为绿色。
两个代码运行结果的差距就是因为andSelf()方法的原因。

分析一下代码的执行过程:首先使用类选择器会选中第二个li元素，然后再使用nextAll()方法会把第三个和第四个元素转化为当前所选。如果到这里开始调用css()方法，那么就是第一段代码的运行结果。如果调用andSelf()方法则会把先前所选的加入到当前元素集合中，于是再调用css()方法，三个li元素中的字体颜色都会变成绿色。

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>我们</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".second").nextAll().andSelf().css("color","green");
})
</script>
</head>
<body>
<div>
  <ul>
    <li>html专区</li>
    <li class="second">DIV+CSS专区</li>
    <li>Javascript专区</li>
    <li>Jquery专区</li>
  </ul>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

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

    本文实例讲述了jQuery中append()方法用法.分享给大家供大家参考.具体分析如下: 此方法在匹配元素的结尾插入指定内容. 元素被插入的位置是匹配元素的内部,而after()方法元素被插入的位置是匹配元素的外部. append()方法的作用和appendTo()方法是相同的,但是语法是不同的,尽管语法形式一样. 语法结构: 复制代码 代码如下: $(selector).append(content) 参数列表: 参数 描述 content 指定被插入的内容,content的可能的值: 1.

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

    本文实例讲述了jQuery中appendTo()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入指定元素结尾,插入位置在元素的内部. appendTo()方法的作用和append()方法是相同的,但是语法是不同的,尽管形式一样. 语法结构: 复制代码 代码如下: $(selector).appendTo(content) 参数列表: 参数 描述 selector 要被插入的匹配元素. content 要被插入匹配元素的元素. 实例代码: 复制代码 代码如下: <!DOCTY

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

    本文实例讲述了jQuery中insertBefore()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入到另一个指定的元素集合的前面. insertBefore()方法与insertAfter()相反. 语法结构: 复制代码 代码如下: $(selector).insertBefore(content) 参数列表: 参数 描述 selector 定义要被插入的内容. content 定义在哪些元素之前插入内容. 实例代码: 复制代码 代码如下: <!DOCTYPE html

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

    本文实例讲述了jQuery中insertAfter()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入到另一个指定的元素集合的后面. insertAfter()方法与insertBefore()方法的作用相反. 语法结构: 复制代码 代码如下: $(selector).insertAfter(content) 参数列表: 参数 描述 selector 定义要被插入的内容. content 定义在哪些元素之后插入内容. 实例代码: 复制代码 代码如下: <!DOCTYPE h

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

    本文实例讲述了jQuery中contents()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素内部所有的一级子节点(包括文本节点). 如果元素是一个iframe,则查找文档内容. contents()方法和children()方法类似,不同的是前者在结果jQuery 对象中包含了文本节点以及HTML元素. 语法结构: 复制代码 代码如下: $(selector).contents() 实例代码: 复制代码 代码如下: <!DOCTYPE html>  <html>

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

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

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

    本文实例讲述了jQuery中prependTo()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入指定元素之前. prependTo()方法的作用和prepend()方法是相同的,但是在语法上是有差别的,虽然在形式上看起来是一样的. 语法结构: 复制代码 代码如下: $(selector).prependTo(content) 参数列表: 参数 描述 selector 要被插入的匹配元素. content 要被插入匹配元素的元素. 实例代码: 复制代码 代码如下: <!DO

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

    本文实例讲述了jQuery中siblings()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集合中每一个元素的同辈元素. 同辈元素集合可以使用表达式进行筛选. 语法结构: 复制代码 代码如下: $(selector).siblings(expr) 参数列表: 参数 描述 expr 可选.用于筛选同辈元素的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta chars

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

    本文实例讲述了jQuery中add()方法用法.分享给大家供大家参考.具体分析如下: 此函数在匹配元素中添加与表达式匹配的元素. add()函数返回的结果将始终以元素在HTML文档中出现的顺序来排序,而不再是简单的添加. 语法: 语法一: 复制代码 代码如下: $(selector).add(expr,context) 参数 描述 expr 可选.用于匹配元素的选择器字符串. context 可选.作为待查找的 DOM 元素集.文档或 jQuery 对象. 实例: 实例一: 将span元素添加的

  • jQuery中append、insertBefore、after与insertAfter方法注意事项

    这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A

随机推荐