toggle是点击元素来实现切换,这个可以实现实现左右移动效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="D:\test\jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").toggle( function(){ $("div").animate({marginLeft:'500px'},"slow"); },function(){ $("div").animate({marginLeft:'0px'},"slow"); } ) }) </script> </head> <body> <p>hello</p> <div>yyyyyyyyyyyyyyy</div> </body> </html>
===========================================
hover是鼠标移入移出元素来实现切换,这个可以实现背景色切换效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="D:\test\jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").hover(function(){ $("div").css("background-color","red"); },function(){ $("div").css("background-color",""); }) }) </script> </head> <body> <p>hello</p> <div style=" font-size: 24px;">hhhhhhhhhhhh</div> </body> </html>
==============================================================
each可以对元素进行遍历,以下实现隔行变色的效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="D:\test\jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hh").click(function(){ $("#uu").find("li").each(function(i){ if(i%2==0){ $(this).css("background-color","blue"); }else{ $(this).css("background-color","red"); } }) }) }) </script> </head> <body> <p id="hh" style="background-color:">嘿嘿</p> <ul id="uu"> <li>aa</li> <li>bb</li> <li>vv</li> <li>dd</li> <li>ff</li> </ul> </body> </html>