jQuery 遍歷
一 jQuery 遍歷 - 祖先
通過 jQuery讳侨，您能夠向上遍歷 DOM 樹，以查找元素的祖先京景。
向上遍歷 DOM 樹
這些 jQuery 方法很有用茂装，它們用于向上遍歷 DOM 樹：
- *parent()
- parents()
- parentsUntil()
jQuery parent() 方法
parent() 方法返回被選元素的直接父元素。
該方法只會向上一級對 DOM 樹進(jìn)行遍歷瘾晃。
下面的例子返回每個 <span> 元素的的直接父元素：
實(shí)例
$(document).ready(function(){
$("span").parent();
});
jQuery parents() 方法
parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)幻妓。
下面的例子返回所有 <span> 元素的所有祖先：
實(shí)例
$(document).ready(function(){
$("span").parents();
});
------------------------------------------------------------------
<script>
$(document).ready(function(){
$("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖父)
<div style="width:500px;">div (曾祖父)
<ul>ul (祖父)
<li>li (直接父)
<span>span</span>
</li>
</ul>
</div>
</body>
也可以使用可選參數(shù)來過濾對祖先元素的搜索蹦误。
下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
實(shí)例
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素肉津。
下面的例子返回介于 <span> 與 <div> 元素之間的所有祖先元素：
實(shí)例
$(document).ready(function(){
$("span").parentsUntil("div");
});
二 后代是子强胰、孫、曾孫等等妹沙。
通過 jQuery偶洋，能夠向下遍歷 DOM 樹，以查找元素的后代初烘。
向下遍歷 DOM 樹
下面是兩個用于向下遍歷 DOM 樹的 jQuery 方法：
- children()
- find()
jQuery children() 方法
children() 方法返回被選元素的所有直接子元素涡真。
該方法只會向下一級對 DOM 樹進(jìn)行遍歷。
下面的例子返回每個 <div> 元素的所有直接子元素：
實(shí)例
$(document).ready(function(){
$("div").children();
});
也可以使用可選參數(shù)來過濾對子元素的搜索肾筐。
下面的例子返回類名為 "1" 的所有 <p> 元素哆料，并且它們是 <div> 的直接子元素：
實(shí)例
$(document).ready(function(){
$("div").children("p.1");
});
jQuery find() 方法
find() 方法返回被選元素的后代元素，一路向下直到最后一個后代吗铐。
下面的例子返回屬于<div> 后代的所有 <span> 元素：
實(shí)例
$(document).ready(function(){
$("div").find("span");
});
下面的例子返回 <div> 的所有后代：
實(shí)例
$(document).ready(function(){
$("div").find("*");
});
驗(yàn)證表單jq寫法
$('input:eq(0)').focus(function () {
console.log($(this).parent().find('span').remove())
})
if(!$('input:eq(0)').val()){
$('input:eq(0)').after('<span>請輸入正確的值</span>')
}
三 jQuery 遍歷 - 同胞
在 DOM 樹中水平遍歷
有許多有用的方法讓我們在 DOM 樹進(jìn)行水平遍歷：
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
(1) jQuery siblings() 方法
siblings() 方法返回被選元素的所有同胞元素东亦。
下面的例子返回 <h2> 的所有同胞元素：
實(shí)例
$(document).ready(function(){
$("h2").siblings();
});
也可以使用可選參數(shù)來過濾對同胞元素的搜索。
下面的例子返回屬于 <h2> 的同胞元素的所有 <p> 元素：
實(shí)例
$(document).ready(function(){
$("h2").siblings("p");
});
(2) jQuery next() 方法
next() 方法返回被選元素的下一個同胞元素唬渗。
該方法只返回一個元素典阵。
下面的例子返回 <h2> 的下一個同胞元素：
實(shí)例
$(document).ready(function(){
$("h2").next();
});
(3) jQuery nextAll() 方法
nextAll() 方法返回被選元素的所有跟隨的同胞元素。
下面的例子返回 <h2> 的所有跟隨的同胞元素：
實(shí)例
$(document).ready(function(){
$("h2").nextAll();
});
(4) jQuery nextUntil() 方法
nextUntil() 方法返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素镊逝。
下面的例子返回介于 <h2> 與 <h6> 元素之間的所有同胞元素：
實(shí)例
$(document).ready(function(){
$("h2").nextUntil("h6");
});
四 jQuery 遍歷 - 過濾
三個最基本的過濾方法是：first(), last() 和 eq()壮啊，它們允許您基于其在一組元素中的位置來選擇一個特定的元素。
(1) jQuery first() 方法
first() 方法返回被選元素的首個元素撑蒜。
下面的例子選取首個 <div> 元素內(nèi)部的第一個 <p> 元素：
實(shí)例
$(document).ready(function(){
$("div p").first();
});
(2) jQuery last() 方法
last() 方法返回被選元素的最后一個元素歹啼。
下面的例子選擇最后一個 <div> 元素中的最后一個 <p> 元素：
實(shí)例
$(document).ready(function(){
$("div p").last();
});
(3) jQuery eq() 方法
eq() 方法返回被選元素中帶有指定索引號的元素。
索引號從 0 開始座菠，因此首個元素的索引號是 0 而不是 1狸眼。下面的例子選取第二個 <p> 元素（索引號 1）：
實(shí)例
$(document).ready(function(){
$("p").eq(1);
});
(4) jQuery filter() 方法
filter() 方法允許您規(guī)定一個標(biāo)準(zhǔn)。不匹配這個標(biāo)準(zhǔn)的元素會被從集合中刪除浴滴，匹配的元素會被返回拓萌。
下面的例子返回帶有類名 "intro" 的所有 <p> 元素：
實(shí)例
$(document).ready(function(){
$("p").filter(".intro");
});
(5) jQuery not() 方法
not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素。
提示：not() 方法與 filter() 相反升略。
下面的例子返回不帶有類名 "intro" 的所有 <p> 元素：
實(shí)例
$(document).ready(function(){
$("p").not(".intro");
});
(7) each() 方法
定義和用法
each() 方法規(guī)定為每個匹配元素規(guī)定運(yùn)行的函數(shù)微王。
提示：返回 false 可用于及早停止循環(huán)。
實(shí)例
輸出每個 li 元素的文本：
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
選擇器
擴(kuò)展:
獲取選擇框是否被選擇的方法 選中返回true
$('input[type="checkbox"]').is(':checked')$('input[type="checkbox"]').get(0).checked
選擇器組合使用:
//獲取input標(biāo)簽屬性type為radio的并選中的節(jié)點(diǎn)的值 并遍歷
$('input[type="radio"]:checked').each(function(){
console.log($(this).val())
})
