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

jQuery中的事件

創(chuàng)新互聯(lián)建站一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶(hù)，是我們最起碼的底線(xiàn)！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶(hù)多一個(gè)朋友！為您提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、成都網(wǎng)頁(yè)設(shè)計(jì)、成都微信小程序、成都網(wǎng)站開(kāi)發(fā)、成都網(wǎng)站制作、成都軟件開(kāi)發(fā)、重慶APP開(kāi)發(fā)公司是成都本地專(zhuān)業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來(lái)見(jiàn)證！

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：鍵盤(pán)事件

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

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

d：表單事件

表單事件是所有事件中最穩(wěn)定，且支持最穩(wěn)定的事件之一，除了用戶(hù)選取單選框，復(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>鍵盤(pán)事件</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)生類(lèi)似于 導(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ǔ)法類(lèi)似

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

名稱(chēng)欄目：jQuery快速高效制作網(wǎng)頁(yè)交互特效
分享鏈接：http://bm7419.com/article28/gipicp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、外貿(mào)建站、企業(yè)建站、標(biāo)簽優(yōu)化、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)