bind() live()delegate()one()
//$(selector).click(function(){})
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>add new paragraph</p>").insertAfter("button")
})
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>this is another paragraph</p>
<button>请点击这里</button>
</body>
</html>
//bind $(selector).bind(event,function(){}) 或 $(selector).bind({event:function(){},event:function(){},...})
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").bind("click",function(){
$(this).slideToggle();
})
$("button").click(function(){
$("<p>add new paragraph</p>").insertAfter("button")
})
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>this is another paragraph</p>
<button>请点击这里</button>
</body>
</html>
//在点击按钮后，新添加的p元素不会执行slideToggle效果
//live $(selector).live(event,function(){}) 或 $(selector).live({event:function(){},event:function(){},...})
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").live("click",function(){
$(this).slideToggle();
})
$("button").click(function(){
$("<p>add new paragraph</p>").insertAfter("button")
})
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>this is another paragraph</p>
<button>请点击这里</button>
</body>
</html>
//以上只是将bind改为live
//在点击按钮后，新添加的p元素执行slideToggle效果
//delegate $(selector).delegate(childSelector,event,date,function)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").delegate("p","click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>这是一个新段落。</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>
</body>
</html>
//通过使用 delegate() 方法，仅有 div 元素中的 p 元素会受到影响。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").bind("click",function(){
$(this).animate({fontSize:"+=6px"});
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>
</body>
</html>
//使用bind方法，每点击一次，文字就被放大一次
//one
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>
</body>
</html>
//以上只是将bind改为one，点击一次，文字被放大，再次点击，就不在放大，因此one（）的每个匹配元素只能触发一次该处理器
