jQuery學習總結02-篩選

阿新 • • 發佈：2018-07-09

總結依靠 bsp round con 語法可選 wrap api

一、篩選

1、eq(index|-index)

說明：獲取當前鏈式操作中第N個jQuery對象，返回jQuery對象，類似的有get(index),不過get(index)返回的是DOM對象

示例：

描述：獲取匹配的第二個元素

HTML代碼：

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

jQuery代碼：

$(‘p‘).eq(1);

結果：

[ <p> So is this</p> ]

2、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();

結果：

[ <li>list item 1</li> ]

3、last()

說明：獲取最後個元素示例不再贅述

4、hasClass(class)

說明：檢查當前元素是否含有某個特定的類,如果有則返回true，否則返回false，這其實就是is(‘.‘ + class)

示例：
描述：給包含某個類的元素進行一個動畫

HTML代碼：

 <div class="protected" style="height: 20px;width: 20px;background-color: #2459a2;position: relative"></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 });
});

5.filter(expr|obj|ele|fn)

說明：篩選出與制定表達式匹配的元素集合

示例：

描述：保留帶有select類的元素

　　　保留第一個元素和帶有select類的元素

　　　保留子元素中不含有ol的元素。

HTML代碼：

<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>

//保留子元素中不含有ol的元素。
<p>　
     <ol>　　　
         <li>Hello</li>　
     </ol>
</p>
<p>How are you?</p>

jQuery代碼：

$(‘p‘).filter(‘.selected‘);

$(‘p‘).filter(‘.selected,:first‘);

//保留子元素中不含有ol的元素。
$(‘p‘).filter(function (index) {
    console.log(index,this);
    return $(‘ol‘,this).length == 0;
});

結果：

[ <p class="selected">And Again</p> ]

[ <p>Hello</p>, <p class="selected">And Again</p> ]

//保留子元素中不含有ol的元素。
[ <p>How are you?</p> ]

6、is(expr|obj|ele|fn)

說明：根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。

　　　如果沒有元素符合，或者表達式無效，都返回‘false‘。 ‘‘‘註意：‘‘‘在jQuery 1.3中才對所有表達式提供了支持。在先前版本中，如果提供了復雜的表達式，比如層級選擇器（比如 + , ~ 和 > ），始終會返回true

示例：

描述：判斷input元素的父元素是否為from元素

　　　判斷點擊li標簽增加背景色為紅色，如果點擊的是第2個strong,當前的li增加背景色為綠色，

HTML代碼：

//示例一
<form>
    <input type="checkbox" />
</form>

//示例二
<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代碼：

$(‘input[type="checkbox"]‘).parent().is(‘form‘);

$(‘li‘).click(function () {
    var $li = $(this);
    isTwo = $li.is(function () {
        return $(‘strong‘,this).length === 2;
    });
    if(isTwo){
        $li.css(‘background-color‘,‘green‘);
    }else{
        $li.css(‘background-color‘,‘red‘);
    }
});

結果：

true
暫時無法展示

7.map(callback)

說明：待學習

8.has(expr|ele)

說明：保留包含特定後代的元素，去掉那些不含有指定後代的元素。

　　 .has()方法將會從給定的jQuery對象中重新創建一組匹配的對象。提供的選擇器會一一測試原先那些對象的後代，含有匹配後代的對象將得以保留。

示例：

描述：給含有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‘);

9.not(expr|ele|fn)

說明：從匹配元素的集合中刪除與指定表達式匹配的元素

示例：

描述：從p元素中刪除帶有 select 的ID的元素

HTML代碼：

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

jQuery代碼：

$("p").not( $("#selected")[0] )

結果：

[ <p>Hello</p> ]

10、slice(start, [end])

說明：選取一個匹配的子集，與原來的slice方法類似

示例：

描述：選擇第一個元素p

HTML代碼：

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

jQuery代碼：

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

結果：

[ <p><b>Hello</b></p> ]

11、children([expr])

說明：取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。

　　　可以通過可選的表達式來過濾所匹配的子元素。註意：parents()將查找所有祖輩元素，而children()只考慮子元素而不考慮所有後代元素。

示例：查找每個div中的子元素

　　　在每個div中查找 .selected 的類。

HTML代碼：

//示例一
<p>Hello</p>
<div>
     <span>Hello Again</span>
     <p><span>Thank you</span></p>
</div>
<p>And Again</p>

//示例二
<div><span>Hello</span>
    <p class="selected">Hello Again</p>
    <p>And Again</p>
</div>

jQuery代碼：

$(‘div‘).children();
$(‘div‘).children(‘.selected‘);

結果：

[ <span>Hello Again</span>,<p><span>Thank you</span></p>]
[ <p class="selected">Hello Again</p> ]

12.find(expr|obj|ele)

說明：搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

　　　所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫。

示例：

描述：從所有的段落開始，進一步搜索下面的span元素。與$("p span")相同。

HTML代碼：

<p>
        <span>Hello</span>, how are you?
        <span>World</span>
</p>

jQuery代碼：

$(‘p‘).find(‘span‘);

結果：

[ <span>Hello</span>,<span>World</span> ]

13、next([expr])

說明：取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

　　　這個函數只返回後面那個緊鄰的同輩元素，而不是後面所有的同輩元素（可以使用nextAll）。可以用一個可選的表達式進行篩選。

示例：

描述：找到每個段落的後面緊鄰的同輩元素。

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

14、nextAll([expr])

說明：查找當前元素之後所有的同輩元素。　　

　　　可以用表達式過濾

示例：

描述：給第一個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> ]

15、nextUntil([exp|ele][,fil])

說明：查找當前元素之後所有的同輩元素，直到遇到匹配的那個元素為止

　　　如果提供的jQuery代表了一組DOM元素，.nextUntil()方法也能讓我們找遍所有元素所在的DOM樹，直到遇到了一個跟提供的參數匹配的元素的時候才會停下來。這個新jQuery對象裏包含了下面所有找到的同輩元素，但不包括那個選擇器匹配到的元素。

　　　如果沒有選擇器匹配到，或者沒有提供參數，那麽跟在後面的所有同輩元素都會被選中。這就跟用沒有提供參數的 .nextAll() 效果一樣。

示例：

描述：給#term-2後面直到dt前的元素加上紅色背景

HTML代碼：

<dl>
  <dt id="term-1" >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 id="term-3" >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");

16、parent([expr])

說明：取得一個包含著所有匹配元素的唯一父元素的元素集合。

　　　你可以使用可選的表達式來篩選

示例：

描述：查找每個段落的父元素

HTML代碼：

//示例一
<div>
    <p>Hello</p>
    <p>Hello</p>
</div>

//示例二
<div>
    <p>Hello</p>
</div>
<div class="selected">
    <p>Hello Again</p>
</div>

jQuery代碼：

$("p").parent()

$("p").parent(".selected")

結果：

[ <div><p>Hello</p><p>Hello</p></div>]

[ <div class="selected"><p>Hello Again</p></div> ]

17、parents([expr])和parentsUntil([expr|element][,filter])

說明：parents([expr]) 取得一個包含著所有匹配元素的祖先元素的元素集合（包含根元素）。可以通過一個可選的表達式進行篩選。

　　　parentsUntil([expr|element][,filter])　　查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。如果提供的jQuery代表了一組DOM元素，.parentsUntil()方法也能讓我們找遍所有元素的祖先元素，直到遇到了一個跟提供的參數匹配的元素的時候才會停下來。這個返回的jQuery對象裏包含了下面所有找到的父輩元素，但不包括那個選擇器匹配到的元素。

示例：

描述：找到每個span元素的所有祖先元素。

　　　查找item-a的祖先，但不包括level-1

HTML代碼：

示例一
<html>
    <body>
        <div>
            <p><span>Hello</span></p>
            <span>Hello Again</span>
        </div>
    </body>
</html>                    

示例二
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

jQuery代碼：

$("span").parents("p")
$(‘li.item-a‘).parentsUntil(‘.level-1‘).css(‘background-color‘, ‘red‘);

結果：

[p, div, body, html]

18、prev([expr])

說明：取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

　　　可以用一個可選的表達式進行篩選。只有緊鄰的同輩元素會被匹配到，而不是前面所有的同輩元素。

示例：

描述：找到每個段落緊鄰的前一個同輩元素

HTML代碼：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代碼：

$("p").prev()

結果：

[ <div><span>Hello Again</span></div> ]

19、prevAll([expr])和prevUntil([exp|ele][,fil])

說明：這裏不再贅述，意義同parent類似

20、siblings([expr])

說明：取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。

示例：

描述：找到每個div的所有同輩元素。

HTML代碼：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代碼：

$("div").siblings()

結果：

[ <p>Hello</p>, <p>And Again</p> ]

jQuery學習總結02-篩選

總結依靠 bsp round con 語法可選 wrap api 一、篩選 1、eq(index|-index) 說明：獲取當前鏈式操作中第N個jQuery對象，返回jQuery對象，類似的有get(index),不過get(index)返回的是DOM對象示例：描述

jQuery學習總結02-篩選

一、篩選

1、eq(index|-index)

2、first()

3、last()

4、hasClass(class)

5.filter(expr|obj|ele|fn)

6、is(expr|obj|ele|fn)

7.map(callback)

8.has(expr|ele)

9.not(expr|ele|fn)

10、slice(start, [end])

11、children([expr])

12.find(expr|obj|ele)

13、next([expr])

14、nextAll([expr])

15、nextUntil([exp|ele][,fil])

16、parent([expr])

17、parents([expr])和parentsUntil([expr|element][,filter])

18、prev([expr])

[ <div><span>Hello Again</span></div> ]

19、prevAll([expr])和prevUntil([exp|ele][,fil])

20、siblings([expr])

相關推薦