jquery事件绑定

最新推荐文章于 2024-07-21 12:21:28 发布

莱布尼茨之轮

最新推荐文章于 2024-07-21 12:21:28 发布

阅读量89

点赞数

文章标签： js javascript jquery

本文链接：https://blog.csdn.net/weixin_44613328/article/details/104873438

版权

一、绑定事件的方法

HTML结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jq事件的绑定</title>
		<style type="text/css">
			#Box {
				margin: 0 auto;
				width: 330px;
				height: 330px;
				background: blue;
			}
			li:nth-child(even) {
				background: red;
			}
			li:nth-child(odd) {
				background: green;
			}
		</style>
	</head>
	<body>
		<div id="Box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</body>
</html>

1.通过on()绑定单个事件：

<script type="text/javascript">
		$(document).ready( function() {
			$('li').on('click', function(){
				console.log('触发了点击事件')
				console.log(this)//在事件处理函数中给谁绑定事件，this就指向谁。
				console.log(this.innerHTML)//原生js方式
				console.log($(this).text())//jq方式
			})
		})
		</script>

2.通过on()绑定多个事件：

$('li').on({
	click:function(){
		console.log('点击了');
	},
	mouseenter:function(){
		console.log('触发了mouseenter');
	}
})

3.直接绑定事件

$('li').click(function(){
   console.log('点击了');
})

4.进行链式操作

$('li').click(function(){
console.log('点击了');
}).mouseenter(function(){
	console.log('触发了mouseenter');
}).mouseleave(function(){
	console.log('触发了mouseleave');
})

5.解除事件

$('li').off('click')

莱布尼茨之轮

关注

0
点赞
踩
0

收藏

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

一、绑定事件的方法HTML结构：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>jq事件的绑定</title> <style type="text/css"> #Box { margin: 0 auto; ...
复制链接

扫一扫