JQuery使用

JQuery 基礎：

1. 概念： 一個JavaScript框架。簡化JS開發

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

   • JavaScript框架：本質上就是一些js文件，封裝了js的原生代碼而已

2. 快速入門

   1. 步驟：

      1. 下載JQuery

         • 目前jQuery有三個大版本：
           1.x：兼容ie678,使用最爲廣泛的，官方只做BUG維護，
           功能不再新增。因此一般項目來說，使用1.x版本就可以了，
           最終版本：1.12.4 (2016年5月20日)
           2.x：不兼容ie678，很少有人使用，官方只做BUG維護，
           功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，
           最終版本：2.2.4 (2016年5月20日)
           3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，
           一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。
           目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）
         • jquery-xxx.js 與 jquery-xxx.min.js區別：
           1. jquery-xxx.js：開發版本。給程序員看的，有良好的縮進和註釋。體積大一些
           2. jquery-xxx.min.js：生產版本。程序中使用，沒有縮進。體積小一些。程序加載更快

      2. 導入JQuery的js文件：導入min.js文件

      3. 使用
         var div1 = $("#div1");
         alert(div1.html());

3. JQuery對象和JS對象區別與轉換

   1. JQuery對象在操作時，更加方便。
   2. JQuery對象和js對象方法不通用的.
   3. 兩者相互轉換
      • jq – > js : jq對象[索引] 或者 jq對象.get(索引)
      • js – > jq : $(js對象)

4. 選擇器：篩選具有相似特徵的元素(標籤)

   1. 基本操作學習：

      1. 事件綁定
         //1.獲取b1按鈕
         $("#b1").click(function(){
         alert(“abc”);
         });

      2. 入口函數
         $(function () {

         });
         window.onload 和 $(function) 區別
         * window.onload 只能定義一次,如果定義多次，後邊的會將前邊的覆蓋掉
         * $(function)可以定義多次的。

      3. 樣式控制：css方法
         // $("#div1").css(“background-color”,“red”);
         $("#div1").css(“backgroundColor”,“pink”);

   2. 分類

      1. 基本選擇器
         1. 標籤選擇器（元素選擇器）
            • 語法： $(“html標籤名”) 獲得所有匹配標籤名稱的元素
         2. id選擇器
            • 語法： $("#id的屬性值") 獲得與指定id屬性值匹配的元素
         3. 類選擇器
            • 語法： $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
         4. 並集選擇器：
            • 語法： $(“選擇器1,選擇器2…”) 獲取多個選擇器選中的所有元素
      2. 層級選擇器
         1. 後代選擇器
            • 語法： $("A B ") 選擇A元素內部的所有B元素
         2. 子選擇器
            • 語法： $(“A > B”) 選擇A元素內部的所有B子元素
      3. 屬性選擇器
         1. 屬性名稱選擇器
            • 語法： $(“A[屬性名]”) 包含指定屬性的選擇器
         2. 屬性選擇器
            • 語法： $(“A[屬性名=‘值’]”) 包含指定屬性等於指定值的選擇器
         3. 複合屬性選擇器
            • 語法： $(“A[屬性名=‘值’][]…”) 包含多個屬性條件的選擇器
      4. 過濾選擇器
         1. 首元素選擇器
            • 語法： :first 獲得選擇的元素中的第一個元素
         2. 尾元素選擇器
            • 語法： :last 獲得選擇的元素中的最後一個元素
         3. 非元素選擇器
            • 語法： :not(selector) 不包括指定內容的元素
         4. 偶數選擇器
            • 語法： :even 偶數，從 0 開始計數
         5. 奇數選擇器
            • 語法： :odd 奇數，從 0 開始計數
         6. 等於索引選擇器
            • 語法： :eq(index) 指定索引元素
         7. 大於索引選擇器
            • 語法： :gt(index) 大於指定索引元素
         8. 小於索引選擇器
            • 語法： :lt(index) 小於指定索引元素
         9. 標題選擇器
            • 語法： :header 獲得標題（h1~h6）元素，固定寫法
      5. 表單過濾選擇器
         1. 可用元素選擇器
            • 語法： :enabled 獲得可用元素
         2. 不可用元素選擇器
            • 語法： :disabled 獲得不可用元素
         3. 選中選擇器
            • 語法： :checked 獲得單選/複選框選中的元素
         4. 選中選擇器
            • 語法： :selected 獲得下拉框選中的元素

5. DOM操作

   1. 內容操作
      1. html(): 獲取/設置元素的標籤體內容 內容 --> 內容
      2. text(): 獲取/設置元素的標籤體純文本內容 內容 --> 內容
      3. val()： 獲取/設置元素的value屬性值
   2. 屬性操作

      1. 通用屬性操作

         1. attr(): 獲取/設置元素的屬性
         2. removeAttr():刪除屬性
         3. prop():獲取/設置元素的屬性
         4. removeProp():刪除屬性
         • attr和prop區別？
           1. 如果操作的是元素的固有屬性，則建議使用prop
           2. 如果操作的是元素自定義的屬性，則建議使用attr

      2. 對class屬性操作

         1. addClass():添加class屬性值
         2. removeClass():刪除class屬性值
         3. toggleClass():切換class屬性
            • toggleClass(“one”):
              • 判斷如果元素對象上存在class=“one”，則將屬性值one刪除掉。 如果元素對象上不存在class=“one”，則添加
         4. css():
   3. CRUD操作:

      1. append():父元素將子元素追加到末尾

         • 對象1.append(對象2): 將對象2添加到對象1元素內部，並且在末尾

      2. prepend():父元素將子元素追加到開頭

         • 對象1.prepend(對象2):將對象2添加到對象1元素內部，並且在開頭

      3. appendTo():

         • 對象1.appendTo(對象2):將對象1添加到對象2內部，並且在末尾

      4. prependTo()：

         • 對象1.prependTo(對象2):將對象1添加到對象2內部，並且在開頭

      5. after():添加元素到元素後邊

         • 對象1.after(對象2)： 將對象2添加到對象1後邊。對象1和對象2是兄弟關係

      6. before():添加元素到元素前邊

         • 對象1.before(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關係

      7. insertAfter()

         • 對象1.insertAfter(對象2)：將對象2添加到對象1後邊。對象1和對象2是兄弟關係

      8. insertBefore()

         • 對象1.insertBefore(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關係

      9. remove():移除元素

         • 對象.remove():將對象刪除掉

      10. empty():清空元素的所有後代元素。

          • 對象.empty():將對象的後代元素全部清空，但是保留當前對象以及其屬性節點

JQuery 進階

1. 動畫

   1. 三種方式顯示和隱藏元素

      1. 默認顯示和隱藏方式

         1. show([speed,[easing],[fn]])

            1. 參數：
               1. speed：動畫的速度。三個預定義的值(“slow”,“normal”, “fast”)或表示動畫時長的毫秒數值(如：1000)
               2. easing：用來指定切換效果，默認是"swing"，可用參數"linear"
                  • swing：動畫執行時效果是 先慢，中間快，最後又慢
                  • linear：動畫執行時速度是勻速的
               3. fn：在動畫完成時執行的函數，每個元素執行一次。

         2. hide([speed,[easing],[fn]])

         3. toggle([speed],[easing],[fn])

      2. 滑動顯示和隱藏方式

         1. slideDown([speed],[easing],[fn])
         2. slideUp([speed,[easing],[fn]])
         3. slideToggle([speed],[easing],[fn])

      3. 淡入淡出顯示和隱藏方式

         1. fadeIn([speed],[easing],[fn])
         2. fadeOut([speed],[easing],[fn])
         3. fadeToggle([speed,[easing],[fn]])

2. 遍歷

   1. js的遍歷方式
      • for(初始化值;循環結束條件;步長)
   2. jq的遍歷方式
      1. jq對象.each(callback)

         1. 語法：
            jquery對象.each(function(index,element){});
            * index:就是元素在集合中的索引
            * element：就是集合中的每一個元素對象

             * this：集合中的每一個元素對象
            

         2. 回調函數返回值：

            • true:如果當前function返回爲false，則結束循環(break)。
            • false:如果當前function返回爲true，則結束本次循環，繼續下次循環(continue)
      2. $.each(object, [callback])
      3. for…of: jquery 3.0 版本之後提供的方式
         for(元素對象 of 容器對象)

3. 事件綁定

   1. jquery標準的綁定方式
      • jq對象.事件方法(回調函數)；
      • 注：如果調用事件方法，不傳遞迴調函數，則會觸發瀏覽器默認行爲。
        • 表單對象.submit();//讓表單提交
   2. on綁定事件/off解除綁定
      • jq對象.on(“事件名稱”,回調函數)
      • jq對象.off(“事件名稱”)
        • 如果off方法不傳遞任何參數，則將組件上的所有事件全部解綁
   3. 事件切換：toggle

      • jq對象.toggle(fn1,fn2…)

        • 當單擊jq對象對應的組件後，會執行fn1.第二次點擊會執行fn2…

      • 注意：1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復此功能。

4. 插件：增強JQuery的功能

   1. 實現方式：
      1. $.fn.extend(object)
         • 增強通過Jquery獲取的對象的功能 $("#id")
      2. $.extend(object)
         • 增強JQeury對象自身的功能 $/jQuery