JQuery的Bind和合成事件
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
//=========================1======================
//bind()绑定多个事件 unbind()移除所有事件
$("#mv li").bind(
{
"mouseover": function () {
$(this).css("background-color", "yellow");
}
,
"mouseout": function () {
$(this).css("background-color", "white");
}
,
"click": function () {
$(this).css("background-color", "pink");
}
});
$("#del").click(function () {
$("#mv li").unbind();
});
//只执行一次 一次性事件
$("#mv li").one("click", function () { alert("只执行一次"); });
//类似mouseover和mouseout 合成事件
$("#mv li").hover(function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "white");
});
//依次切换 红‘黄’蓝’绿 再重复 合成事件
$("#del").toggle(function () {
$(this).css("background-color", "red");
}, function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "blue");
}, function () {
$(this).css("background-color", "green");
});
//两条数据只读取最后一条
var json = { "name": "tao", "age": 28, "name": "ying", "age": 28 };
$("#ee").bind("click", json, function (e) {
alert(e.data.name + "======" + e.data.age);
//阻止后续内容进行 ★有疑问？
e.preventDefault();
//停止事件冒泡 ★有疑问？
e.stopPropagation();
alert("卧槽 咋只出现一条 哈哈");
});
//事件冒泡中this和e.target不同,this监听事件的对象,e.target触发事件的对象 Dom对象。
$("table,tr,td").click(function (e) {
//事件冒泡中this和e.target不同
//this监听事件的对象
//e.target触发事件的对象 Dom对象
//alert($(this).html());
alert(e.target.innerHTML);
});
$("#btn").mousedown(function (e) {
//1鼠标左键 2滚轮 3鼠标右键
alert(e.which);
});
//altKey ctrlKey shiftKey获得 alt、ctrl、shift是否被按下 是bool值
$(document).mousemove(function (e) {
//得到鼠标箭头在文档中移动的坐标
$("#d1").text(e.pageX + "=============" + e.pageY);
//图片跟着鼠标走
$("#i1").css({ "position": "absolute", "left": e.pageX, "top": e.pageY });
});
//动态生成一个层，失去焦点时移除
$("#btn").hover(function (e) {
var $div = $("<div id='detail'>详细信息</div>");
$div.css({ "left": e.pageX, "top": e.pageY,"background-color":"green","position":"absolute"});
$("body").append($div);
}, function () {
var $div = $("#detail");
if ($div) {
$div.remove();
}
});
//显示隐藏的时间
$("#btn1").click(function () {
$("#d1").show("slow");
});
$("#btn2").click(function () {
$("#d1").hide(2000);
});
$("#btn3").click(function () {
$("#d1").toggle(2000);
});
$("#btn4").click(function () {
//按下停止时，值已经改变。停止的只是效果
$("#d1").stop();
});
$("#btn5").click(function () {
$("#d1").slideUp(2000);
});
$("#btn6").click(function () {
$("#d1").slideDown(2000);
});
$("#btn7").click(function () {
$("#d1").slideToggle(2000);
});
$("#btn8").click(function () {
$("#d1").fadeIn(2000);
});
$("#btn9").click(function () {
$("#d1").fadeOut(2000);
});
$("#btn10").click(function () {
$("#d1").fadeToggle(2000);
});
$("#btn11").click(function () {
$("#d1").fadeTo(2000,0.5);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<%--1--%><div>
<input type="button" value="赵颖" />
<ul id="mv">
<li>西施</li>
<li>貂蝉</li>
<li>苍井空</li>
<li>昭君</li>
<li>赵颖</li>
<li>玉环</li>
</ul>
<input type="button" value="移除" id="del" />
<input type="button" value="演示e的用法" id="ee" />
</div>
<table>
<tr>
<td>
<p>ppppppppppppppppppp</p>
</td>
</tr>
</table>
<input type="button" id="btn" value="点击" />
<div id="d1">1111111111111111111111111111111111111</div>
<img id="i1" src="Images/yy.jpg" />
<input type="button" id="btn1" value="点击1(显示)" />
<input type="button" id="btn2" value="点击2(隐藏)" />
<input type="button" id="btn3" value="点击3(显示隐藏交替)" />
<input type="button" id="btn4" value="点击4(停止)" />
<input type="button" id="btn5" value="点击5(向上收起)" />
<input type="button" id="btn6" value="点击6(向下展开)" />
<input type="button" id="btn7" value="点击7(上下收起展开)" />
<input type="button" id="btn8" value="点击8(渐渐显示)" />
<input type="button" id="btn9" value="点击9(渐渐隐藏)" />
<input type="button" id="btn10" value="点击10(渐渐显示隐藏)" />
<input type="button" id="btn11" value="点击11(2秒内透明由1变为0.5)" />
</form>
</body>
</html>
