JQuery速成大法

標籤：ons   自訂   透明   選中   linear   back   透明度   ide   near   

什麼是JQuery呢，很多都是只聞其名。

jQuery是一個快速、簡潔的JavaScript架構，是一個優秀的JavaScript程式碼程式庫。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，最佳化HTML文檔操作、事件處理、動畫設計和Ajax互動。

要用JQuery，首先要有一定的JS基礎，否則根本看不懂這是個嘛玩意。有了JS基礎後，就會發現，哇，JS好複雜，JQuery好簡單粗暴

下面就讓我們來看一下如何來用JQuery

【Jquery文法】
         1.通過jQuery("選取器").action();通過選取器呼叫事件函數。
             但JQuery中jQuery可以用$符代替，$("選取器").action();
             ①選取器可以直接使用CSS選取器，選中元素
             ②action表示對元素執行的操作

ps:各種選取器的用法可以自己去查協助文檔
         2.文檔就緒函數：防止了文檔在完全載入(就緒)之前運行JQuery代碼
             $(document).ready(function(){
                   JQuery代碼
               });
           $(function(){})//這是文檔就緒函數簡寫方式PS

看到文檔就緒函數，不免就會想到JS中的window.onload。這裡我們來說一下它們倆的區別

①.window.onload需在網頁所有內容載入完成後執行，包括圖片音頻等。 而文檔就緒函數只需要在網頁DOM結構載入以後便可執行。

②.window.onload只能寫一個，寫多個只會執行最後一個。 文檔就緒函數，可以寫多個，也不會被覆蓋。

當然，原生DOM對可以與JQuery對象可以相互轉化

①原生DOM對象轉JQuery對象： $(DOM對象)；
            varp=document.getElementById("p");
            $(P);//轉為JQuery對象
②JQuery對象轉DOM對象
         $("p").get[0]   或者  $("p")[0]
         例子：$("p").get(0).style.color="red";

當然我們一般也不會這麼幹，容易弄混了。

JQuery中的事件綁定

時間綁定的捷徑

$("button:first").click(function(){

})

 使用on進行事件綁定

①使用on進行單事件綁定

$("button").on("click",function(){

　　//this取到當前調用函數的對象

　　console.log($(this).html());

})

②使用on同時為多個事件綁定同一函數

$("button").on("mouseoverclick",function(){

　　console.log($(this).html());

})

③調用函數時傳入自訂參數

$("button").on("click",{name:"lyx"},function(event){

　　//使用event.data.屬性名稱 找到傳入的參數

　　console.log(event.data.name);

})

④使用on進行多函數多事件綁定

$("button").on({

　　click:function(){

　　console.log("click")

　　},

　　mouseover:function(){

　　console.log("mouseover")

}

})

⑤使用on進行事件委派

>>將原本應該綁定到某元素上的事件還為綁定在父元素乃至根節點上，然後委派給當前元素生效

eg:$("p").click(function({}));

$(document).on("click","p",function(){});

>>預設的綁定方式只能幫頂到頁面初始時已有的p元素，當前頁面新增p元素時。無法綁定到新元素上；

使用事件委派方式，當頁面新增元素時，可以為所有新元素繫結事件

$("button").on("click",function(){

　　varp=$("<p>44444</p>");

　　$("p").after(p);

})

$(document).on("click","p",function(){

　　alert("1");

})

這段程式中新增的P都會有alert（"1"） 事件

 

 

off取消事件綁定

1.$("p").off(); 取消所有事件

2.$().off("click"); 取消點擊事件

3.$("p").off("click mouseover")取消多個事件

4.$(document).off("click","p")取消事件委派

 

用.one綁定事件，只能執行一次

 $("button").one("click",function(){

　　alert("1");

})

 

.trigger("event")自動觸發某元素的事件

 

$("p").click(function(event,arg1,arg2){

　　alert("觸發了p的click事件"+arg1+arg2);

})

$("button").click(function(){

　　$("p").trigger("click",["haha00","hehe"]);

})

JQuery中常見的動畫效果

.show
①.不傳參：讓隱藏的元素直接顯示，不進行動畫
②傳入時間：多少毫秒之間之內完成動畫
③傳入（時間，函數）：完成動畫之後，執行回掉函數
.show()動畫執行效果：同時修改元素的寬度，高度，opacity屬性
.hide()讓顯示元素隱藏，與show()相反
.slideDown()讓隱藏元素顯示，效果為從上往下增加高度
.slideUp()讓顯示元素隱藏，效果，從下往上減小高度
.slideToggle()讓現實的隱藏，讓隱藏的顯示
.fadeOut():讓顯示元素隱藏，淡出
.fadein();讓隱藏元素顯示，淡入
.fadeToggle();讓現實的隱藏，讓隱藏的顯示，淡入淡出
.fadeTo(時間，透明度，函數)；同.fadeToggle()，但多了透明度參數，可以指定顯示的最終透明度
.animate({最終樣式屬性索引值對},動畫時間，動畫效果"linear""swing",回掉函數)   自訂動畫

    p{
               width: 0px;
               height: 100px;
               background-color: green;
               overflow:"hidden";
               /*display: none;*/
            }
            $("p").animate({
              width:"100px",
              opacity:"0.5"
               
          },3000,"linear",function(){
              alert("hello")
           })

 

 這段JQ代碼的效果是使p的寬度在3秒內從0漸層為100px，透明度由1漸層為0.5，

動畫效果完成後執行函數，alert("hello")

JQuery速成大法