JQuery切換事件

hover

漢意：盤旋。指鼠標移入移出事件。javascript

$("XXX").hover(
	function() { /*鼠標移入*/},
	function() { /*鼠標移出*/}
);

<html>
	<head>
		<meta charset="UTF-8">
		<title>hover</title>
		<style>
			li {
				color: white;
				list-style: none;
				float: left;
				width: 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版本以上已不支持）html

jQuery對象.toggle(
   function(){},  //第一次單擊時觸發
   function(){},  //第二次單擊時觸發
   function(){},  //第三次單擊時觸發
   …
);

trigger

觸發被選元素上指定的事件以及事件的默認行爲java

應用：文本框內容默認選中jquery

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