<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>合成事件</title> <script src="../js/jquery-3.3.1.js"></script> <style> .big{ width:250px; height:250px; } </style> <script> $(function(){ //函数内直接写this代表触发此函数的节点 $("img").hover( function(){ //console.log(this) // $(this).width("250px").height("250px"); //$(this).css("width","250px").css("height","250px") $(this).addClass("big"); }, function(){ // $(this).width("218px").height("218px"); //$(this).css("width","218px").css("height","218px") $(this).removeClass("big"); } ); $("input:button").click(function(){ //对图片触发切换事件 $("img").toggle();//让元素在显示和隐藏间切换 }); //模拟按钮的单击事件 $("input:button").trigger("click"); }); </script> </head> <body> <input type="button" value="切换"/> <p> <img src="../images/1.jpg"/> <img src="../images/2.jpg"/> <img src="../images/3.jpg"/> </p> </body> </html>
