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