【HTML5教程】微信小程序全方位深度解析CSDN学院观看地址:http://edu.csdn.NET/lecturer/992
学习是一个枯燥的过程,但能把枯燥的东西变成可以传播可以带来别人快乐的就是一件小确幸。
根据一个元素以及和这个元素之间的关系,来查找到另外的元素。
如下图,显示了HTML中的结构树,通过 JQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。
这种移动被称为对 DOM 进行遍历。
遍历 - 父级(祖先)
向上遍历DOM数
通过如下三个方法,我们可以获取父级元素
• parent()
• parents()
• parentsUntil()
JQuery parent()
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
HTML代码:<section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p></section>
JQ代码:
$(document).ready(function () {
// 通过parent()函数,可获取当前元素的直接父级元素
var elem = $('span').parent();
console.log(elem);
});
JQuery parents()
parents() 方法返回被选元素的所有父元素。
HTML代码:<section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p></section>
JQ代码:
$(document).ready(function () {
// 通过parent()函数,可获取当前元素的所有父级元素
var elem = $('span').parents();
console.log(elem);
});
JQuery parentsUntil()
parentsUntil() 方法返回介于两个给定元素之间的所有父级元素
HTML代码:<section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p></section>
JQ代码:
$(document).ready(function () {
// 获取span在body标签下的所有父级元素
var elem = $('span').parentsUntil('body');
console.log(elem);
});
遍历 - 子级(后代)
向下遍历DOM树
向下遍历可以使用如下两个函数:
• children()
• find()
JQuery children()
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
HTML代码: <section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p></section>
JQ代码:
$(document).ready(function () {
// 获取section标签下的所有直接子元素
var elem = $('section').children();
console.log(elem);
});
JQuery find()
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
HTML代码:
<section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p>
</section>
JQ代码:
$(document).ready(function () {
// 获取section标签下的所有p标签的子元素
var elem = $('section').find('p');
console.log(elem);
// 获取section标签下的所有子元素
var elems = $('section').find('*');
console.log(elems);
});
遍历 - 同级(兄弟)
同级元素拥有相同的父级元素
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()
JQuery siblings()
siblings() 方法返回被选元素的所有同胞元素。
HTML代码: <section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p></section>
JQ代码:
$(document).ready(function () {
// 获取h1标签的所有同级元素
var elem = $('h1').siblings();
console.log(elem); // p p
});
JQuery next()
next() 方法返回被选元素的下一个同胞元素
HTML代码: <section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p></section>
JQ代码:
$(document).ready(function () {
// 获取h1标签的下一个同级元素
var elem = $('h1').next();
console.log(elem); // p
});
JQuery nextAll()
nextAll() 方法返回被选元素的所有跟随的同胞元素。
HTML代码: <section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p></section>
JQ代码:
$(document).ready(function () {
// 获取p标签的后面的所有同级元素
var elem = $('p').nextAll();
console.log(elem); // p
});
JQuery nextUntil()
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
HTML代码: <section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p>
<h2>重点注意</h2></section>
JQ代码:
$(document).ready(function () {
// 获取
var elem = $('h1').nextUntil('h2');
console.log(elem); // p p
});
JQuery prev() & prevAll() & prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同级元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
遍历 - 过滤
三个最基本的过滤方法是:
first()
last()
eq()
基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许选取匹配或不匹配某项指定标准的元素。
JQuery first()
first() 方法返回被选元素的首个元素。
HTML代码: <section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p>
<h2>重点注意</h2></section>
JQ代码:
$(document).ready(function () {
// 获取section元素中的第一个为p标签的子元素
var elem = $('section p').first();
console.log(elem); // p p
});
JQuery last()
last() 方法返回被选元素的最后一个元素。
HTML代码: <section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p>
<h2>重点注意</h2></section>
JQ代码:
$(document).ready(function () {
// 获取section元素中的最后一个为p标签的子元素
var elem = $('section p').last();
console.log(elem); // p p
});
JQuery eq()
eq() 方法返回被选元素中带有指定索引号的元素。
下标从0开始,因此首个元素的下标是0而不是1。
HTML代码: <section>
<h1>文章的<span>标题</span>啦</h1>
<p>文章的内容内容内容内容内容内容</p>
<p>结尾部分</p>
<h2>重点注意</h2></section>
JQ代码:
$(document).ready(function () {
// 获去第二个p元素
var elem = $('p').eq(1);
console.log(elem);
});
JQuery filter()
filter()方法允许规定一个标准。
不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
JQ代码:
$(document).ready(function () {
// 获取类名带有 btn 的 input 元素
var elem = $('input').filter('.btn');
console.log(elem);
});
JQuery not()
not() 方法返回不匹配标准的所有元素。
JQ代码:
$(document).ready(function () {
// 获取所有类名不带 btn 的 input 元素
var elem = $('input').not('.btn');
console.log(elem);
});
注意:not() 方法与 filter() 相反。