您的位置：首页 > Web前端 > JQuery

jquery event

2015-08-06 16:01 567 查看

[size=x-large][color=darkred]1.执行顺序[/color][/size]

<body>
	<input type="button" value="click me" id="mybutton"/>
</body>

<script type="text/javascript">
	/*运行顺序：jquery 1>jquery 2>window onload 2*/

	// 传统 onload 函数(加载完毕页面所有东西)
	window.onload = function(){
		alert("window onload 1");
	};
	// 覆盖之前的一个事件
	window.onload = function(){
		alert("window onload 2");
	};
	//dom结构构建完毕，就执行
	$(function(){
		alert("jquery 1");
	});
	$(document).ready(function(){
		alert("jquery 2");
	});

	/*运行顺序：b c d*/
	$(function(){
		document.getElementById("mybutton").onclick = function(){
			alert("dom a");
		};
		// 覆盖之前事件
		document.getElementById("mybutton").onclick = function(){
			alert("dom b");
		};

		// jquery 方式注册
		$("#mybutton").click(function(){
			alert("dom c");
		});
		$("#mybutton").click(function(){
			alert("dom d");
		});
	});
</script>

[size=x-large][color=darkred]2.事件绑定[/color][/size]

<body>
	<!-- 事件绑定 -->
	<input type="button" value="click me" id="mybutton"/>
	<hr/>
	<!-- 事件委派 -->
	<input type="button" value="addlink" id="addlink" />
	<div id="linklist">

	</div>
</body>

<script type="text/javascript">
	$(function(){
		// jquery 方式绑定事件 
		// 方式一
		$("#mybutton").click(function(){
			alert(1);
		});
		// 方式二 
		$("#mybutton").bind("click",function(){
			alert(2);
		});
		// 解除绑定 --- 解除所有click 绑定事件
		$("#mybutton").unbind("click");


		// 事件委派，对“后”添加的元素，实时进行绑定
		$("a").live("click",function(){
			alert("这是一个超链接");
		});

		$("#addlink").click(function(){
			// 在linklist 添加一个新的超链接
			$("#linklist").append("<a href='#'>超链接</a> ");
		});

		// 解除委派
		$("a").die("click");//alert失效
	});
</script>

[size=x-large][color=darkred]3.事件阻止[/color][/size]

<body>
	<div>zzz<a href="del?id=1" id="dellink">删除</a></div>
	<hr/>
	<p id="myp"><a id="mya" href="javascript:void(0)">我要学习</a></p>
</body>


<script type="text/javascript">
	$(function(){
		// 传统js 确认删除代码
		/*
		document.getElementById("dellink").onclick = function(event){
			// 确认框
			var isConfirm = window.confirm("真的要删除吗？");
			if(!isConfirm){
				// 用户选择了取消 
				if(event&&event.preventDefault){
					// 火狐
					event.preventDefault();// 只能用于火狐
				}else{
					// IE浏览器
					return false;
				}
			}
		};
		*/

		// jquery 默认事件阻止 
		$("#dellink").click(function(event){
			var isConfirm = window.confirm("真的要删除吗？");
			if(!isConfirm){
				event.preventDefault(); // 浏览器兼容
			}
		});

		// 注册事件
		$("#myp").click(function(){
			alert("父元素p");
		});

		$("#mya").click(function(event){
			alert("子元素a");
			// 阻止向父元素传播
			event.stopPropagation();//否则p也会执行
		});

	});
</script>

[size=x-large][color=darkred]4.单次事件，以及trigger[/color][/size]

<body>
	<!-- 事件绑定 -->
	<input type="button" value="click me" id="mybutton"/>

	<!-- 自动触发 -->
	<input type="button" value="button1" id="button1" />
	<input type="button" value="button2" id="button2" />

	<p>点击</p>
</body>

<script type="text/javascript">
	$(function(){
		// 绑定一次性事件，只能使用一次
		$("#mybutton").one("click",function(){
			alert(1);
		});

		// 自动触发
		$("#button1").click(function(){
			alert("加载服务器一组数据，进行操作...."); 
		});

		$("p").bind("myEvent", function (event, message1, message2) {
			  alert(message1 + ' ' + message2);
		});


		$("#button2").click(function(){
			// 点击按钮2，触发按钮1 的点击事件 
			$("#button1").trigger('click');

			//$("p").trigger("myEvent", ["Hello","World!"]);
		});
	});
</script>

[size=x-large][color=darkred]5.鼠标事件[/color][/size]

<body>
	<img src="${pageContext.request.contextPath }/pic/1.jpg" 
		width="150" height="100"/>
</body>

<script type="text/javascript">
	$(function(){
		// 注册事件切换
		$("img").hover(function(){
			// 悬停
			$(this).attr("width",450);
			$(this).attr("height",300);
		}, function(){
			// 移开
			$(this).attr("width",150);
			$(this).attr("height",100);
		});

		// 点击切换图片
		$("img").toggle(function(){
			$(this).attr("src","${pageContext.request.contextPath }/pic/2.jpg");
		}, function(){
			$(this).attr("src","${pageContext.request.contextPath }/pic/3.jpg");
		}, function(){
			$(this).attr("src","${pageContext.request.contextPath }/pic/4.jpg");
		}, function(){
			$(this).attr("src","${pageContext.request.contextPath }/pic/1.jpg");
		});
	});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航