时间:2021-05-26
本文介绍了jQuery DOM节点的遍历方法小结,分享给大家,也给自己留个笔记
children()方法
jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法。这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系)
节点查找关系
<div class="div"> <ul class="son"> <li class="grandson">1</li> </ul></div>代码如果是$("div").children(),那么意味着只能找到ul,因为div与ul是父子关系,li与div是祖辈关系,因此无法找到
children()无参数
允许通过在DOM树中对这些元素的直接子元素进行搜索,并且构造一个新的匹配元素的jQuery对象
注意:jQuery是一个合集对象,所以通过children匹配合集中每一个元素的第一级子元素
.children()方法选择性地接受同一类型选择器表达式
$("div").children(".selected")同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式
find()方法
jQuery是一个合集对象,如果想快速查找DOM树中的这些元素的后代元素,此时可以用find()方法,这也是开发使用频率很高的方法。这里要注意 children与find方法的区别,children是父子关系查找,find是后代关系(包含父子关系)
节点查找关系
<div class="div"> <ul class="son"> <li class="grandson">1</li> </ul></div>代码如果是$("div").find("li"),此时,li与div是祖辈关系,通过find方法就可以快速的查找到
.find()方法要注意的知识点
注意重点
.find()和.children()方法是相似的
parent()方法
jQuery是一个合集对象,如果想快速查找合集里面的每一个元素的父元素(这里可以理解为就是父亲-儿子的关系),此时可以用parent()方法;因为是父元素,这个方法只会向上查找一级
节点查找关系
<div class="div"> <ul class="son"> <li class="grandson">1</li> </ul></div>// 查找ul的父元素div, $(ul).parent()parent()无参数
parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象
注意:jQuery是一个合集对象,所以通过parent是匹配合集中每一个元素的父元素
parent()方法选择性地接受同一型选择器表达式
同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式
parents()方法
jQuery是一个合集对象,如果想快速查找合集里面的每一个元素的所有祖辈元素,此时可以用parents()方法
其实也类似find与children的区别,parent只会查找一级,parents则会往上一直查到查找到祖先节点
节点查找关系
<div class="div"> <ul class="son"> <li class="grandson">1</li> </ul></div>// 在li节点上找到祖辈元素div,用$("li").parents()方法parents()无参数
parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象;返回的元素秩序是从离他们最近的父级元素开始的
注意:jQuery是一个合集对象,所以通过parent是匹配合集中所有元素的祖辈元素
parents()方法选择性地接受同一型选择器表达式
同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式
注意事项
closest()方法
以选定的元素为中心,往内查找可以通过find、children方法。如果往上查找,也就是查找当前元素的父辈祖辈元素,jQuery提供了closest()方法,这个方法类似parents但是又有一些细微的区别,属于使用频率很高的方法
closest()方法接受一个匹配元素的选择器字符串
从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素
// 在div元素中,往上查找所有的li元素,可以这样表达$("div").closet("li')注意:jQuery是一个合集对象,所以通过closest是匹配合集中每一个元素的祖先元素
closest()方法给定的jQuery集合或元素来过滤元素
同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个jQuery的对象
注意事项
next()方法
jQuery是一个合集对象,如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合,此时可以用next()方法
节点查找关系
//如下的class="item-2"就是class="item-1"的兄弟元素<ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li></ul>next()无参数
允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素,并根据匹配的元素创建一个新的 jQuery 对象。
注意:jQuery是一个合集对象,所以通过next匹配合集中每一个元素的下一个兄弟元素
next()方法选择性地接受同一类型选择器表达式
同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式
prev()方法
jQuery是一个合集对象,如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合,此时可以用prev()方法
节点查找关系
如下的class="item-1"节点就是class="item-2"的li元素的prev兄弟节点
<ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li></ul>prev()无参数
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
注意:jQuery是一个合集对象,所以通过prev是匹配合集中每一个元素的上一个兄弟元素
prev()方法选择性地接受同一类型选择器表达式
同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式
siblings()
jQuery是一个合集对象,如果想快速查找指定元素集合中每一个元素的同辈元素,此时可以用siblings()方法
节点查找关系
如下是class="item-1"和class="item-3"就是class="item-2"的siblings兄弟节点
siblings()无参数
取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合
注意:jQuery是一个合集对象,所以通过siblings是匹配合集中每一个元素的同辈元素
siblings()方法选择性地接受同一类型选择器表达式
同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式
add()方法
jQuery是一个合集对象,通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的,如果后期需要再往这个合集中添加一新的元素要如何处理?jQuery为此提供add方法,用来创建一个新的jQuery对象 ,元素添加到匹配的元素集合中
.add()的参数可以几乎接受任何的$(),包括一个jQuery选择器表达式,DOM元素,或HTML片段引用
each()
jQuery是一个合集对象,通过$()方法找到指定的元素合集后可以进行一系列的操作
如操作$("li").css('') 给所有的li设置style值,因为jQuery是一个合集对象,所以css方法内部就必须封装一个遍历的方法,被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色,这里方法就是each
.each() 方法就是一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)
三个重点
实例:
<ul> <li>克利夫兰骑士</li> <li>LeBorn James</li></ul>开始迭代li,循环2次$("li").each(function(index, element) { index 索引 0,1 element是对应的li节点 li,li this 指向的是li})<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 150px; } .left div { width: 150px; height: 120px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>each方法</h2> <div class="left first-div"> <div class="div"> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> </div> <div class="div"> <ul> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </div> <br/> <button>点击:each方法遍历元素</button> <button>点击:each方法回调判断</button> <script type="text/javascript"> $("button:first").click(function() { //遍历所有的li //修改每个li内的字体颜色 $("li").each(function(index, element) { $(this).css('color','red') }) }) </script> <script type="text/javascript"> $("button:last").click(function() { //遍历所有的li //修改偶数li内的字体颜色 $("li").each(function(index, element) { if (index % 2) { $(this).css('color','blue') } }) }) </script></body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JQuery遍历DOM节点的方法。分享给大家供大家参考。具体分析如下:本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建、删除、替换等等
本文实例讲述了JQuery中节点遍历方法。分享给大家供大家参考。具体如下:jQuery节点遍历$(function(){//-----举例1.获取节点之前的挨着
本文实例讲述了jQuery--遍历操作。分享给大家供大家参考,具体如下:jQuery--遍历【后代】向下遍历DOM树下面是两个用于向下遍历DOM树的jQuery
这个主要是DiscuzX使用了$(id)作为dom节点的获取方法,而$符号刚好与jQuery的默认符号相冲突。以下是基于之前的DiscuzX和jQuery冲突的
在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents()、parent()、close