jQuery之篩選

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> ]