jQuery事件相关方法

最新推荐文章于 2024-08-30 08:42:08 发布

原创最新推荐文章于 2024-08-30 08:42:08 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #Ajax #JavaScript #ViewUI

jQuery 专栏收录该内容

11 篇文章

订阅专栏

jQuery事件相关方法

<body>
		<input id="test1" type="button" value="单击我" />
		<br />
		<input id="test2" type="button" value="切换右边复选框的勾选状态" />
		<input id="check" type="checkbox" value="" />
		<input id="check2" type="checkbox" value="" />
		<br />
		<input id="test3" type="button" value="绑定toggle的按钮" />
		<br />
		<div id="test4">
			鼠标悬停、移除将触发指定函数
		</div>
		<script type="text/javascript">
			//指定页面加载完成时执行指定函数
			$(document).ready(function() {
				alert("页面加载完成！");
			});
			//为id为test1的元素的click事件绑定事件处理函数
			$("#test1").bind(
					"click",
					{
						book : "Ajax"
					},
					function(event) {
						alert("id为test1的按钮被单击!\n" + "事件为：" + event
								+ "\n事件上data的book属性为：" + event.data.book);
					});
			//为id为test2的元素的click事件绑定事件处理函数
			$("#test2").bind("click", function(event) {
				//使用代码触发id为check的元素的单击事件，而且执行默认行为
					$("#check").trigger("click");
					$("#check2").trigger("click");
				});
			//使用toggle为id为test3的元素绑定3个事件处理函数。
			$("#test3").toggle(function(event) {
				alert("3n次被单击" + event);
			}, function(event) {
				alert("3n + 1次被单击");
			}, function(event) {
				alert("3n + 2次被单击");
			});
			//使用hover为id为test4的元素绑定2个事件处理函数
			//当鼠标移入该元素时触发第一个函数，移出该元素时触发第二个函数
			$("#test4").css("border", "1px solid black").css("background-color",
					"#cccccc").width(200).height(80).hover(function(event) {
				alert("鼠标移入该元素之内！");
			}, function() {
				alert("鼠标移出该元素！");
			});
		</script>
	</body>