jQuery事件绑定

最新推荐文章于 2022-01-25 02:00:30 发布

G_p8620

最新推荐文章于 2022-01-25 02:00:30 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/weixin_52233021/article/details/111566261

版权

点击事件：

js中所有的事件都是以on开头，去掉on就是jQuery中的事件名，
js中所有的功能都是以属性为主，jQuery中是函数为主。

<body>
	<button>按钮1</button>
	<div>
		今日头条：中国
	</div>
	<script src="./jquery/jquery-3.1.1.js"></script>
	
	<script type="text/javascript">
		let $btn = $('button');
		//js绑定事件
		//$btn[0].onclick = function(){}
		$btn.click(function(event){
			console.log($(this).text());
			console.log($('div').html());
			//event 事件源
			console.log(event.target);
		});
	</script>
</body>

案例：

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	ul{
		padding: 0;
		list-style: none;
	}
	ul li{
		cursor: pointer;
	}
</style>
</head>
<body>
<ul>
	<li class="title">
		<h4>电子产品</h4>
		<ul style="display: none;" onclick="stop(event)">
			<li>手机</li>
			<li>手表</li>
		</ul>
	</li >
	<li class="title">
		<h4>衣服</h4>
		<ul style="display: none;">
			<li>阿迪</li>
			<li>李宁</li>
		</ul>
	</li>
</ul>

<script src="./jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
/* 			function show(obj){
		//document.getElementsByTagName("ul");
		let ulNode = obj.getElementsByTagName("ul")[0];
		//获取到元素的display值
		if(ulNode.style.display == "none"){
			ulNode.style.display = "block";
		}else{
			ulNode.style.display = "none";
		}
	} */
	$('.title').click(function(){
		//document.getElementsByTagName("ul");
		let ulNode = this.getElementsByTagName('ul')[0];
		let $ulNode = $(ulNode);
		//获取到元素的display值
		if($ulNode.css('display') == "none"){
			$ulNode.css('display','block')
		}else{
			$ulNode.css('display','none')
		}
	})

	//阻止事件冒泡
	function stop(e){
		e.stopPropagation();
	}
	//因为元素之间是包裹关系，所以点击子元素，会向上查找对应的父元素中是否有事件，---------事件冒泡
	
</script>
</body>

焦点事件/失去焦点事件

<style type="text/css">
	input{
		background-color: white;
	}
</style>
<body>
<input type="text">

<script src="./jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
	/* //焦点事件 鼠标点击后改变颜色
	$('input').focus(function(){
		$(this).css("backgroundColor","darkorange")
	})
	//失去焦点事件 将改变的颜色变回原来的颜色
	$('input').blur(function(){
		$(this).css("backgroundColor","white");
	}) */
	
	$('input').on({
		focus:function(){
			$(this).css("backgroundColor","darkorange");
		},
		blur:function(){
				$(this).css("backgroundColor","white");
			}
	})
</script>
</body>

onchange事件

<body>
<input type="text">
<!--设置一个下拉框-->
<select name="">
	<option value="">123</option>
	<option value="">456</option>
	<option value="">789</option>
</select>
<script src="./jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$('input').change(function(){
		//得到用户输入的内容
		console.log($(this).val()); 
	})
	$('select').change(function(){
		//获取用户选择的下标
		console.log(this.selectedIndex);
	})
</script>
</body>

G_p8620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery事件绑定

点击事件：js中所有的事件都是以on开头，去掉on就是jQuery中的事件名，js中所有的功能都是以属性为主，jQuery中是函数为主。<body> <button>按钮1</button> <div> 今日头条：中国 </div> <script src="./jquery/jquery-3.1.1.js"></script> <script type="text/javascript"&g
复制链接

扫一扫