jq中的delegate和each方法

最新推荐文章于 2024-02-05 22:26:35 发布

寸寸时光

最新推荐文章于 2024-02-05 22:26:35 发布

阅读量778

点赞数

文章标签： delegate each

本文链接：https://blog.csdn.net/wang17866603359/article/details/77773639

版权

今天偶然见到这两个方法，有点忘记所以上网查了下，再加上自己总结下今天分享给大家。
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节点。请大家慢慢去体会。

寸寸时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq中的delegate和each方法

今天偶然见到这两个方法，有点忘记所以上网查了下，再加上自己总结下今天分享给大家。 delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 delegate()他是事件绑定的一种，其实事件绑定有很多，比如说click，bind,o
复制链接

扫一扫