jQuery-过滤与查找
1、遍历查找祖先的方法（向上遍历DOM树）
需要了解的是，祖先指的是父、祖父、曾祖父等等
1、查找直接父元素的方法：parent（）
<body>
<div class="box1">
<h3>这是一个h3标签</h3>
<p>这是一个p标签</p>
<p>这是第二个p标签</p>
<div class="inBox1">
<p >这是inbox1里面的p标签</p>
</div>
</div>
<div class="box2">
<h3>这是box2里面的h3标签</h3>
<p class='p2'>这是box2里面的p标签</p>
<p>这是box2里面的第二个p标签</p>
</div>
<div class="box3">
<h3>这是box3里面的h3标签</h3>
<p class='p2'>这是box3里面的p标签</p>
<p>这是box3里面的第二个p标签</p>
</div>
</body>
$(document).ready(function() {
var inBox1= $('.inBox1 p');
console.log(inBox1);
//查找inbox1的直接父元素
var parent = inBox1.parent();
console.log(parent);
})
最终打印的出来的是p标签的直接父元素inbox1。
2、查找所有父元素的方法：parents()
$(document).ready(function() {
var inBox1= $('.inBox1 p');
console.log(inBox1);
//查找inbox1的所有父元素
var parent = inBox1.parents();
console.log(parent);
})
需要注意的是，这李查询出来的是所有祖先元素，包括inBox1，box1，body，html。但这个基本上不常用。
2、遍历查找子孙的方法（向下查找DOM树）
1、查找直接子元素的方法：children()
$(document).ready(function() {
var child = $('.box1').children();
console.log(child);
})
还是上面的例子，查找box1的子元素。最终查找出来box1下面的四个子元素。
2、查找所有子元素的方法：find()
$(document).ready(function() {
var child = $('.box1').find('p');
console.log(child);
})
这里查找出来的是box1下面的所有p标签，包括在inBox1里面的p标签
3、遍历查找同胞的方法（在DOM树中水平遍历）
1、next() 方法（往下匹配）
$(document).ready(function() {
var next = $('.box1').next();
console.log(next);
})
查找到的是就是与box1相邻的box2标签
2、siblings() 方法（往下匹配）
$(document).ready(function() {
var siblings = $('.box1').siblings();
console.log(siblings);
})
查到到的是box1所有的同胞元素
3、prev()、prevAll() & prevUntil() 方法（往上匹配）
与next方法相同，只是这几个方法都是往上匹配的
4、过滤的方法
1、first()方法
$(document).ready(function() {
var first = $('.box1 p').first();
console.log(first);
})
这里查到的是box1下面的第一个p标签
2、last()方法
$(document).ready(function() {
var last = $('.box1 p').last();
console.log(last);
})
这里查到的是box1下面的最后一个p标签
3、eq()方法（重点掌握）
eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
$(document).ready(function() {
var last = $('.box1 p').eq(2);
console.log(last);
})
这里查找到的是box1下面 第三个p标签
4、filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$(document).ready(function() {
var p2 = $('p').filter('.p2');
console.log(p2);
})
这里查到的是p标签中，class属性是p2的所有p标签
5、not()方法
与filter()方法刚好相反
(document).ready(function() {
var p2 = $(‘p’).filter(’.p2’);
console.log(p2);
})
这里查到的是p标签中，class属性是p2的所有p标签
#### 5、not()方法
与filter()方法刚好相反
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
