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