净捡软柿子捏--jQuery 遍历方法

父类

parent()
parents()
parentsUntil()

后代

children()
find()

同胞

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

缩写搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

---------------------------------------------add()------------------------------------------

jquery.add()的理解

基本理解为 and?

---------------------------------------------children()------------------------------------------

只沿着 DOM 树向下遍历单一层级

<!DOCTYPE html>

<html>

<head>

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

<style>

  body { font-size:16px; font-weight:bolder; }

  p { margin:5px 0; }

</style>

</head>

<body>

    <div id="abc">

        <span>Hello</span>

        <p class="selected">Hello Again</p>

        <div>

            <div class="selected">And Again</div>

            <span class="selected">aaAnd Again</span>

        </div>

        <p>And One Last Time</p>

    </div>

    <script>

    $(document).ready(function(){

        $("#abc").children(".selected").css("color", "blue");

    });

    </script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

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

<style>

  body { font-size:16px; font-weight:bolder; }

  p { margin:5px 0; }

</style>

</head>

<body>

    <div id="abc">

        <span>Hello</span>

        <p class="selected">Hello Again</p>

        <p>

            <div class="selected">And Again</div>

            <span class="selected">aaAnd Again</span>

        </p>

        <p>And One Last Time</p>

    </div>

    <script>

    $(document).ready(function(){

        $("#abc").children(".selected").css("color", "blue");

    });

    </script>

</body>

</html>

存疑：以上两段代码区别在于<div>和<p>标签，效果为什么会不一样呢？换成find()效果又是一样的...

---------------------------------------------closest()------------------------------------------

$( document ).bind("click", function( e ) {

    $( e.target ).closest("li").toggleClass("hilight");

});

---------------------------------------------end()------------------------------------------

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

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

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

---------------------------------------------eq()------------------------------------------

如果提供负数，则指示从集合结尾开始的位置，而不是从开头开始。-2表示倒数第二个

如果无法根据指定的 index 参数找到元素，则该方法构造带有空集的 jQuery 对象，length 属性为 0。

---------------------------------------------filter()------------------------------------------

filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

$("div").css("background", "#c8ebcc")

    .filter(".middle")

    .css("border-color", "red");

与下代码效果相同

  $("div").css("background", "#c8ebcc");

  $("div.middle").css("border-color", "red");

---------------------------------------------find()------------------------------------------

$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')
---------------------------------------------first()------------------------------------------

$("p span").first() == $("p span:first")
---------------------------------------------has()------------------------------------------

$("ul").has("li").addClass("full");
即

if($("ul").has("li")){ // 如果$("ul")有("li")，那么$("ul").has("li").length会大于0

$("ul").addClass("full");

}

has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。

---------------------------------------------is()------------------------------------------

不创建新的 jQuery 对象。

不明白的：

请您注意，对于带有位置性选择器的选择器表达式字符串，比如 :first、:gt() 或者 :even，位置性筛选是针对传递到 .is() 的 jQuery 对象进行的，而非针对包含文档。所以对于上面的 HTML 来说，诸如 $("li:first").is("li:last") 的表达式返回 true，但是 $("li:first-child").is("li:last-child") 返回 false。

---------------------------------------------last()------------------------------------------

不能加参数

不能加参数如$('li').last(".aa")

---------------------------------------------map()------------------------------------------

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

$("input").map(function(){

      console.log($(this).val());

});

$(":checkbox").map(function(i){

      console.log(i);

      console.log(this);

      console.log(this.id);

});

.map(callback(index,domElement))

在 callback 函数内部，this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项，或者是要被插入结果集中的数据项的数组。

如果返回的是数组，数组内的元素会被插入集合中。

如果函数返回 null 或 undefined，则不会插入任何元素。

---------------------------------------------next()------------------------------------------

.next(selector)

next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

---------------------------------------------nextAll()------------------------------------------

.nextAll(selector)

nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的。

---------------------------------------------nextUntil()------------------------------------------

.nextUntil(selector,filter)

$("#aa").nextUntil($("#bb"), "cc").css("color", "blue");

从#aa到#bb中间的cc，且#aa、#bb除外（cc可以是div、span这些也可以是class）

nextUntil() 获得每个元素所有跟随的同胞元素，但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素。

---------------------------------------------not()------------------------------------------

$('li').not(':first').css('background-color', 'red');
$('li').not(':even').css('background-color', 'red');//非奇数
$('li').not('.active').css('background-color', 'red');

将id与className相同的排除在外
$('li').not(

function(index, element){
    // 函数内的this === element
    return this.id == this.className; 
}

).css('background-color', 'red');

---------------------------------------------offsetParent()------------------------------------------

offsetParent() 获得被定位的最近祖先元素。

因为祖先元素、被定位的、最近的那个，是唯一的，所以不加selector

---------------------------------------------parent()------------------------------------------

获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

.parents() 和 .parent() 方法类似，不同的是.parent() 沿 DOM 树向上遍历单一层级。

---------------------------------------------parents()------------------------------------------

获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。

<ul id="one" class="level-1">

  <li class="item-i">I</li>

  <li id="ii" class="item-ii">II

  <ul class="level-2">

    <li class="item-a">A</li>

    <li class="item-b">B

      <ul class="level-3">

        <li class="item-1">1</li>

        <li class="item-2">2</li>

        <li class="item-3">3</li>

      </ul>

    </li>

    <li class="item-c">C</li>

  </ul>

  </li>

  <li class="item-iii">III</li>

</ul>

$('li.item-a').parents('li').css('background-color', 'red');

$('li.item-a').closest('li').css('background-color', 'red');

两个表现是不一样的，closest是包括自身的，最多只能找到一个符合条件的

.closest()	.parents()
从当前元素开始	从父元素开始
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。	沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的 jQuery 对象	返回包含零个、一个或多个元素的 jQuery 对象

---------------------------------------------parentsUntil()------------------------------------------

parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素。

返回的 jQuery 对象包含所有祖先元素，但不包括由 .parentsUntil() 方法规定的选择器匹配的那个元素。

如果不匹配或未应用选择器，则将选区所有祖先元素；在这种情况下，该方法选取的元素与未提供选择器时的 .parents() 相同。

查找 <li class="item-a"> 的祖先元素，直到 <ul class="level-1">，并将它们设置为红色背景。

$("li.item-a").parentsUntil(".level-1").css("background-color", "red");

找到 <li class="item-2"> 的所有类名为 "yes" 的祖先元素，直到 <ul class="level-1">，然户为它们设置蓝色边框：

$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" ).css("border", "3px solid blue");

---------------------------------------------prev()------------------------------------------

$("p").prev(".selected").css("background", "yellow");的意思是，p元素前一个同级元素，且class是selected的设为黄色

---------------------------------------------prevAll()------------------------------------------

prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。

$("div:last").prevAll().addClass("active");//则不包括$("div:last")

---------------------------------------------siblings()------------------------------------------

查找每个".aa"元素的所有类名为 "selected" 的所有同级元素：

$(".aa").siblings(".selected")

---------------------------------------------slice()------------------------------------------

slice() 把匹配元素集合缩减为指定的指数范围的子集。

去掉对象最后一个东西

slice(0,-1)

根据“|”把字符串变成数组

.split("|")

根据数组变成“|”分隔的字符串

.join("|")

join() 方法用于把数组中的所有元素放入一个字符串。

去掉字符串第一个

substring(1)

净捡软柿子捏--jQuery 遍历方法的更多相关文章

净捡软柿子捏--jQuery
恩现在是在学习阶段,所以还只是一个小小的搬运工, 大部分参考自 http://www.w3school.com.cn/ 和http://www.zhangxinxu.com/ 超级好的两个学习网站,因 ...
jQuery 遍历方法大全
下表列出了用于jQuery 遍历所有方法. 方法描述 add() 将元素添加到匹配的元素集中 addBack() 将上一组元素添加到当前组中 andSelf() 在版本1.8中已弃用. addBac ...
jQuery.each() - jQuery 遍历方法使用介绍
定义和用法 each() 方法规定为每个匹配元素规定运行的函数. 提示:返回 false 可用于及早停止循环. jQuery.each()方法大概有如下几种用法,下面分别进行介绍: 1.选择器.eac ...
JQuery遍历方法$.each输出函数
each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...
jQuery 遍历方法
http://www.runoob.com/jquery/jquery-ref-traversing.html
jQuery 遍历 – 同胞(siblings)
同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() ...
JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串
JS遍历JSON对象 JS遍历JSON对象 <script> var obj = { "goodsid": "01001", "goods ...
【转】 jquery遍历json数组方法
$(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...
Jquery中each的三种遍历方法
Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

随机推荐

List Set Map
List Set 都是接口,都继承了Collection接口 ArrayList LinkList 直接实现了List接口 HashSet 实现了Set接口 TreeSet继承父类AbstractS ...
ipad&mobile通用webapp框架前哨战
响应式设计的意义随着移动设备的发展,移动设备以迅猛的势头分刮着PC的占有率,ipad或者android pad的市场占有率稳步提升,所以我们的程序需要在ipad上很好的运行,对于公司来说有以下负担: ...
script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
javascript浏览器检测
<script type="text/javascript"> /** * 获取浏览器类型以及版本号 * 支持国产浏览器:猎豹浏览器.搜狗浏览器.傲游浏览器.3 ...
针对JS经典题型对全局变量及局部变量的理解浅谈
第一次写博,还蛮激动... 看到了三题经典题型,就我目前的认识对此题进行总结.如有错误,敬请指正首先,我们先明确一下JS引擎的工作步骤: js引擎工作分为两步: 1.将这个js中的变量和函数声明保存 ...
无刷新读取数据库 (ajax)
<html> <head> <script type="text/javascript"> function loadXMLDoc() { va ...
shell 中的与、或表达式
今天总结一下linux shell中逻辑关机表达方式.逻辑与的表达: 1).if [ $xxx=a -a $xx=b ] 注:-a表示and的意思 2).if [ $xxx=a ] && ...
原：安装VMtools过程流水帐
以下基于 vm12.0.0 1. 一定要打开虚拟机的 cd设置 2. 然后 cd '/medal/VMware tools ' (注意一定要加 '', 因为VMware tools 有空格) ...
【转】虚拟机VMware与主机共享文件介绍
from: http://www.cnblogs.com/kerrycode/p/3818095.html 写的比较详细,但是vm版本较旧. 2:通过共享文件夹功能虚拟机VMware提供了在宿主机与 ...
PHP的GD库
GD库 PHP通过GD库,可以对JPG.PNG.GIF.SWF等图片进行处理.GD库常用在图片加水印,验证码生成等方面. 绘制线条要对图形进行操作,首先要新建一个画布,通过imagecreatetr ...

净捡软柿子捏--jQuery 遍历方法

不能加参数

净捡软柿子捏--jQuery 遍历方法的更多相关文章

随机推荐

热门专题