JQuery学习22篇(事件委托)

最新推荐文章于 2022-09-27 13:35:11 发布

程宇寒

最新推荐文章于 2022-09-27 13:35:11 发布

阅读量160

点赞数

文章标签： JQuery javascript js 事件委托前端开发

本文链接：https://blog.csdn.net/czh500/article/details/103691764

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习22篇(事件委托)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
input[type=button] {
width: 200px;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习22篇(事件委托)</h3>
	<input id="input1" type="button" value="添加一个li">
	<input id="input2" type="button" value="off()是on()的反向操作" onclick="ul_off();">
	<input id="input3" type="button" value="off()是on()的反向" onclick="ul2_off();">
	<ul id="nameList">
	<li>令狐冲</li>
	<li>韦小宝</li>
	<li>张无忌</li>
	</ul>
	<ul id="seasonList">
	<li>春</li>
	<li>夏</li>
	<li>秋</li>
	</ul>
	<table id="table1" style="width: 50%;">
		<tr>
			<td>任盈盈</td>
			<td>小龙女</td>
			<td>周芷若</td>
			<td>赵敏</td>
		</tr>
		<tr>
			<td>小郡主沐剑屏</td>
			<td>建宁公主</td>
			<td>阿珂</td>
			<td>双儿</td>
		</tr>
	</table>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#nameList').on('click', 'li', function(){
	console.log($(this).html(), this.innerHTML);
});

function ul_off(){
	$('#nameList').off('click','li');
}

$('#input1').click(function() {
	$('#nameList').append('<li>杨过</li>');
	$('#nameList').append('<li>乔峰</li><li>虚竹</li><li>段誉</li>');
});

function fn1(){
	console.log($(this).html(), this.innerHTML);
}

var fn2 = function(){
	console.log('*****' + $(this).html(), '*****' + this.innerHTML);
}

$('#seasonList').on('click', 'li', fn1);
$('#seasonList').on('click', 'li', fn2);

function ul2_off(){
// 	$('#seasonList').off();
// 	$('#seasonList').off('click');
	$('#seasonList').off('click', '**');
}

//颜色数组
var colors = ['Tomato', 'SeaGreen', 'Gray', 'RoyalBlue', 'red', 'Yellow'];
console.log(colors);
//随机数
console.log(Math.random(), parseInt(10 * Math.random()), Math.floor(Math.random() * 10 + 1));
console.log(colors.length, parseInt(colors.length * Math.random()));

$('#table1').on('mouseover', 'td', function(){
	console.log(this, this.innerHTML, $(this), $(this).html());
// 	$(this).css('background' , 'Tomato');
	var randomNumber = parseInt(colors.length * Math.random());
	console.log('随机数=' + randomNumber);
	//背景颜色设置为随机颜色
	$(this).css('background' , colors[randomNumber]);
});
</script>
</html>

程宇寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习22篇(事件委托)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JQuery学习22篇(事件委托)</title><link rel="stylesheet" type="text/css" href="inputAndDiv.css"&gt...
复制链接

扫一扫