jQuery慢慢啃（四）

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

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

$("p").eq(1)//获取匹配的第二个元素

$("p").eq(-2)//获取倒数匹配的第二个元素

2.$(‘li‘).first()//获取第一个元素

$(‘li‘).last()//获取最后个元素

 $(this).hasClass("protected")和 $(this).is(".protected")相等//检查当前的元素是否含有某个特定的类，如果有，则返回true。

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

$("p").filter(".selected")//保留带有select类的元素

$("p").filter(".selected, :first")//保留第一个以及带有select类的元素

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

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

$("input[type=‘checkbox‘]").parent().is("form")//由于input元素的父元素是一个表单元素，所以返回true。

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

$("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");
  }
});

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

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

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

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

$(‘li‘).has(‘ul‘).css(‘background-color‘, ‘red‘);

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

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

 8.slice(start, [end])//选取一个匹配的子集 

$("p").slice(0, 1).wrapInner("<b></b>");//wrapInner是在元素内部嵌套入HTML标签
$("p").slice(0, 2).wrapInner("<b></b>");

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

 $("div").children()//获取所有子元素
$("div").children(".selected")//获取带有具体类的元素

10.closest(expr|object|element)(expr|object|element)//从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。

closest和parents的主要区别是：

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

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

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

 $("li:first").closest(["ul", "body"]);

展示如何使用clostest来完成事件委托。

 $(document).bind("click", function (e) {
    $(e.target).closest("li").toggleClass("hilight");
});

11.find(expr|obj|ele)这个函数是找出正在处理的元素的后代元素的好方法。

$("p").find("span")

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

$("p").next()

$("p").next(".selected")

13.nextAll([expr])//查找当前元素之后所有的同辈元素

$("div:first").nextAll().addClass("after");

14.nextUntil([exp|ele][,fil])//查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

$("#term-1").nextUntil(term3, "dd").css("color", "green");

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

$("p").parent()

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

16.parents([expr])//取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

$("span").parents()

$("span").parents("p")

17.parentsUntil([expr|element][,filter])//查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

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

$("p").prev()

$("p").prev(".selected")

19.prevAll([expr])//查找当前元素之前所有的同辈元素

$("div:last").prevAll().addClass("before");

 20.prevUntil([exp|ele][,fil])//找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

$(‘#term-2‘).prevUntil(‘dt‘).css(‘background-color‘, ‘red‘);

21.siblings([expr])//取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

$("div").siblings(".selected")

22.add(expr|ele|html|obj[,con])//把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

<p>Hello</p><span>Hello Again</span>

$("p").add("span")

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

<p>Hello</p>

  $("p").add("<span>Again</span>")

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

<p>Hello</p><p><span id="a">Hello Again</span></p>

  $("p").add(document.getElementById("a"))

[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]

23.andSelf()//加入先前所选的加入当前元素中

从jQuery1.8开始，.andSelf()方法已经被标注过时，在jQuery1.8和更高版本中应使用.addBack()。

$("div").find("p").andSelf().addClass("border");

24.contents()//查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

 $("p").contents().not("[nodeType=1]").wrap("<b/>");

$("iframe").contents().find("body").append("I‘m in an iframe!");

25.end()//回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

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

$("p").find("span").end()

[ <p><span>Hello</span> how are you?</p> ]