jQuery-事件命名空间

最新推荐文章于 2025-10-09 04:53:57 发布

原创最新推荐文章于 2025-10-09 04:53:57 发布 · 412 阅读

CC 4.0 BY-SA版权

文章标签：

43 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍了一个使用jQuery库实现DOM元素操作的示例项目。通过简单的HTML页面与交互按钮，演示了如何为不同类别的列表项（li）绑定点击事件，并根据元素的奇偶性改变其颜色。此外还提供了触发所有元素事件的功能。

	<!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>