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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
js实现放大镜特效
2017/05/18 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
学习新党章思想汇报
2014/01/09 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
教师个人教学总结
2015/02/11 职场文书
学生个人总结范文
2015/02/15 职场文书
生日赠语
2015/06/23 职场文书
银行求职信范文
2019/05/13 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle