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

更新時間：2017年02月24日 09:50:24 投稿：sxyy

本文主要介紹了使用jQuery快速高效制作網(wǎng)頁交互特效的方法，具有很好的參考價值，下面跟著小編一起來看下吧

jQuery中的事件

1，基礎(chǔ)事件

基礎(chǔ)事件又包括

a：window事件

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

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

b：鼠標(biāo)事件

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

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

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

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

比如最常見的光棒事件

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

c：鍵盤事件

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

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

d：表單事件

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

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

e：綁定事件

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

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

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

例如：為一個無序列表綁定光棒效果

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

2，復(fù)合事件

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

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

<script src="js/jQuery1.11.1.js" type="text/javascript"></script>
<script>
 $(function () {
  $("#menu").hover(function () {     //鼠標(biāo)懸停事件 改變元素css樣式
   $("#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都刪除了這個事件。

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)出來
   });
  });
----
--省略部分代碼
<img src="1.jpg">

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

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

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

c：改變元素高度的方法

slideDown(),slideUp(),

語法類似

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: