JQuery學習7

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

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(): 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

查找所有文本节点并加粗
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>

往一个空框架中加些内容
HTML 代码:
<iframe src="/index-blank.html" width="300" height="100"></iframe>
jQuery 代码:
$("iframe").contents().find("body")
  .append("I'm in an iframe!");

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

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing
中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map',
'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and
'slice'--再加上 Manipulation 中的 'clone'

选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素
HTML 代码:
<p><span>Hello</span>,how are you?</p>
jQuery 代码:
$("p").find("span").end()

children(exp): 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。

注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素

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

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

parentsUntil([expr]):查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。 如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。

查找item-a的祖先，但不包括level-1
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 代码:
$('li.item-a').parentsUntil('.level-1')
    .css('background-color', 'red');

closest(exp,context):从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

closest对于处理事件委托非常有用

expr: String, Array

用以过滤元素的表达式。jQuery 1.4开始，也可以传递一个字符串数组，用于查找多个元素。

context (可选): Element, jQuery

作为待查找的 DOM 元素集、文档或 jQuery 对象。

展示如何使用clostest查找多个元素
HTML 代码:
<ul><li></li><li></li></ul>
jQuery 代码:
$("li:first").closest(["ul", "body"]);
结果:
[ul, body]

展示如何使用clostest来完成事件委托。
HTML 代码:
<ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
</ul>
jQuery 代码:
$(document).bind("click", function (e) {
    $(e.target).closest("li").toggleClass("hilight");
});

next([expr]): 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合,只有紧邻的同辈元素会被匹配到，而不是後面所有的同辈元素

prev([expr]): 取得一个包含匹配的元素集合中每一个元素紧邻的前面同辈元素的元素集合,只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素

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

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

nextUntil([expr]):查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

prevUntil([expr]):查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

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

offsetParent()： 返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效