jQuery 遍历
.add()
add() 方法将元素添加到匹配元素的集合中 .add(selector)//字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式。 .add(elements)//添加到匹配元素集合的一个或多个元素 .add(html)//添加到匹配元素集合的 HTML 片段 .add(jQueryObject)//添加到匹配元素集合的已有 jQuery 对象 .add(selector, context)//字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式;选择器开始进行匹配的位置。 $("div").css("border", "2px solid red")
.add("p")
.css("background", "yellow");//找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象,并把它们的背景设置为黄色
.andSelf()
把堆栈中之前的元素集添加到当前集合 $("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");//找到所有 div,以及其中的所有段落,并为它们添加两个类名。请注意,由于未使用 .andSelf(),div 没有黄色背景色 <ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$("li.third-item").nextAll().andSelf()
.css("background-color", "red");//代码的结果是项目 3,4,5 拥有红色背景 首先,初始的选择器会定位项目 3,初始化的堆栈存有仅包含该项目的集合。调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。最后,调用 .andSelf() 会合并这两个集合,所创建的 jQuery 对象指向按照文档顺序的所有三个项目:{[<li.third-item>,<li>,<li> ]} 个人理解:把之前匹配道德集合和当前集合合并在一起
.children()
$("div").children(".selected").css("color", "blue");//找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色 .children(selector)//字符串值,包含匹配元素的选择器表达式 返回匹配元素集合中每个元素的子元素,添加可选参数可通过选择器进行过滤 .find() 和 .children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。
与大多数 jQuery 方法一样,.children() 不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。
.closest()
.closest(selector)//closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上 $( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});//当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景
.parents() 和 .closest() 方法
.closest() | .parents() |
---|---|
从当前元素开始 | 从父元素开始 |
沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 |
返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
.contents()
.contents() 获得匹配元素集合中每个元素的子节点,包括文本和注释节点 $("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");//找到段落中的所有文本节点,并用粗体标签包装它们
.each()
$(selector).each(function(index,element))//each() 方法为每个匹配元素规定运行的函数。返回 false 可用于及早停止循环 index - 选择器的 index 位置;element - 当前的元素(也可使用 "this" 选择器) $("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});//输出每个 li 元素的文本
.end()
end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态 $('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');//把所有方法调用串联在一起
.eq()
.eq(index)将匹配元素集缩减值指定 index 的一个 $("body").find("div").eq(2).addClass("blue");//通过为 index 为 2 的 div 添加适当的类,将其变为蓝色
.filter()
将匹配元素集合缩减为匹配指定选择器的元素 .filter(selector)//字符串值,包含供匹配当前元素集合的选择器表达式 $("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");//改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框
.find()
find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选 .find(selector) $("p").find("span").css('color','red');//搜索所有段落中的后代 span 元素,并将其颜色设置为红色
.first()
first() 将匹配元素集合缩减为集合中的第一个元素 $("p span").first().addClass('highlight');//高亮显示段落中的第一个 span
.has()
has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集 .has(selector)//字符串值,包含匹配元素的选择器表达式 $('li').has('ul').css('background-color', 'red')
该调用的结果是,项目 2 的背景被设置为红色,这是因为该项目是后代中唯一拥有 <ul> 的 <li> 详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代;如果任何后代元素匹配该选择器,该元素将被包含在结果中。
.is()
.is(selector) 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true var isFormParent = $("input[type='checkbox']").parent().is("form");
$("div").text("isFormParent = " + isFormParent);//返回 false,因为 input 元素的父元素是 p 元素,若改为.parents(),则true
.last()
last() 将匹配元素集合缩减为集合中的最后一个元素 $("p span").last().addClass('highlight');//高亮显示段落中的最后一个 span
.map()
.map(callback(index,domElement))//把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象 $("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );//构建表单中所有值的列表
.next()
.next(selector)//next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素 $("p").next(".selected").css("background", "yellow");//查找每个段落的下一个同胞元素,仅选中类名为 "selected" 的段落 <p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>选中每个<p>的后一个元素,即第二个<p>和<div>
.nextAll()
nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,由选择器筛选是可选的。.nextAll(selector) $("div:first").nextAll().addClass("after")//查找第一个 div 之后的所有类名,并为他们添加类名
.nextUntil()
nextUntil() 获得每个元素所有跟随的同胞元素,但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素 .nextUntil(selector,filter) .nextUntil(element,filter) selector 字符串值,包含指示在何处停止匹配跟随的同胞元素的选择器表达式。
element 指示在何处停止匹配跟随的同胞元素的 DOM 节点或 jQuery 对象。
filter 字符串值,包含用于匹配元素的选择器表达式。 $("#term-2").nextUntil("dt").css("background-color", "red");
var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "blue");一个参数查找跟随 <dt id="term-2"> 的同胞元素,直到下一个 <dt>,然后将它们设置为红色背景色。两个参数同时,找到跟随 <dt id="term-1"> 的 <dd> 同胞元素,直到 <dt id="term-3">,并为它们设置蓝色文本颜色。
.not()
.not(element)
.not(selector)
$("p").not("#selected")//从包含所有段落的集合中删除 id 为 "selected" 的段落
.offsetParent()
offsetParent() 获得被定位的最近祖先元素//类似position: relative; $('li.item-a').offsetParent().css('background-color', 'red');//设置类名为 item-a 的 li 元素的最近定位父元素的背景色
.parent()
.parent(selector)//parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的 $("p").parent(".selected")//查找每个段落的带有 "selected" 类的父元素
.parents()
.parents(selector)//获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的 $("b").parents()//查找每个 b 元素的所有父元素
.parentsUntil()
.parentsUntil(selector,filter) .parentsUntil(element,filter) $("li.item-a").parentsUntil(".level-1")
.css("background-color", "red"); $("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
.css("border", "3px solid blue");//查找 <li class="item-a"> 的祖先元素,直到 <ul class="level-1">,并将它们设置为红色背景。同时,找到 <li class="item-2"> 的所有类名为 "yes" 的祖先元素,直到 <ul class="level-1">,然户为它们设置蓝色边框 在 .level-1中查找 item-a的父元素,但查找结果不包括 .level-1的内容
.prev()
.prev(selector)//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的 $("p").prev(".selected")//检索每个段落,找到类名为 "selected" 的前一个同胞元素
.prevAll()
.prevAll(selector)//prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素,使用选择器进行筛选是可选的 $("div:last").prevAll().addClass("before");//定位最后一个 div 之前的所有 div,并为它们添加类
.prevUntil()
.prevUntil(selector, filter)
.prevUntil(element, filter)
prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素,但不包括被选择器、DOM 节点或 jQuery 对象匹配的元素 $("#term-2").prevUntil("dt").css("background-color", "red");
var term1 = document.getElementById('term-1');
$("#term-3").prevUntil(term1, "dd").css("color", "green");
查找 <dt id="term-2"> 之前的同胞元素,直到前一个 <dt>,并将它们设置为红色。同时,查找 <dt id="term-3"> 前面的 <dd> 同胞,直到 <dt id="term-1">,并把它们设置为蓝色文本 $("#term-2").prevUntil("dt"),两个之间,不包括本身
$("#term-3").prevUntil(term1, "dd") #term-3前面的dd同胞,直到term1(包括term1下的子元素)
.siblings()
.siblings(selector)
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的 $("p").siblings(".selected")//查找每个 p 元素的所有类名为 "selected" 的所有同胞元素
.slice()
.slice(selector,end)//slice() 把匹配元素集合缩减为指定的指数范围的子集(基于 0 的整数值) $("p").slice(, ).wrapInner("");
选中所有段落,然后将所选内容缩减为只包含第一和第二个段落
————————————————————各种找爹找儿子找同胞————————————————————
jQuery 遍历的更多相关文章
- 【转】 jquery遍历json数组方法
$(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...
- jQuery 遍历函数
转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...
- Jquery遍历选中的input标签
$("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...
- jquery遍历
http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和 ...
- jQuery 遍历(上)
目录: 一:定义二:遍历 DOM三:jQuery 参考手册 - 遍历 定义:什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找" ...
- jquery 遍历 数组1
使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...
- JQuery:JQuery遍历详解
JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...
- jquery遍历对象,数组,集合
1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...
- jQuery 遍历函数(w3school)
jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .childr ...
- Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数
JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
随机推荐
- C#当中的多线程_任务并行库(中)
发现自己有点懒了!也可能是越往后越难了,看书理解起来有点费劲,所以这两天就每天更新一点学习笔记吧. 4.5 将APM模式转化为任务 书上提供的三种方式 方式一: class Program ...
- linux修改时区,时间格式
修改为上海的时区: 查看当前时区 date cp -vf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime vim /etc/sysconfig/cl ...
- MyBatis的学习总结四:实现关联表查询【参考】
一.一对一的表关联查询(edi_test_task 和 edi_task_detail) 例子:一条任务明细对一条任务记录 对应的sql的映射xml文件如下: <?xml version=& ...
- MySQL 时间戳(Timestamp)函数
1. MySQL 获得当前时间戳函数:current_timestamp, current_timestamp() mysql> select current_timestamp, curren ...
- Linux 共享内存编程
共享内存允许系统内两个或多个进程共享同一块内存空间,并且数据不用在客户进程和服务器进程间复制,因此共享内存是通信速度最快的一种IPC. 实现的机制简单描述如下:一个进程在系统中申请开辟了一块共享内存空 ...
- JavaScript H5 Canvas
Canvas 由于浏览器对HTML5标准支持不一致,所以,通常在<canvas>内部添加一些说明性HTML代码,如果浏览器支持Canvas,它将忽略<canvas>内部的HTM ...
- Apache server-status
1.找到apache配置文件:httpd.conf 2.打开模块: LoadModule status_module modules/mod_status.so 3.在文件末尾处加上以下代码: ...
- JS-运动框架
写这段代码,是因为之前看过某前RD写过,但在测试过程中发现有不完美的地方. 问题在于判断运动停止条件这里,对于之前停止的判断太片面,只能判断一个条件值时的情况,对于多条件时,会发现运动后的各项值并未达 ...
- 精通 Oracle+Python,第 7 部分:面向服务的 Python 架构
面向服务的架构 (SOA) 在当今的业务战略中具有至关重要的作用.混搭企业组件已成为所有任务关键的企业应用程序的标准要求,从而确保在企业架构的各层实现顺畅的服务编排.对此,Python 是一个不错的选 ...
- 12个Icon图标资源网站
1.除了Icon以外,还有很多不错的UI设计素材. 地址:http://worldui.com/2.除了免费Icon资源下载以外,还提供Icon定制的付费服务.地址:http://dryicons.c ...