jq中的delegate和each方法

xiaoxiao2021-02-28  101

今天偶然见到这两个方法,有点忘记所以上网查了下,再加上自己总结下今天分享给大家。 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。 delegate()他是事件绑定的一种,其实事件绑定有很多,比如说click,bind,on。 需要注意的是delegate()是指定元素的子元素添加一个多个事件。 基本的格式为 被选的父元素。delegate()(“选择器”,“事件”,“函数”其中函数和选择器必须填) 同样的 于此undelegate是事件的解绑,解绑父元素的子元素的方法。 比如说$(“ul”).undelegate() 解绑ul所有子元素事件。 我们看下例子:

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

通过例子,大家可以去试一下,深刻体会下delegate的用法。

each() 方法规定为每个匹配元素规定运行的函数。 提示:返回 false 可用于及早停止循环。 我理解以每一个匹配元素上下执行一个函数 each(index下标,DOM节点遍历每个标签当前遍历节点) $(selector).each(function(index,element)) function(index,element) 必需。为每个匹配元素规定运行的函数。 index - 选择器的 index 位置 element - 当前的元素(也可使用 “this” 选择器)

请看例子:

<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); }); </script> </head> <body> <button>输出每个列表项的值</button> <ul> <li>Coffee</li> <li>Milk</li> <li>Soda</li> </ul> </body> </html>

他会弹3次框,每次都是li里的内容,也就是他会遍历每个li节点。请大家慢慢去体会。

转载请注明原文地址: https://www.6miu.com/read-82564.html

最新回复(0)