JQuery基礎筆記

## 今日內容
    1. JQuery 基礎：
        1. 概念
        2. 快速入門
        3. JQuery物件和JS物件區別與轉換
        4. 選擇器
        5. DOM操作
        6. 案例




# 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(): 獲取/設定元素的標簽體內容   <a><font>內容</font></a>  --> <font>內容</font>
            2. text(): 獲取/設定元素的標簽體純文本內容   <a><font>內容</font></a> --> 內容
            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"): 
                        * 判斷如果元素物件上存在，則將屬性值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

上一篇：jQuery HTML/CSS 方法大全

下一篇：JQuery高級筆記