jQuery DOM节点的遍历方法小结


Posted in jQuery onAugust 15, 2017

本文介绍了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是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以
  • 与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'
  • find只在后代中遍历,不包括自己
  • 选择器 context 是由 .find() 方法实现的;因此,$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)

注意重点

.find()和.children()方法是相似的

  • children只查找第一级的子节点
  • find查找范围包括子节点的所有后代节点

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是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

注意事项

  1. .parents()和.parent()方法是相似的,但后者只是进行了一个单级的DOM树查找
  2. $( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合。

closest()方法

以选定的元素为中心,往内查找可以通过find、children方法。如果往上查找,也就是查找当前元素的父辈祖辈元素,jQuery提供了closest()方法,这个方法类似parents但是又有一些细微的区别,属于使用频率很高的方法

closest()方法接受一个匹配元素的选择器字符串

从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素

// 在div元素中,往上查找所有的li元素,可以这样表达
$("div").closet("li')

注意:jQuery是一个合集对象,所以通过closest是匹配合集中每一个元素的祖先元素

closest()方法给定的jQuery集合或元素来过滤元素

同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个jQuery的对象

注意事项

  • 起始位置不同:.closest开始于当前元素 .parents开始于父元素
  • 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合
  • 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的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兄弟节点

<ul class="level-3">
  <li class="item-1">1</li>
  <li class="item-2">2</li>
  <li class="item-3">3</li>
</ul>

siblings()无参数

取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

注意:jQuery是一个合集对象,所以通过siblings是匹配合集中每一个元素的同辈元素
siblings()方法选择性地接受同一类型选择器表达式

同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

add()方法

jQuery是一个合集对象,通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的,如果后期需要再往这个合集中添加一新的元素要如何处理?jQuery为此提供add方法,用来创建一个新的jQuery对象 ,元素添加到匹配的元素集合中

.add()的参数可以几乎接受任何的$(),包括一个jQuery选择器表达式,DOM元素,或HTML片段引用

//操作:选择所有的li元素,之后把p元素也加入到li的合集中
<ul>
  <li>list item 1</li>
  <li>list item 3</li>
</ul>
<p>新的p元素</p>

// 处理一:传递选择器
$('li').add('p')
// 处理二:传递dom元素
$('li').add(document.getElementsByTagName('p')[0])
// 动态创建P标签加入到合集,然后插入到指定的位置,但是这样就改变元素的本身的排列了
 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

each()

jQuery是一个合集对象,通过$()方法找到指定的元素合集后可以进行一系列的操作

如操作$("li").css('') 给所有的li设置style值,因为jQuery是一个合集对象,所以css方法内部就必须封装一个遍历的方法,被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色,这里方法就是each

.each() 方法就是一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)

三个重点

  • each是一个for循环的包装迭代器
  • each通过回调的方式处理,并且会有2个固定的实参,索引与元素
  • each回调方法中的this指向当前迭代的dom元素

实例:

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery实现菜单栏导航效果
Aug 15 #jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
使用jQuery实现购物车结算功能
Aug 15 #jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 #jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 #jQuery
jQuery实现手势解锁密码特效
Aug 14 #jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php设计模式 Composite (组合模式)
2011/06/26 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
JS的数组迭代方法
2015/02/05 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
js实现3D旋转效果
2020/08/18 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
python求众数问题实例
2014/09/26 Python
python实现简单遗传算法
2018/03/19 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python中自带的三个装饰器的实现
2019/11/08 Python
浅谈Python type的使用
2019/11/19 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
全运会口号
2014/06/20 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
小学母亲节活动总结
2015/02/10 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB