JQuery切换事件

JQuery切换事件

hover

汉意:盘旋。指鼠标移入移出事件。

$("XXX").hover(
	function() { /*鼠标移入*/},
	function() { /*鼠标移出*/}
);
<html>
	<head>
		<meta charset="UTF-8">
		<title>hover</title>
		<style>
			li {
				color: white;
				list-style: none;
				float: left;
				 100px;
				text-align: center;
				background-color: #e1e1e1;
			}
			a {
				font-size: 20px;
				font-weight: bold;
				text-decoration: none;
			}
			a:link {
				color: white;
			}
			a:visited {
				color: white;
			}
			.current {
				background-color: #666;
			}
		</style>

		<script src="js/jquery-3.3.1.min.js"></script>
		<script>
			$(function() {
				$("#menu li").hover(
					function() {
						//当鼠标移入#menu li元素时
						$(this).addClass("current");
					},
					function() {
						//当鼠标移出#menu li元素时
						$(this).removeClass("current");
					});
			});
		</script>
	</head>

	<body>
		<div id="menu">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">美食</a></li>
				<li><a href="#">旅游</a></li>
				<li><a href="#">酒店</a></li>
				<li><a href="#">电影</a></li>
				<li><a href="#">KTV</a></li>
				<li><a href="#">时尚</a></li>
				<li><a href="#">生活服务</a></li>
			</ul>
		</div>
	</body>
</html>

toggle

(1.9版本以上已不支持)

jQuery对象.toggle(
   function(){},  //第一次单击时触发
   function(){},  //第二次单击时触发
   function(){},  //第三次单击时触发
   …
);

trigger

触发被选元素上指定的事件以及事件的默认行为

应用:文本框内容默认选中

<html>
	<head>
		<meta charset="UTF-8">
		<title>trigger</title>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script>
			$(function() {
				// (1)文本框内容默认选中
				$("#txtName").trigger("select");
                
				// (2)*自定义事件(与 bind() 一起使用)
				$("#txtName").bind("myEvent", function(event, message1, message2) {
					// 业务:传两个参数进来,在控制台打印输出
					console.log(message1 + ',' + message2);
				}).trigger("myEvent", ["Hello", "World!"]);
			});
		</script>
	</head>
	<body>
		用户名:
		<input type="text" id="txtName" value="江流儿" />
	</body>
</html>
原文地址:https://www.cnblogs.com/tigerlion/p/11178745.html