JQuery切换事件

朴灿烈づ我的快乐病毒、 2021-11-11 12:46 306阅读 0赞

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

转载于:https://www.cnblogs.com/tigerlion/p/11178745.html