您好,登錄后才能下訂單哦!
1:hover() 用于模擬光標(biāo)懸停事件,hover(enter,leave),當(dāng)光標(biāo)移動到元素上時會觸發(fā)第一個函數(shù)enter,當(dāng)光標(biāo)移除元素時觸發(fā)第二個函數(shù)enter。 |
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="/TestJquery/jq/jquery-1.3.2.js"></script> <title>Insert title here</title> <style type="text/css"> .head{ color:red; font-size:30px; font-weight:bold; background-color: yellow; } .content{ display: none; } </style> </head> <body> <div id="panel"> <h6 class="head">什么事Jquery</h6> <div class="content"> jaueryshi是一個優(yōu)秀的javascript庫..... </div> </div> </body> <script type="text/javascript"> $(function(){ $("#panel h6.head").hover(function(){ $(this).next("div.content").show(); },function(){ $(this).next("div.content").hide(); }); }); </script> </html>
*(以上的hover函數(shù)寫法其實等價于鼠標(biāo)獲取焦點和取消焦點事件,如果想把這種效果改成鼠標(biāo)點擊展現(xiàn)的話把mouseover和mouseout事件換成click就OK了。) |
$(function(){ $("#panel h6.head").bind("mouseover",function(){ $(this).next("div.content").show(); }); $("#panel h6.head").bind("mouseout",function(){ $(this).next("div.content").hide(); }); });
2:toggle() 用于模擬鼠標(biāo)連續(xù)單擊事件。toggle(f1,f2,.....),第一次單擊時觸發(fā)第一個函數(shù)f1,第二次單擊時觸發(fā)第二個函數(shù)f2以此類推直到最后一個。隨后的每次單擊事件循環(huán)這一過程。 |
$(function(){ $("#panel h6.head").toggle(function(){ $(this).next("div.content").show(); },function(){ $(this).next("div.content").hide(); }); });
*(toggle()還有另外一個作用就是切換元素的可見狀態(tài)。上面的代碼等同于) |
$(function(){ $("#panel h6.head").toggle(function(){ $(this).next("div.content").toggle(); },function(){ $(this).next("div.content").toggle(); }); });
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。