jq篩選方法(參照手冊)

過濾:

　　1) eq(index|-index):獲取第N個元素

　　　　負值表示從末尾開始匹配

<!-- 獲取匹配的第二個元素 -->

<p> This is just a test.</p>
<p> So is this</p>

<script>
$("p").eq(1)
$("p").eq(-2)   // <p> This is just a test.</p> 
</script>

　　2) first():獲取第一個元素

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

<script>
    $(‘li‘).first()    //<li>list item 1</li>
</script>

　　3) last():獲取最後一個元素

　　4) hasClass(class):檢查當前的元素是否含有某個特定的類，如果有，則返回true。

<div class="protected"></div>
<div></div>
<script>
$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});
</script>

　　5) filter(expr | obj | ele | fn):篩選出與指定表達式匹配的元素集合。

　　　　這個方法用於縮小匹配的範圍。用逗號分隔多個表達式,返回匹配到的元素節點

<!-- 保留子元素中不含有ol的元素。 -->
<p>
    <ol>
        <li>Hello</li>
    </ol>
</p>
<p>How are you?</p> 
   
<script>
    $("p").filter(function(index) {
          return $("ol", this).length == 0;      //<p>How are you?</p>
    });    
</script>        

　　6) is(expr | obj | ele | fn):檢測匹配元素集合，有一個元素符合返回true

<!-- 由於input元素的父元素是一個表單元素，所以返回true。-->
<form>
    <input type="checkbox" />
</form>

<script>
$("input[type=‘checkbox‘]").parent().is("form")

//true
</script>

　　7) map(callback):將一組元素轉換成其他數組（不論是否是元素數組）

　　　　你可以用這個函數來建立一個列表，不論是值、屬性還是CSS樣式，或者其他特別形式。這都可以用‘$.map()‘來方便的建立。

<!-- 把form中的每個input元素的值建立一個列表。-->


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

<script>
    $("p").append( $("input").map(function(){
          return $(this).val();
    }).get().join(", ") );        //<p>John, password, http://ejohn.org/</p> 
</script> 

　　8) has(expr|ele):保留包含特定後代的元素，去掉那些不含有指定後代的元素

<!-- 給含有ul的li加上背景色 -->

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

<script>
    $(‘li‘).has(‘ul‘).css(‘background-color‘, ‘red‘);
</script>            

　　9 ) not(expr|ele|fn):刪除與指定表達式匹配的元素;

<!-- 從p元素中刪除帶有 select 的ID的元素 -->

<p>Hello</p>
<p id="selected">Hello Again</p>

<script>
    $("p").not( $("#selected")[0] )  　　　　　　//<p>Hello</p> 
</script>

　　10) slice(start, [end]):選取一個匹配的子集

<!-- 選擇第一個p元素 -->

<p>Hello</p>
<p>cruel</p>
<p>World</p>

<script>
    $("p").slice(0, 1).wrapInner("<b></b>");     //<p><b>Hello</b></p>
</script>

<!-- 選擇前兩個p元素 -->
<script>
    $("p").slice(0, 2).wrapInner("<b></b>");     // <p><b>Hello</b></p>,<p><b>cruel</b></p>
</script>

jq篩選方法