关于JQuery事件绑定的范例演示

最新推荐文章于 2023-07-16 15:23:45 发布

王的蓝色大海

最新推荐文章于 2023-07-16 15:23:45 发布

阅读量113

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/m0_57150836/article/details/118579819

版权

jQuery 事件绑定按钮操作 dd元素事件解除

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<head>
		<meta charset="utf-8">
		<title>jQuery练习</title>
		<script src="js/jquery-3.2.1.js" type="text/javascript">
		</script>
	</head>
	<body>
		<dl>
			<dt>静夜思</dt>
			<dd>床前明月光</dd>
			<dd>疑是地上霜</dd>
			<dd>举头望明月</dd>
			<dd>低头思故乡</dd>
		</dl>
		<button type="button" id="btn1">事件1</button>
		<button type="button"id="btn2">事件2</button>
		<button type="button" id="btn3">事件3</button>
		<script type="text/javascript">
		//页面加载绑定的事件
			$(function(){
				//设置鼠标按下事件; 文本隐藏
				$("dd").mousedown(function(){//$("dd")通过标签获取元素
					$("dd").hide();//hide() 隐藏
				} )
				//为按钮1绑定单击事件;改变背景颜色
				$("#btn1").click(function(){//$("#btn1")通过ID获取标签元素
					$("dd").css("background","green");
				} );
				//为按钮2绑定事件;解除按钮1的绑定事件
				$("#btn2").dblclick(function(){
					$("#btn1").off("click");
				} )
				/* off()解除全部事件,off("click")解除指定的事件 */
				$("#btn3").mousedown(function(){//为按钮3绑定事件;鼠标按下
					var a=$("dd");
					a.each(function(){
						//因为通过标签获取的元素返回的是一个数组,所以要循环                            遍历;也可以不通过循环 整体设置样式
						$(this).css("color","yellow");
			/* 样式设置 通过css css("样式","样式值")设置一个样式
			   css({"样式":"样式值",":""}) 设置多个样式*/
					} )
				} )
				
			});
		</script>
	</body>

jQuery 事件绑定需要注意的是一定要通过script标签的src属性引入jQuery库

绑定事件还有另一种方法使用on 也可以绑定事件,,jQuery与JavaScript是不同的,二者如果需要混用,需要经过转换