jQuery基礎知識點（下）

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

1、表單值的操作

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

2、屬性操作

 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 });

3、特性操作

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

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

4、操作文本內容

 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      });

5、高度和寬度操作

 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             });

6、坐標值操作

 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    });

7、bind事件綁定

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

8、delegate 代理綁定事件

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

9、on()綁定事件

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

10、事件解綁

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 });

11、事件觸發

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 });

12、事件對象

13、鏈式編程原理

1 // 鏈式編程代碼示例
2 $(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“內容”);
3 鏈式編程原理：return this;
4 通常情況下，只有設置操作才能把鏈式編程延續下去。因為獲取操作的時候，會返回獲取到的相應的值，無法返回 this。
5 end(); // 結束當前鏈最近的一次過濾操作，並且返回匹配元素之前的一次狀態。

14、隱式迭代

1 // 設置操作
2 $(“div”).css(“color”, “red”);
3 // 獲取操作
4 $(“div”).css(“color”); // 返回第一個元素的值
5 // 隱式迭代的意思是：在方法的內部會為匹配到的所有元素進行迴圈遍歷，執行相應的方法；而不用我們再進行迴圈，簡化我們的操作，方便我們調用。
6 // 如果獲取的是多元素的值，大部分情況下返回的是第一個元素的值。

15、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             });

16、多庫共存

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

17、插件 和 製作 

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

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

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

18、jQueryUI的基本使用

官方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>