JQuery遍历DOM节点的方法_jquery

本文实例讲述了JQuery遍历DOM节点的方法。分享给大家供大家参考。具体分析如下:

本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建、删除、替换等等节点操作。这里介绍如何遍历节点,选中临近节点等的一些方法。

children()方法

该方法用于取得匹配元素的子元素集合。根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数。

下面使用children()方法来获取匹配元素的所有子元素的个数。

var $body = $("body").children();
var $p = $("p").children();
var $ul = $("ul").children();
alert( $body.length ); // <body>元素下有2个子元素
alert( $p.length );  // <p>元素下有0个子元素
alert( $ul.length ); // <p>元素下有3个子元素
for(var i=0;i< $ul.length;i++){
  alert( $ul[i].innerHTML );
}

PS:children()方法只考虑子元素而不考虑任何后代元素。

next()方法

该方法用于取得匹配元素后面紧邻的同辈元素。从DOM树的结构中可以知道p元素的下一个同辈节点是ul,因此可以通过next()方法来获取ul元素,代码如下:

var $p1 = $("p").next();
// 紧邻p元素后的同辈元素

prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素。从DOM树的结构中可以知道ul元素的上一个同辈节点是p,因此可以通过prev()方法来获取p元素,代码如下:

var $ul = $("ul").prev();
// 紧邻ul元素前的同辈元素

siblings()方法

该方法用于取得匹配元素前后所有的同辈元素。以DOM树的结构为例。ul元素和p元素互为同辈元素,ul元素下的3个li元素也互为同辈元素。

如果要获取p元素的同辈元素,则可以使用如下代码:

var $p2 = $("p").siblings();
// 紧邻p元素的唯一同辈元素

closest()方法

它用来取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的JQuery对象。

比如,给点击的目标元素的最近的li元素添加颜色,可以使用如下代码:

$(document).bind("click", function (e) {
 $(e.target).closest("li").css("color","red");
})

除此之外,在JQuery中还有很多遍历节点的方法,例如find()、filter()、nextAll()、prevAIl()、parent()和parents()等,此处不再赘述,读者可以查看附录的JQuery速查表文档。值得注意的是,这些遍历DOM方法有一个共同点,都可以使用JQuery表达式作为它们的参数来筛选元素。

希望本文所述对大家的jQuery程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 遍历
dom节点
jquery遍历dom节点、遍历dom节点、js 遍历dom节点、jquery 遍历dom、jquery 遍历dom对象,以便于您获取更多的相关知识。

时间: 2024-10-03 16:04:40

JQuery遍历DOM节点的方法_jquery的相关文章

JQuery包裹DOM节点的方法_jquery

本文实例讲述了JQuery包裹DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果要将某个节点用其他标记包裹起来,JQuery提供了相应的方法,即wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且它不会破坏原始文档的语义. wrap() 复制代码 代码如下: $("#li_1").wrap("<strong></strong>"); 得到的结果如下: <strong> <li id="l

JQuery替换DOM节点的方法_jquery

本文实例讲述了JQuery替换DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()和replaceAll(). replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素. 本例 JQuery 代码: <script type="text/javascript"> //<![CDATA[ $(function(){ $("#btn_1"

JQuery复制DOM节点的方法_jquery

本文实例讲述了JQuery复制DOM节点的方法.分享给大家供大家参考.具体分析如下: 复制节点也是常用的DOM操作之一,例如很多购物网站的效果,用户不仅可以通过单击商品下方的"选择"按钮购买相应的产品,也可以通过鼠标拖动商品并将其放到购物车中.这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到购物效果. HTML DOM结构如下: <p class="nm_p" title="欢迎访问"

JQuery删除DOM节点的方法_jquery

本文实例讲述了JQuery删除DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果文档中某一个元素多余,那么应将其删除.JQuery提供了两种删除节点的方法,即remove()和empty(). HTML DOM结构如下: <p class="nm_p" title="欢迎访问" >欢迎访问</p> <ul class="nm_ul"> <li title='PHP编程'>简单易懂的PHP编

JQuery插入DOM节点的方法_jquery

本文实例讲述了JQuery插入DOM节点的方法.分享给大家供大家参考.具体分析如下: 动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中.将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点.前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容. 将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示.读者可以根据实际需求灵活地做出多种选择. HTML DOM结构如下: <p class

JQuery创建DOM节点的方法_jquery

本文实例讲述了JQuery创建DOM节点的方法.分享给大家供大家参考.具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值.但真正的DOM操作并非这么简单.在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的. HTML DOM结构如下: <p class="nm_p" title="欢迎访问" >欢迎访问&l

JQuery查找DOM节点的方法_jquery

本文实例讲述了JQuery查找DOM节点的方法.分享给大家供大家参考.具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下.先来最简单的查找节点操作. 为了能全面地讲解DOM操作,首先需要构建一个网页.因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树.HTML代码如下: <p class="nm_p" title="欢迎访问" >欢迎访问</p> <ul class

jQuery遍历DOM节点操作之filter()方法详解_jquery

本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添

jQuery简单创建节点的方法_jquery

本文实例讲述了jQuery简单创建节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1