jQuery筛选函数：过滤、查找、串联学习笔记

1、过滤

1. eq(index|-index)，获取第N个元素

   index：一个整数，指示元素基于0的位置,这个元素的位置是从0算起。

   - index：一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)

   $("p").eq(1) // 匹配结果集里面的第二个元素,传递从0开始的下标
   $("p").eq(-2) // 匹配倒数第二个,下标是-2
   

2. first()，获取第一个元素

   $('li').first()  // 获取匹配的第一个li元素
   

3. last()，获取最后个元素

   $('li').last()  // 获取匹配的最后一个li元素
   

4. hasClass(class)，检查当前的元素是否含有某个特定的类，如果有，则返回true。

   // HTML代码
   <p id="cp" class="cp1 cp2"> So is this 111</p>
   
   // jQuery 代码:
   console.log($("#cp").hasClass("cp1")); // true
   

5. filter(expr|obj|ele|fn)，筛选出与指定表达式匹配的元素集合。

   // HTML代码   保留第一个以及带有select类的元素
   <p>Hello</p>
   <p>Hello Again</p>
   <p class="selected">And Again</p>
   
   // jQuery 代码:
   $("p").filter(".selected, :first")
   

6. is(expr|obj|ele|fn)，根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

   // HTML代码
   <form><input type="checkbox" /></form>
   
   // jQuery 代码:
   $("input[type='checkbox']").parent().is("form") // true
   

7. map(callback)，将一组元素转换成其他数组（不论是否是元素数组）

   // HTML代码  把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>
   
   // jQuery 代码:
   $("p").append( $("input").map(function(){
     return $(this).val();
   }).get().join(", ") );
   
   // 结果
   Values: on, John, password, http://ejohn.org/
   

8. has(expr|ele)，保留包含特定后代的元素，去掉那些不含有指定后代的元素。包含自身，

   // HTML代码  给含有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>
   </ul>
   
   // jQuery 代码:
   $('li').has('ul').css('background-color', 'red');
   

9. not(expr|ele|fn)，删除与指定表达式匹配的元素。

   // HTML代码   从p元素中删除带有 select 的ID的元素
   <p>Hello</p>
   <p id="selected">Hello Again</p>
   
   // jQuery 代码:
   $("p").not("#selected")
   

10. slice(start,[end])，选取一个匹配的子集。

    start：开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。

    end：结束选取自己的位置，如果不指定，则就是本身的结尾。

    // HTML代码
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    
    // jQuery 代码:
    $("p").slice(1，2).wrapInner("<b></b>"); // 选择第二个p
    $("p").slice(-1).wrapInner("<b></b>"); // 选择最后一个p
    

2、查找

1. children([expr])，取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

   $("div").children()  // 查找DIV中的每个子元素
   $("div").children("p") // 查找DIV中的每个p元素
   

2. closest(e|o|e),从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素.

   closest和parents的主要区别是：

   1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；

   2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；

   3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

   // HTML代码
   <div id="divb">
       <div id="diva">
           <div id="p1">And Again</div>
       </div>
   </div>
   // jQuery 代码:
   console.log($("#p1").closest("div")); // 包含自身 只拿到一个
   

3. find(e|o|e)，搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

   // HTML代码
   <p><span>Hello</span>, how are you?</p>
   // jQuery 代码:
   $("p").find("span") // 结果：<span>Hello</span>
   

4. next([expr])，取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

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

5. nextall([expr])，查找当前元素之后所有的同辈元素。

6. nextUntil([e|e][,f])，查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。匹配到就停止。

7. offsetParent()，返回第一个匹配元素用于定位的父节点。

8. parent([expr])，取得一个包含着所有匹配元素的唯一父元素的元素集合。

   // HTML代码
   <div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
   // jQuery 代码:
   $("p").parent(".selected")
   // 结果
   <div class="selected"><p>Hello Again</p></div>
   

9. parents([expr])，取得一个包含着所有匹配元素的祖先元素的元素集合。

10. parentsUntil([e|e][,f])，查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

11. prev([expr])，取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

12. prevall([expr])，查找当前元素之前所有的同辈元素。

13. prevUntil([e|e][,f])，查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

14. siblings([expr])，取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

    // HTML 代码:
    <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
    // jQuery 代码:
    $("div").siblings()
    // 结果:
    <p>Hello</p>, <p>And Again</p> 
    

3、串联

1. add(e|e|h|o[,c])，把与表达式匹配的元素添加到jQuery对象中。

   // jQuery 代码:   在body中添加span
    $("p").add("<span>Again</span>").appendTo("body")
   // 结果:
   <span>Again</span>
   

2. addBack()，添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。

3. contents()，查找匹配元素内部所有的子节点（包括文本节点）。

4. end()，回到最近的一个"破坏性"操作之前。