jQuery基礎知識點（下）

　　在實際開發中，jQuery的實踐性很是強大。上一篇本人已經整理出了一部分基礎知識點，該文便是對以上的補充和擴展。

一、表單值的操做

1 //獲取文本框的值
2 //txt.value
3   var val = $("#txt").val(); //沒有參數表示獲取值
4 //設置文本框的值
5 //txt.value = "123123";
6   $("#txt").val("這是val設置的值");  // 有參數表示設置值

二、屬性操做

 1 //　　設置屬性
 2 $("#btnSetAttr").click(function () {
 3    // getAttribute
 4           // 用法跟 css 方法徹底相同
 5    // $("a").attr("title", "傳智播客");  //設置單個屬性
 6       $("a").attr({                   //設置多個屬性
 7           "title": "傳智播客",
 8           "data-abc": "自定義屬性"
 9        });
10 });

1 //　　獲取屬性
2 $("#btnGetAttr").click(function () {
3     /*var a = $("a").attr("title");
4       console.log(a);*/
5     // $("a").attr("width");
6 });

三、特性操做

1 // 設置選中/不選中
2     // input.checked = true;
3     // input.checked = flase;
4 $(id/class名).attr("checked",布爾值);
5 
6      // :checkbox      做用：獲取到全部複選框

【注意】 checked、selected、disabled要使用.prop()方法。

      prop方法一般用來影響DOM元素的動態狀態，而不是改變的HTML屬性。

四、操做文本內容

 1 //    獲取內容
 2 // 文本內容：js -> innerText / textContent
 3    $("button:eq(0)").click(function () {
 4        // text() 做用：獲取或者是設置內容
 5        var txt = $("div").text();
 6        alert(txt);
 7    });
 8 //     設置文本內容
 9      $("button:eq(1)").click(function () {
10          // 設置內容，參數表示 要設置的內容
11            $("div").text("這是動態設置的內容");
12             });
13 //     獲取HTML內容
14      $("button:eq(2)").click(function () {
15           alert($("div").html());
16      });

五、高度和寬度操做

 1 //     獲取高度
 2             $("#getHeight").click(function () {
 3             /*  var h = $("div").css("height");
 4                 console.log(h); // 200px 字符串   */
 5             /*  var h = $("div").height(); // 數值
 6                 h *= 2;
 7                 console.log(h);        */
 8             });
 9 //    設置高度
10             $("#setHeight").click(function () {
11              // 參數：數值類型
12                 // $("div").height(500);
13              // 參數：字符串
14                 // $("div").height("500");
15                 $("div").height("500px");
16             });

六、座標值操做

 1 //     獲取元素的座標值
 2   $("button:eq(0)").click(function () {
 3      // 不傳參數表示獲取
 4      var offset = $("div").offset();
 5      console.log(offset);   // 返回值：{top: 29, left: 8}
 6             });
 7 //     設置元素的座標值
 8    $("button:eq(1)").click(function () {
 9      // 注意：設置座標值的時候，若是這個元素沒有定位或者定位爲默認值 static
10      // 那麼offset() 會把這個元素的定位設置爲：position: relative;
11        $("div").offset({
12                    top: 200,
13                     left: 400
14        });
15    });

七、bind事件綁定

1 $("button").bind("click mouseenter", function() {});
2            // 第一個參數：表示事件的名稱
3            // 第二個參數：表示事件處理函數
4 //    綁定多個事件
5 $("button").bind({
6     click: function () {}, 
7     mouseenter: function () {}
8 });
9 //     缺點：沒法給動態建立出來的元素綁定事件    

八、delegate 代理綁定事件

1 // 第一個參數：表示 一個選擇器，實際要觸發事件的元素
2 // 第二個參數：表示要觸發的事件名稱
3 // 第三個參數：表示 事件處理函數
4      $("div").delegate("p", "click", function() {
5           var txt  = $(this).text();   // 獲取當前元素的內容
6       });

【說明】

①事件是何時綁定的？

——頁面加載就綁定了全部的事件

②事件是何時執行的？

——單擊事件：單擊；    mouseenter：鼠標移上來的

九、on()綁定事件

1   // 第一個參數：表示要綁定的事件名稱
2   // 第二個參數：表示要觸發事件的元素（selector）
3   // 第三個參數：表示事件處理函數
4        $("div").on("click", ".cls", function () {
5           var txt = $(this).text(); // 獲取當前元素的內容
6        });

十、事件解綁

     1）使用un- 解綁

1     $("button:eq(1)").bind("click", function () {
2      // 解除第一個按鈕綁定的事件
3      // 不傳參數，表示全部的事件都解綁了
4      // 穿參數，表示解綁 事件的名稱
5       //$("button").eq(0).unbind("click mouseenter");
6      // $("button").eq(0).undelegate();
7 });
8 // 注意：解綁事件的時候 是解除的綁定事件的元素

      2）使用off 解綁

 1 $("#btnOff").on("click", function () {
 2   // 解除第一個按鈕的事件綁定
 3   // 參數：表示要解除事件的名稱
 4   // 若是是解除多個事件，只須要把多個事件名稱以空格分割 做爲一個字符串
 5        $("#btn").off("click mouseenter");
 6   // 若是不穿參數表示把全部的事件都解除綁定
 7        $("div").off();
 8    // 解除經過 代理 的方式綁定的事件
 9    // 第一個參數表示：要解除事件的名稱
10    // 第二個參數表示：只解除經過代理方式綁定的事件
11         $("div").off("click", "**");
12  
13 });

十一、事件觸發

     1）哪些屬於瀏覽器的默認行爲呢？

        ① a 標籤的跳轉

        ② 文本框得到焦點

1 // 觸發文本框得到焦點事件
2 // trigger() 做用：觸發事件，同時觸發了瀏覽器的默認行爲
3    $("#txt").trigger("focus");    // 參數：表示觸發事件的類型
4 // triggerHandler() 做用：只觸發事件，不觸瀏覽器的發默認行爲

   2）

 1  $(function () {
 2      // target 表示觸發事件的元素 並不必定是 this
 3       // currentTarget === this
 4      $("button").on("click", function (event) {
 5           console.log(event);
 6       });
 7       $("div").on("click", function () {
 8            console.log(event);
 9        });
10  // -----------------------------------------------
11        $("div").on("click", "button", function () {
12            // 此時， target爲觸發事件的按鈕
13            // currentTarget 爲綁定事件的元素
14                 console.log(event);
15        });
16 });

十二、事件對象

    1）阻止瀏覽器的默認行爲

e.preventDefault();
    2）阻止事件冒泡
e.stopPropagation();

1三、鏈式編程原理

第一步：給出一個構造函數 

第二步：建立一個新的對象

第三步：調用這個構造函數中的方法

1 // 鏈式編程代碼示例
2 $(「li」).parent(「ul」).parent(「div」).siblings(「div」).children(「div」).html(「內容」);
3 鏈式編程原理：return this;
4 一般狀況下，只有設置操做才能把鏈式編程延續下去。由於獲取操做的時候，會返回獲取到的相應的值，沒法返回 this。
5 end(); // 結束當前鏈最近的一次過濾操做，而且返回匹配元素以前的一次狀態。

1四、隱式迭代

1 // 設置操做
2 $(「div」).css(「color」, 「red」);
3 // 獲取操做
4 $(「div」).css(「color」); // 返回第一個元素的值
5 // 隱式迭代的意思是：在方法的內部會爲匹配到的全部元素進行循環遍歷，執行相應的方法；而不用咱們再進行循環，簡化咱們的操做，方便咱們調用。
6 // 若是獲取的是多元素的值，大部分狀況下返回的是第一個元素的值。

1五、each方法

——有了隱式迭代，爲何還要使用each函數遍歷？

A：大部分狀況下是不須要使用each方法的，由於jQuery的隱式迭代特性；若是要對每一個元素作不一樣的處理，這時候就用到了each方法

 1    // each() 做用：進行遍歷
 2             // 參數：是一個匿名函數
 3             $("li").each(function (index, ele) {
 4                 // index: 索引號
 5                 // ele : 表示元素自己 可是它是一個dom對象
 6                 // index : 0 1 2 3 .... 9
 7                 var opacity = (index + 1) / 10;
 8                 // ele.style.opacity = opacity;
 9                 $(ele).css("opacity", opacity);
10             });

1六、多庫共存

——jQuery佔用了$ 和jQuery這兩個變量。

　　當在同一個頁面中引用了jQuery這個js庫，而且引用的其餘庫（或者其餘版本的jQuery庫）中也用到了$或者jQuery這兩個變量，那麼，要保證每一個庫都能正常使用，這時候就有了多庫共存的問題。

1 var j = $.noConflict();
2 // noConflict() 做用：讓jQuery釋放對$的控制權，讓其餘庫可以使用$符號，達到多庫共存的目的。此後，只能使用jQuery來調用jQuery提供的方法

1七、插件 和 製做 

    1）插件演示

第一步：把jQuery文件引進來

第二步：引jQuery的插件

    2）第三方插件

1 jQuery.color.js
2 // animate()自定義動畫：不支持背景的動畫效果
3 // animate動畫支持的屬性列表

   3）如何建立jQuery插件

http://learn.jquery.com/plugins/basic-plugin-creation/

1 // 全局jQuery函數擴展方法
2 $.pluginName = function() {};
3 // jQuery對象擴展方法
4 $.fn. pluginName = function() {};

1八、jQueryUI的基本使用

    1）使用場景：網站的管理後臺

    2）jQuery專指由jQuery官方維護的UI（用戶接口）方向的插件

官方API：http://api.jqueryui.com/category/all/

其餘教程：jQueryUI教程

    3）基本使用

1 <!--第一步：引樣式文件-->
2 <link rel="stylesheet" href="plugins/jquery-ui.css"/>
3 <!--第二步：引jQuery文件-->
4 <script src="jquery-1.12.2.js"></script>
5 <!--第三步：引jQueryUI的文件-->
6 <script src="plugins/jquery-ui.js"></script>