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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jquery实现简单自动轮播图效果
Jul 29 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
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
php生出随机字符串
2017/07/06 PHP
javascript instanceof 内部机制探析
2010/10/15 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python中encode()方法的使用简介
2015/05/18 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python中类与对象之间的关系详解
2020/12/16 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
中学门卫岗位职责
2013/12/26 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
导游词范文
2015/02/13 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python