jQuery 提供了一系列的遍历方法,可以用来查找 HTML 元素,并对其进行操作。
jQuery 中最常用的遍历方法是
each()方法,它可以用来遍历 jQuery 对象中的所有元素。它接受一个函数作为参数,该函数会被应用到 jQuery 对象中的每个元素上。例如:
$("div").each(function(){ $(this).addClass("test"); });
上面的代码将会遍历所有的
元素,并为它们添加一个名为 "test" 的 class。.children()方法也是一个常用的遍历方法,它可以用来遍历当前元素的子元素。例如:$("ul").children().each(function(){ // 遍历 ul 的子元素 $(this).addClass("test"); // 为子元素添加 class });.find()方法也是一个常用的遍历方法,它可以用来在当前元素中查找匹配选择器的子孙元素。例如:$("ul").find("li").each(function(){ // 遍历 ul 的 li 子孙元素 $(this).addClass("test"); // 为 li 子孙元素添加 class });.next(),.prev(),.siblings(),.parent()jQuery 遍历
什么是遍历?
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
图示解析:
- <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
- <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
- <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
- 两个 <li> 元素是同胞(拥有相同的父元素)。
- 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
- <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
遍历 DOM
jQuery 提供了多种遍历 DOM 的方法。
遍历方法中最大的种类是树遍历(tree-traversal)。
下一章会讲解如何在 DOM 树中向上、下以及同级移动。
阅读全文
网页中添加 jQuery 可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:从 jquery.com 下载 jQuery 库从 CDN 中载入 jQ...
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。jQuery AJAX 实例使用 jQuery AJAX 修改...
请使用我们的 jQuery 选择器检测器 来演示不同的选择器。选择器实例选取*$("*")所有元素#id$("#lastname")id="lastname" 的元素....
CSS3 text-wrap 属性实例Allow no line breaks:p.test {text-wrap:none;}浏览器支持任何主流浏览器都不支持text-wrap属性。属性...
CSS 参考手册 教程的 CSS 参考手册在所有主流浏览器中测试通过.CSS 属性CSS 属性组:动画背景边框和轮廓框颜色内容页的媒体属性...