jQuery 中的 siblings 、eq、off、index、delegate

一、siblings

siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。.siblings(selector)

如（选中中是黄色部分）：

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

<script>
   $("p").siblings(".selected").css("background", "yellow");
</script>

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.siblings() 方法允许我们在 DOM 树中搜索这些元素的同胞元素，并用匹配元素构造一个新的 jQuery 对象。

该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。

如：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

<script>
   $('li.third-item').siblings().css('background-color', 'red');
</script>

此处调用的结果是将项目 1、2、4 和 5 的背景设置为红色。 设置为红色背景。由于我们未应用选择器表达式，所有同胞元素很自然地成为了对象的一部分。如果已应用选择器，则只会包含四个列表中的匹配的项目。

当我们打算找到 DOM 树的特定层级上的所有元素时，原始元素不包含在同胞元素中，记住一点很重要。

查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：

$("p").siblings(".selected")




二、eq

定义和用法

<script type="text/javascript">
 
$(document).ready(function(){
    $("p:eq(1)").css("background-color","#B2E0FF");
});
 
</script> 

<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。

经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素（如上面的例子）。

三、off

定义和用法

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法

$(selector).off(event,selector,function(eventObj),map)

四、index

定义和用法

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注释：如果未找到元素，index() 将返回 -1。

实列：

获得第一个 p 元素的名称和值：

<script type="text/javascript">
$(document).ready(function(){
  $("li").click(function(){
    alert($(this).index());
  });
});
</script>
<p>点击列表项可获得其相对于同胞元素的 index 位置：</p>
<ul>
<li>Coffee</li>   0
<li>Milk</li>       1
<li>Soda</li>     2
</ul>

元素的 index，相对于选择器

获得元素相对于选择器的 index 位置。

该元素可以通过 DOM 元素或 jQuery 选择器来指定。

语法

$(selector).index(element)

五、delegate

定义和用法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("button","click",function(){
    $("p").slideToggle();
  });
});
</script>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

效果如下：

点击后：