jQuery学习笔记(三)jQuery遍历
2014-03-15 20:02
288 查看
jQuery遍历是什么?用来干什么?
HTML中的标签元素之间可能有包含关系,所有的标签元素就会构成一个树形结构,根是<html>.jquery遍历允许我们从某个标签元素开始,沿着树去寻找其他标签。(就像OS中的文件系统的相对路径一样)
这种遍历叫做“对DOM进行遍历”
1、找祖先(向上遍历)
parent()//返回当前tag的【直接】父元素
parents()
//返回向上直到树根<html>标签的 【所有】祖先元素
parentsUntil()
//返回向上直到树根<html>标签的 【所有】祖先元素
下面一一进行介绍:
parent() //返回当前tag的【直接】父元素
$(document).ready(function(){ $("span").parent(); });//以上返回<span>元素的直接父元素
parents() //返回向上直到树根<html>标签的 【所有】祖先元素
$(document).ready(function(){ $("span").parents(); });//以上返回<span>元素的所有祖先元素
parents()中可以在括号中添加过滤功能:
$(document).ready(function(){ $("span").parents(“ul”); });//以上返回<span>的所有 为<ul>的祖先
parentsUntil()//返回介于2个tag【之间】的所有祖先
$(document).ready(function(){ $("span").parentsUntil(“div”); });//上述返回结余当前tag<span>与其祖先<div>之间的所有tag
2. 找后代(向下遍历)
children()//返回当前tag的所有【直接】子元素;即只针对DOM树的下一级find()//【一路向下】直到【最后一个】后代,全部返回
下面一一进行介绍:
children()
$(document).ready(function(){ $("div").children(); });//以上返回<div>的所有直接后代
$(document).ready(function(){ $("div").children(“p.1”); });//以上返回<div>的直接后代中 所有类名为“1”的<p>元素
find()
$(document).ready(function(){ $("div").find(“span”); });
//以上返回<div>后代中所有的<span>元素
$(document).ready(function(){ $("div").find(“*”); });//以上返回<div>的【所有后代】
3. 找兄弟
siblings()$("h2").siblings();//返回<h2>的所有同胞元素
$("h2").siblings("p");//返回属于 <h2> 的同胞元素的所有 <p> 元素
next()
$("h2").next();//返回<h2>的下一个同胞元素
nextAll()
$("h2").nextAll();//返回 <h2> 的所有跟随的(后面所有的)同胞元素
nextUntil()
$("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
prev()//返回前一个
prevAll()//返回前面所有
prevUntil()//返回向前直到某个元素之间的所有同胞元素
4. 过滤
在选出了一组元素时,如何选定某个元素:first()//选出了一组元素时,返回元素组中的首个元素//$("div p").first();
last()//选出了一组元素时,返回元素组中的最后一个元素//$("div p").last();
eq()
//选出了一组元素时,返回某个索引号的元素(索引号类似于数组下标;也是从0开始)//$("p").eq(3);
是否匹配某项指定标准:
filter()//返回匹配的//$("p").filter(".intro");//返回带有类名intro的所有<p>
not()//返回不匹配的//$("p").not(".intro");//返回不带有类名intro的所有<p>
相关文章推荐
- JQuery中使用.each()遍历元素学习笔记
- jquery 学习笔记3 遍历
- jQuery 学习笔记 遍历
- 【jQuery学习笔记----元素遍历】
- JQuery中使用.each()遍历元素学习笔记
- jquery的学习笔记之三DOM树遍历
- learning jQuery 学习笔记二(+jQuery 1.4.1 API)--DOM遍历方法
- jQuery学习笔记四:查找遍历
- jQuery学习笔记八:遍历函数集合
- jQuery学习笔记- - 节点遍历
- JQuery学习笔记之按键按下和弹起事件
- 暑假快速学习JQuery的学习笔记
- jQuery学习笔记 02
- [java学习笔记]java语言基础概述之数组的定义&常见操作(遍历、排序、查找)&二维数组
- 学习笔记: JavaScript/JQuery 的cookie操作
- JQuery 学习笔记 element属性控制
- JQuery学习笔记(二) 对象访问
- jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
- Jquery 基础学习笔记之文档处理
- jquery.Validation.js 学习笔记 [待更新](API 和 DEMO等)