jQuery ------- 操作事件

最新推荐文章于 2020-11-07 22:54:58 发布

qq_42412646

最新推荐文章于 2020-11-07 22:54:58 发布

阅读量137

点赞数

本文链接：https://blog.csdn.net/qq_42412646/article/details/103093761

版权

<html>
	<head>
		<title>jQuery操作事件</title>
		<meta charset="UTF-8"/>
		<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
//点击事件			
			//js操作事件
			function testJs(){
				//获取对象
				var btn=document.getElementById("btn");
				//设置其onclick属性
				btn.onclick=function(){alert("这是js操作事件")};   //仅需要触发一次就可以无限次的点击触发按钮的点击事件  
			}
			function testBind(){
				//获取对象
				var btn=$("#jq");
				//利用jQuery进行事件的绑定
				btn.bind("click",function(){alert("jQuery绑定实现")});  //对onclick属性进行绑定，当触发事件后，运行后触发函数，其中click算是一个属性，所以用“”链接，而后面的函数则是内容，没用“”
				btn.bind("click",function(){alert("绑定第二个呢")});     //可以连续点击几次来在点击一次时触发几次函数
			}
			function testUnbind(){
				//获取对象
				var btn=$("#jq");
				//利用jQuery进行事件的解绑
				btn.unbind("click");       //解绑jQuery的事件，无论点击了几次
//				$("#jq").unbind("click");
			}
			function testOne(){
				//获取对象
				var btn=$("#one");
				//利用jQuery的one方法进行事件的绑定
				btn.one("click",function(){alert("jQuery利用one实现绑定")});     //只会绑定一次，当事件触发后就会失效
			}
//点击页面加载事件
			window.onload=function testLoad(){
				alert("JS方法进行页面加载");
			}
			window.onload=function testLoad(){
				alert("JS方法进行页面加载,替换了吗");       //js的操作有覆盖操作，不会连续操作
			}
			$(document).ready(alert("jQuery实现的页面操作"));
			$(document).ready(alert("jQuery实现的页面操作,这个还有吗"));   //jQuery不会进行覆盖，其全部都会显示
		</script>
	</head>
	<body>
		<h3 align="center">jQuery操作事件</h3>
		<hr />
		<input type="button" name="" id="" value="测试js操作事件" onclick="testJs()"/>   <!--先点击下面的按钮不会触发事件，其还没有onclick属性，但是当点击了这个按钮，调用了函数，给对象设置了onclick属性，再次点击下面的按钮就会触发事件-->
		<input type="button" name="" id="" value="测试jQuery绑定操作事件-bind" onclick="testBind()"/>
		<input type="button" name="" id="" value="测试jQuery解绑操作事件" onclick="testUnbind()"/>
		<input type="button" name="" id="" value="测试jQuery绑定操作事件-one" onclick="testOne()"/>
		<!--<input type="button" name="" id="" value="测试js页面加载操作事件" onclick="testLoad()"/>-->
		<hr />
		<input type="button" name="btn" id="btn" value="测试js" />  <!-- 其没有onclick操作，所以其不会有点击触发事件-->
		<input type="button" name="jq" id="jq" value="测试jQuery" />
		<input type="button" name="one" id="one" value="测试one" />
	</body>
</html>