本文主要是介绍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() 方法。
语法
定义和用法
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>
效果如下:
点击后:
这篇关于jQuery 中的 siblings 、eq、off、index、delegate的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!