溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery快速高效制作網(wǎng)頁(yè)交互特效

發(fā)布時(shí)間：2020-08-23 13:53:48 來(lái)源：腳本之家 閱讀：186 作者：sxyy 欄目：web開發(fā)

jQuery中的事件

1，基礎(chǔ)事件

基礎(chǔ)事件又包括 

a：window事件

在javaScript中的window事件又  window onload = fn(); 和onclick  在jQuery中常用的事件有文檔就緒事件，對(duì)應(yīng)的方法ready()

$(document).ready(fn(){}); 

b：鼠標(biāo)事件

常用的鼠標(biāo)事件有：

      click(fn);         單機(jī)鼠標(biāo)時(shí)發(fā)生，fn表示綁定的函數(shù)

      keydown(fn);  鼠標(biāo)指針移過(guò)時(shí)，fn表示綁定函數(shù)

      blur(fn)          鼠標(biāo)指針移出時(shí)，失去焦點(diǎn)時(shí)，所執(zhí)行的函數(shù)

      比如  最常見(jiàn)的光棒事件

$(function () {
   //獲取所有的li元素
   $("li").mouseover(function () {
    $(this).css("background", "pink");
   });
   //注冊(cè)事件
   $("li").mouseout(function () {
    $(this).css("background", "");
   });
 });
<ul>
  <li>一個(gè)示例</li>
  <li>二個(gè)示例</li>
  <li>三個(gè)示例</li>
 </ul>

 c：鍵盤事件

鍵盤事件指當(dāng)鍵盤聚焦到Web瀏覽器時(shí)，用戶每次按下或者釋放按鍵時(shí)所產(chǎn)生的事件常用的鍵盤有keydown(),keyup(),keypress()

//鍵盤事件
  $("input").keyup(function(event) {
   var s =event.keyCode;
   alert(s);
//打印鍵盤的keycode值
}); <h3>鍵盤事件</h3><br>  --<br>  <body>
 <input /><span id="first">注意用詞</span>  <br>  --

d：表單事件

表單事件是所有事件中最穩(wěn)定，且支持最穩(wěn)定的事件之一，除了用戶選取單選框，復(fù)選框等產(chǎn)生的click事件外，當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)focus事件，失去焦點(diǎn)時(shí)觸發(fā)blur事件

//表單事件
   $("input").focus(function () {
    $("#first").addClass("a");
   })
   $("input").blur(function () {
    $("#first").removeClass("a");
   });
  });
---
 <h3>鍵盤事件</h3>
 <input /><span id="first">注意用詞</span>

e：綁定事件

綁定事件是指為匹配到的元素同事綁定一個(gè)或者多個(gè)事件，使用bind()方法

語(yǔ)法：bind(type,[data],,fn)

對(duì)應(yīng)的unbind() 解除事件

例如：為一個(gè)無(wú)序列表綁定光棒效果

$("li").bind({
    "mousemove": function () {
     $(this).css("background", "blue");
    },  //鼠標(biāo)移過(guò) 獲得焦點(diǎn)
    "mouseout": function () {
     $(this).css("background", "");
    }, //鼠標(biāo)移出失去焦點(diǎn)
    click: function () {
     alert(this.innerHTML);
    }
   }).unbind("mouseout mousemove");
      //解除事件
  });
--<body>
 <ul>
  <li>一個(gè)示例</li>
  <li>二個(gè)示例</li>
  <li>三個(gè)示例</li>
 </ul>
 </body>

2，復(fù)合事件

hover()和toggle()方法，這兩個(gè)方法和 ready()方法相似都是jQuery自定義的方法。

a:hover()方法用于模擬鼠標(biāo)指針懸停事件

<script src="js/jQuery1.11.1.js" type="text/javascript"></script>
<script>
 $(function () {
  $("#menu").hover(function () {     //鼠標(biāo)懸停事件 改變?cè)豤ss樣式
   $("#myacc").css("display", "block");
  }, function () {
   $("#myacc").css("display", "none");
  });
 });
</script>

通常用在網(wǎng)站導(dǎo)航欄下拉的隱藏效果，相當(dāng)于鼠標(biāo)事件的mouseover 和mouseout事件

b:toggle()方法 在1.9以上的jquery都刪除了這個(gè)事件。

toggle()方法相當(dāng)于鼠標(biāo)連續(xù)單擊事件，執(zhí)行的fn

$(function () {
   $("#one").toggle(
    function () {
     $("#two").show(); //控制元素顯示
    }, function () {
     $("#two").hide(); //控制元素隱藏
    }
    );
  });
 //產(chǎn)生類似于 導(dǎo)航欄的單擊出現(xiàn)再次單擊關(guān)閉的效果-

3，

a：控制 元素的顯示與隱藏

在jQuery中，可以使用【show() hide()】控制元素的的顯示和隱藏

屬性：【speed】[callback]

speed的默認(rèn)的值有slow(0.6s) normal(0.4s) fast(0.2s)

前者控制元素顯示或隱藏的速度，后者是指元素執(zhí)行完方法后callback的自定義函數(shù)

----
$(function () {
   $("body").click(function () {
    $("img").show("slow");   //單擊窗體 一圖片以slow方式顯現(xiàn)出來(lái)
   });
  });
----
--省略部分代碼
<img src="1.jpg">

b:相似的方法還有控制元素的淡入淡出分別對(duì)應(yīng)fadein()和fadeout()

對(duì)應(yīng)語(yǔ)法是$(selector).fadein([speed],[callback])   --以淡出的方法控制元素

$(selector).fadeout([speed],[callback])--控制元素淡出

c：改變?cè)馗叨鹊姆椒?/strong>

slideDown(),slideUp(),

語(yǔ)法類似

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持億速云！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手