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;
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版本以上已不支持）
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>
