<script type="text/javascript">
$(function() {
//为 <span> 元素绑定 click 事件
$("span").click(function() {
$("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
event.stopPropagation(); //阻止 <span> 的 click 事件冒泡
//event.preventDefault(); //阻止提交按钮的默认行为(提交表单)
//return false;
});
//为 Id 为 content 的 <div> 元素绑定 click 事件
$("#content").click(function() {
$("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
});
//为 <body> 元素绑定 click 事件
$("body").click(function() {
$("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
});
});
</script><div id="content">
外层div元素<br />
<span style="background: silver;">内层span元素</span><br />
外层div元素
</div><br />
<div id="msg"></div>
<script type="text/javascript">
$(function(){
$("button").bind({
click: function () { $("p").slideToggle(); },
mouseover: function () { $("p").css("color", "red"); },
mouseout: function () { $("p").css("color", "#FFFFFF"); }
});$("span").bind("mouseenter click",function () {
$(this).css("color","red");
});
event.preventDefault()
})
</script><span>帮助</span>
<p>This is a paragraph.</p>
<button>请点击这里</button>