jQuery 篩選 1)過濾 2)查找 3)串聯 eq(index| index) 獲取匹配的第二個元素 HTML 代碼: This is just a test. So is this jQuery 代碼: $("p").eq(1).css("color","red") 結果: [ So is t ...
jQuery
篩選
1)過濾
2)查找
3)串聯eq(index|-index)
獲取匹配的第二個元素
HTML 代碼:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代碼:
$("p").eq(1).css("color","red")
結果:
[ <p> So is this</p> ]first()
獲取第一個元素
獲取匹配的第一個元素
HTML 代碼:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代碼:
$('li').first().css("color","red")
結果:
[ <li>list item 1</li> ]last()
獲取最後個元素
獲取匹配的最後個元素
HTML 代碼:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代碼:
$('li').last()
結果:
[ <li>list item 5</li> ]hasClass(class)
檢查當前的元素是否含有某個特定的類，如果有，則返回true。
給包含有某個類的元素進行一個動畫。
HTML 代碼:
<div class="protected"></div><div></div>
jQuery 代碼:
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});filter(expr|obj|ele|fn)
篩選出與指定表達式匹配的元素集合。
保留子元素中不含有ol的元素。
HTML 代碼:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
jQuery 代碼:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
結果:
[ <p>How are you?</p> ]is
根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。
判斷點擊li標簽增加背景色為紅色，如果點擊的是第2個strong,當前的li增加背景色為綠色，
HTML 代碼:
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
<li>list item 3</li>
</ul>
jQuery 代碼:
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {
return $('strong', this).length === 2;
});
if ( isWithTwo ) {
$li.css("background-color", "green");
} else {
$li.css("background-color", "red");
}
});map
將一組元素轉換成其他數組（不論是否是元素數組）
把form中的每個input元素的值建立一個列表。
HTML 代碼:
<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>
jQuery 代碼:
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
結果:
[ <p>John, password, http://ejohn.org/</p> ]has
保留包含特定後代的元素，去掉那些不含有指定後代的元素。
給含有ul的li加上背景色
HTML 代碼:
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
jQuery 代碼:
$('li').has('ul').css('background-color', 'red');not
刪除與指定表達式匹配的元素
從p元素中刪除帶有 select 的ID的元素
HTML 代碼:
<p>Hello</p><p id="selected">Hello Again</p>
jQuery 代碼:
$("p").not( $("#selected")[0] )
結果:
[ <p>Hello</p> ]slice
選取一個匹配的子集
只選取第二個p元素
HTML 代碼:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代碼:
$("p").slice(1, 2).wrapInner("<b></b>");
結果:
[ <p><b>cruel</b></p> ]children
取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。
在每個div中查找 .selected 的類。
HTML 代碼:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
jQuery 代碼:
$("div").children(".selected")
結果:
[ <p class="selected">Hello Again</p> ]find
搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。
從所有的段落開始，進一步搜索下麵的span元素。與$("p span")相同。
HTML 代碼:
<p><span>Hello</span>, how are you?</p>
jQuery 代碼:
$("p").find("span")
結果:
[ <span>Hello</span> ]next
取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。
找到每個段落的後面緊鄰的同輩元素。
HTML 代碼:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery 代碼:
$("p").next()
結果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]nextAll
查找當前元素之後所有的同輩元素。
給第一個div之後的所有元素加個類
HTML 代碼:
<div></div><div></div><div></div><div></div>
jQuery 代碼:
$("div:first").nextAll().addClass("after");
結果:
[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]nextUntil
查找當前元素之後所有的同輩元素，直到遇到匹配的那個元素為止。
給#term-2後面直到dt前的元素加上紅色背景
HTML 代碼:
<dl>
<dt>term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt>term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>jQuery 代碼:
$('#term-2').nextUntil('dt').css('background-color', 'red');
var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "green");andSelf()
加入先前所選的加入當前元素中
選取所有div以及內部的p，並加上border類
HTML 代碼:
<div><p>First Paragraph</p><p>Second Paragraph</p></div>
jQuery 代碼:
$("div").find("p").andSelf().addClass("border");
結果:
<div class="border">
<p class="border">First Paragraph</p>
<p class="border">Second Paragraph</p>
</div>contents()
查找匹配元素內部所有的子節點（包括文本節點）
查找所有文本節點並加粗
HTML 代碼:
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
jQuery 代碼:
$("p").contents().not("[nodeType=1]").wrap("<b/>");
結果:
<p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>end()
回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。
選取所有的p元素，查找並選取span子元素，然後再回過來選取p元素
HTML 代碼:
<p><span>Hello</span>,how are you?</p>
jQuery 代碼:
$("p").find("span").end()
結果:
[ <p><span>Hello</span> how are you?</p> ]
