您现在的位置是: 网站首页> 前端技术> jQuery jQuery

jQuery 遍历DOM,操作HTML节点

Smile 2019-11-23 HTML jQuery 阅读:262

简介在 web 前端开发中经常会使用到 jQuery 对 HTML 进行节点操作,实现一些页面动画特效等,其实 jQuery 已经封装好了这些经常会用到的方法,使用起来也比较方便,本文简单介绍下如何操作使用

一、遍历父级节点元素

(1)parent() 方法返回被选元素的直接父元素,只会向上一级对 DOM 树进行遍历

$(document).ready(function(){
  $("span").parent();//返回每个span元素的直接父元素
});

(2)parents() 方法返回被选元素的所有父级元素,它一路向上直到文档的根元素 (<html>)

$(document).ready(function(){
  $("span").parents();//返回所有span元素的所有父级元素
});

(3)parentsUntil() 方法返回介于两个给定元素之间的所有父级元素

$(document).ready(function(){
  $("span").parentsUntil("div");//返回介于span与div元素之间的所有父级元素
});

二、遍历子级节点元素

(1)children() 方法返回被选元素的所有直接子元素,只会向下一级对 DOM 树进行遍历

$(document).ready(function(){
  $("div").children();//返回每个div元素的所有直接子元素
});

(2)find() 方法返回被选元素的后代元素,一路向下直到最后一个后代

$(document).ready(function(){
  $("div").find("span");//返回属于div后代的所有span元素
  $("div").find("*");//返回div的所有后代
  $("div").find();//返回div的所有后代,跟上面一个效果一样
});

三、遍历同级兄弟节点元素

(1)siblings() 方法返回被选元素的所有同级元素

$(document).ready(function(){
  $("h2").siblings();//返回h2元素的所有同级元素
  $("h2").siblings("span");//返回h2元素的所有同级span元素
});

(2)next() 方法返回被选元素的下一个同级元素

$(document).ready(function(){
  $("h2").next();//返回h2元素的下一个同级元素
});

(3)nextAll() 方法返回被选元素的所有跟随的同级元素

$(document).ready(function(){
  $("h2").nextAll();//返回h2元素的所有跟随的同级元素
});

(4)nextUntil() 方法返回介于两个给定参数之间的所有跟随的同级元素

$(document).ready(function(){
  $("h2").nextUntil("h6");//返回介于h2与h6元素之间的所有同级元素
});

(5)prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同级元素

四、遍历过滤,缩小搜索元素的范围

(1)first() 方法返回被选元素的首个元素

$(document).ready(function(){
  $("div p").first();//选取首个div元素内部的第一个p元素
});

(2)last() 方法返回被选元素的最后一个元素

$(document).ready(function(){
  $("div p").last();//选择最后一个div元素中的最后一个p元素
});

(3)eq() 方法返回被选元素中带有指定索引号的元素,索引号从 0 开始

$(document).ready(function(){
  $("p").eq(0);//选取第一个p元素
  $("p").eq(1);//选取第二个p元素
});

(4)filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回

$(document).ready(function(){
  $("p").filter(".url");//返回带有类名"url"的所有p元素
});

(5)not() 方法返回不匹配标准的所有元素

$(document).ready(function(){
  $("p").not(".url");//返回不带有类名"url"的所有p元素
});

很赞哦! (0)

文章评论

站点信息