19.JQuery基礎(chǔ)

主要內(nèi)容

1. JQuery 基礎(chǔ):
    1. 概念
    2. 快速入門
    3. JQuery對象和JS對象區(qū)別與轉(zhuǎn)換
    4. 選擇器
    5. DOM操作
    6. 案例

JQuery 基礎(chǔ):

1. 概念: 一個JavaScript框架。簡化JS開發(fā)
    * jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫(或JavaScript框架)。jQuery設(shè)計(jì)的宗旨   是“write Less,Do More”,即倡導(dǎo)寫更少的代碼,做更多的事情。它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設(shè)計(jì)模式,優(yōu) 化HTML文檔操作、事件處理、動畫設(shè)計(jì)和Ajax交互。

    * JavaScript框架:本質(zhì)上就是一些js文件,封裝了js的原生代碼而已
2. 快速入門
    1. 步驟:
        1. 下載JQuery
            * 目前jQuery有三個大版本:
                1.x:兼容ie678,使用最為廣泛的,官方只做BUG維護(hù),
                     功能不再新增。因此一般項(xiàng)目來說,使用1.x版本就可以了,
                     最終版本:1.12.4 (2016年5月20日)
                2.x:不兼容ie678,很少有人使用,官方只做BUG維護(hù),
                     功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x,
                     最終版本:2.2.4 (2016年5月20日)
                3.x:不兼容ie678,只支持最新的瀏覽器。除非特殊要求,
                     一般不會使用3.x版本的,很多老的jQuery插件不支持這個版本。
                     目前該版本是官方主要更新維護(hù)的版本。最新版本:3.2.1(2017年3月20日)
            * jquery-xxx.js 與 jquery-xxx.min.js區(qū)別:
                1. jquery-xxx.js:開發(fā)版本。給程序員看的,有良好的縮進(jìn)和注釋。體積大一些
                2. jquery-xxx.min.js:生產(chǎn)版本。程序中使用,沒有縮進(jìn)。體積小一些。程序加載更快

        2. 導(dǎo)入JQuery的js文件:導(dǎo)入min.js文件
        3. 使用
            var div1 = $("#div1");
            alert(div1.html());


3. JQuery對象和JS對象區(qū)別與轉(zhuǎn)換
    1. JQuery對象在操作時,更加方便。
    2. JQuery對象和js對象方法不通用的.
    3. 兩者相互轉(zhuǎn)換
        * jq -- > js : jq對象[索引] 或者 jq對象.get(索引)
        * js -- > jq : $(js對象)


4. 選擇器:篩選具有相似特征的元素(標(biāo)簽)

    1. 基本操作學(xué)習(xí):
        1. 事件綁定
            //1.獲取b1按鈕
            $("#b1").click(function(){
                alert("abc");
            });
        2. 入口函數(shù)
             $(function () {
               
             });
             window.onload  和 $(function) 區(qū)別
                 * window.onload 只能定義一次,如果定義多次,后邊的會將前邊的覆蓋掉
                 * $(function)可以定義多次的。
        3. 樣式控制:css方法
             // $("#div1").css("background-color","red");
            $("#div1").css("backgroundColor","pink");


    2. 分類
        1. 基本選擇器
            1. 標(biāo)簽選擇器(元素選擇器)
                * 語法: $("html標(biāo)簽名") 獲得所有匹配標(biāo)簽名稱的元素
            2. id選擇器 
                * 語法: $("#id的屬性值") 獲得與指定id屬性值匹配的元素
            3. 類選擇器
                * 語法: $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
            4. 并集選擇器:
                * 語法: $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素
        2. 層級選擇器
            1. 后代選擇器
                * 語法: $("A B ") 選擇A元素內(nèi)部的所有B元素       
            2. 子選擇器
                * 語法: $("A > B") 選擇A元素內(nèi)部的所有B子元素
        3. 屬性選擇器
            1. 屬性名稱選擇器 
                * 語法: $("A[屬性名]") 包含指定屬性的選擇器
            2. 屬性選擇器
                * 語法: $("A[屬性名='值']") 包含指定屬性等于指定值的選擇器
            3. 復(fù)合屬性選擇器
                * 語法: $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器
        4. 過濾選擇器
            1. 首元素選擇器 
                * 語法: :first 獲得選擇的元素中的第一個元素
            2. 尾元素選擇器 
                * 語法: :last 獲得選擇的元素中的最后一個元素
            3. 非元素選擇器
                * 語法: :not(selector) 不包括指定內(nèi)容的元素
            4. 偶數(shù)選擇器
                * 語法: :even 偶數(shù),從 0 開始計(jì)數(shù)
            5. 奇數(shù)選擇器
                * 語法: :odd 奇數(shù),從 0 開始計(jì)數(shù)
            6. 等于索引選擇器
                * 語法: :eq(index) 指定索引元素
            7. 大于索引選擇器 
                * 語法: :gt(index) 大于指定索引元素
            8. 小于索引選擇器 
                * 語法: :lt(index) 小于指定索引元素
            9. 標(biāo)題選擇器
                * 語法: :header 獲得標(biāo)題(h1~h6)元素,固定寫法
        5. 表單過濾選擇器
            1. 可用元素選擇器 
                * 語法: :enabled 獲得可用元素
            2. 不可用元素選擇器 
                * 語法: :disabled 獲得不可用元素
            3. 選中選擇器 
                * 語法: :checked 獲得單選/復(fù)選框選中的元素
            4. 選中選擇器 
                * 語法: :selected 獲得下拉框選中的元素

5. DOM操作
    1. 內(nèi)容操作
        1. html(): 獲取/設(shè)置元素的標(biāo)簽體內(nèi)容   <a><font>內(nèi)容</font></a>  --> <font>內(nèi)容</font>
        2. text(): 獲取/設(shè)置元素的標(biāo)簽體純文本內(nèi)容   <a><font>內(nèi)容</font></a> --> 內(nèi)容
        3. val(): 獲取/設(shè)置元素的value屬性值
    2. 屬性操作
        1. 通用屬性操作
            1. attr(): 獲取/設(shè)置元素的屬性
            2. removeAttr():刪除屬性
            3. prop():獲取/設(shè)置元素的屬性
            4. removeProp():刪除屬性

            * attr和prop區(qū)別?
                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元素內(nèi)部,并且在末尾
        2. prepend():父元素將子元素追加到開頭
            * 對象1.prepend(對象2):將對象2添加到對象1元素內(nèi)部,并且在開頭
        3. appendTo():
            * 對象1.appendTo(對象2):將對象1添加到對象2內(nèi)部,并且在末尾
        4. prependTo():
            * 對象1.prependTo(對象2):將對象1添加到對象2內(nèi)部,并且在開頭


        5. after():添加元素到元素后邊
            * 對象1.after(對象2): 將對象2添加到對象1后邊。對象1和對象2是兄弟關(guān)系
        6. before():添加元素到元素前邊
            * 對象1.before(對象2): 將對象2添加到對象1前邊。對象1和對象2是兄弟關(guān)系
        7. insertAfter()
            * 對象1.insertAfter(對象2):將對象2添加到對象1后邊。對象1和對象2是兄弟關(guān)系
        8. insertBefore()
            * 對象1.insertBefore(對象2): 將對象2添加到對象1前邊。對象1和對象2是兄弟關(guān)系

        9. remove():移除元素
            * 對象.remove():將對象刪除掉
        10. empty():清空元素的所有后代元素。
            * 對象.empty():將對象的后代元素全部清空,但是保留當(dāng)前對象以及其屬性節(jié)點(diǎn)


6. 案例

?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容