您现在的位置是： 网站首页> 前端技术> jQuery jQuery
jQuery 遍历DOM，操作HTML节点
Smile
2019-11-23
HTML
jQuery
阅读：1241
简介在 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)
