jQuery-事件命名空间

最新推荐文章于 2020-12-29 10:27:44 发布

AsaZyf

最新推荐文章于 2020-12-29 10:27:44 发布

阅读量353

点赞数

分类专栏：实用文章标签： jQuery 事件命名空间

本文链接：https://blog.csdn.net/AsaZyf/article/details/80901345

版权

43 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>2-15</title>
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	</head>
	<body>
	<ul>
	<li class="item1">新闻列表1</li>
	<li class="item2">新闻列表2</li>
	<li class="item3">新闻列表3</li>
	<li class="item4">新闻列表4</li>
	<li class="item5">新闻列表5</li>
	<li class="item6">新闻列表6</li>
	<li class="item7">新闻列表7</li>
	</ul>
	<button type="button" id="even">点击偶数</button>
	<button type="button" id="odd">点击奇数</button>
	<button type="button" id="all">全部点击</button>
	<script>
	//程序从0开始，所以程序里的奇数反映到页面上是偶数
	$("li:odd").on("click.even",function(){
	$(this).css("color","blue")
	})
	$("li:even").on("click.odd",function(){
	$(this).css("color","red")
	})
	$("#even").click(function(){
	//trigger() 方法触发被选元素的指定事件类型
	$("li").trigger("click.even")
	})
	$("#odd").click(function(){
	$("li").trigger("click.odd")
	})
	//全部触发
	$("#all").click(function(){
	$("li").click()
	})
	</script>
	</body>
	</html>