jQuery

來源:互聯網
上載者:User

標籤:壓縮   不相容   dde   萬用字元   ast   read   複選框   引入   sel   

一.jQuery簡介
    1.1.什麼是jQuery?
        jQuery是一個輕量的、免費開源的js函數庫,極大簡化了JavaScript代碼。

    1.2.jQuery的優勢:
        簡化了JavaScript代碼
        可以像css那樣訪問DOM
        可以修改css控制頁面樣式
        可以相容常用的瀏覽器
        
    1.3.jQuery版本支援:
        jQuery分為很多版本,也分為壓縮版和未壓縮版,選擇需要的版本進行下載
        1.x --- IE6+
        2.x --- IE9+
        3.x --- IE9+
        
        注意: jQuery不相容老版本. jQuery升級除了會做一些內部最佳化之外, 還會刪除或者添加一些新的方法, 所以升級之後, 以前的部分代碼可能會無法執行!

    1.4.jQuery引入
        引入jQuery:
            <script src="jquery-1.4.2.min.js"></script>

======================================================
二.jQuery文法
    2.1.$介紹
        $是jQuery中jQuery函數的簡寫形式
        參見源碼: window.jQuery = window.$ = jQuery;
        使用$()相當於調用了jQuery()函數, 該函數會返回一個jQuery對象, 該對象中包含一個或多個DOM元素. 可以通過jQuery上提供方法, 對這些元素進行操作.
        
    2.2.文檔就緒事件
        $(document).ready(function(){
            // ...
        });
        ready()函數在html文檔載入後立即執行
        其作用相當於: window.onload = function(){//...}
        其簡寫形式:
            $(function(){
                // ....
            });
    
    2.3.DOM對象和jQuery對象互相轉化
        JS對象只能調用JS上提供的屬性和方法, 不能調用jQuery提供的屬性和方法, 如果非要使用, 必須將JS對象轉化成jQuery對象!!
        2.3.1.dom對象轉jQuery對象:
            var dom = document.getElementById("username");
            alert(dom.value);//擷取使用者名稱
            var $jquery = $(dom);//dom對象轉jquery對象
            alert($jquery.val());//擷取使用者名稱
            
        2.3.2.jQuery對象轉dom對象:
            var $jquery = $("#username");
            alert($jquery.val());//擷取使用者名稱
            var dom1 = $jquery.get(0);
            alert(dom1.value);//擷取使用者名稱
            var dom2 = $jquery[0];
            alert(dom2.value);//擷取使用者名稱

======================================================
三.jQuery選取器
    3.1.基本選取器:
        3.1.1.元素選取器:
            格式: $("元素名稱")    
            如: $("p") 匹配所有的p元素
        3.1.2.類別選取器:
            格式: $(".class值")    
            如: $(".c1") 匹配所有class值為c1的元素
        3.1.3.ID選取器:
            格式: $("#id值")    
            如: $("#d1") 匹配id值為d1的元素
        3.1.4.*號萬用字元: $("*") 匹配所有元素

        3.1.5.多條件選取器:
            格式: $("選取器1, 選取器2, ...")
            如: $("span, div, p") 匹配所有的span、div、p元素
    
    3.2.層級選取器:
        $("祖先 後代")    匹配祖先元素內部的所有後代元素
            如: $("div span") 匹配div下所有的span元素(span子孫元素)
            
        $("父類 > 子類") 獲得父元素內部所有的子項目
            如: $("div>span") 匹配div下所有的span子項目
        $("元素A+元素B") 匹配A元素後緊鄰的B元素
            如: $("div+span") 匹配div後緊鄰的兄弟span元素

        $("元素A~元素B") 匹配A元素後所有的兄弟元素
            如: $("div~span") 匹配div後所有的兄弟span元素

    3.3.基本過濾選取器:
        :first        匹配第一個
            如: $("div:first") 匹配所有div中的第一個
        :last        匹配最後一個        //Firefox瀏覽器 不支援
            如: $("div:last") 匹配所有div中的最後一個
        :not    匹配除什麼之外的    
            如: $("div:not(.one)") 匹配所有div中的class不為one的div
        :eq(n)        匹配下標為n的元素
            如: $("div:eq(n)") 匹配所有div中索引值為n的元素
        :lt(n)        匹配下標小於n的元素
            如: $("div:lt(n)") 匹配所有div中索引值小於n的元素
        ...
    3.4.內容選取器:
        $("div:contains(‘bbb‘)")    匹配包含指定文本的元素
            如: $("div:contains(‘bbb‘)") 匹配所有div中包含指定內容的div元素
            結果: <div>aaabbbcccc</div>
        $("td:empty")                匹配不包含任何內容的元素
            如: $("div:empty") 匹配所有沒有內容的div元素
        ...
    3.5.可見選取器:
        $("div:hidden") 匹配所有不可見的div元素
        $("div:visible") 匹配所有可見的div元素
        
    3.6.屬性選取器:
        $("div[id]")        匹配所有包含id屬性的div元素
        $("div[id=‘d1‘]")    匹配所有包含id屬性, 並且屬性值為‘d1‘的div元素
        $("div[id!=‘d1‘]")    匹配所有包含id屬性, 並且屬性值不為‘d1‘的div元素
        
    3.7.子項目選取器:
        $("div:nth-child(n)") 匹配div下第n個子項目
        $("div:first-child") 匹配div下第一個子項目
        $("div:last-child") 匹配div下最後一個子項目
        $("div:only-child") 匹配div下唯一的一個子項目
        ...
    3.8.表單選取器:
        $(":input")        匹配所有的input元素、select、textarea等元素
        $(":password")    匹配所有的密碼框
        $(":radio")        匹配所有的選項按鈕
        $(":checkbox")    匹配所有的複選框
        $(":checked")    匹配所有被選中的單選框/複選框/option元素
        $(":selected")    匹配所有被選中的option元素
        
======================================================
四.文檔操作
    parent() -- 如: $("div").parent() 匹配所有div的父元素
    parents() -- 如: $("div").parents() 匹配所有div的父輩元素
    find() -- 如: $("div").find("span") 匹配div下所有的span元素
    next()
        -- 如: $("div").next() 匹配div後的相鄰的兄弟元素
        -- 如: $("div").next("input") 匹配div後的相鄰的input兄弟元素
    nextAll()
        -- 如: $("div").nextAll() 匹配div後的所有兄弟元素
        -- 如: $("div").nextAll("div") 匹配div後的所有div兄弟元素
    pre()
        -- 如: $("div").pre() 匹配div前一個相鄰的兄弟元素
        -- 如: $("div").pre("input") 匹配div前一個相鄰的input兄弟元素
    preAll()
        -- 如: $("div").preAll() 匹配div前面的所有兄弟元素
        -- 如: $("div").preAll("div") 匹配div前面的所有div兄弟元素
        
    siblings()
        -- 如: $("div").siblings() 匹配div前後所有的兄弟元素
        -- 如: $("div").siblings("div") 匹配div前後所有的div兄弟元素

    css()
        -- 如: $("div").css("width") 擷取所有匹配元素中的第一個div元素的width的值
        -- 如: $("div").css("width", "200px") 設定所有匹配元素width的值為200px
        -- 如: $("div").css({"width":"200px", "height":"200px", "color":"red"})為所有匹配元素設定css屬性

    html()
        -- 如: $("div").html()  擷取所匹配元素的html內容
        -- 如: $("div").html("xxxx") 設定所匹配元素的html內容
    text()
        -- 如: $("div").text()  擷取所匹配元素的常值內容
        -- 如: $("div").text("xxxx") 設定所匹配元素的常值內容
    attr()
        -- 如: $("div").attr("id"); 擷取所匹配元素的id屬性的值
        -- 如: $("div").attr("id", "d1"); 設定所匹配元素的id屬性的值為d1

======================================================
五.事件
    5.1.click()
        $("xxx").click(function(){}) -- 為匹配的所有元素繫結點擊事件, 在所匹配元素被點擊之後立即觸發
    5.2.blur()
        $("xxx").blur(function(){}) -- 為匹配的所有元素繫結失去焦時間點事件, 在所匹配元素失去輸入焦點時觸發
    5.3.focus()
        $("xxx").focus(function(){}) -- 為匹配的所有元素繫結獲得焦時間點事件, 在所匹配元素獲得輸入焦點時觸發
    5.4.change()
        $("xxx").change(function(){}) -- 為匹配的所有下拉選綁定選項切換事件, 在下拉選框切換選項時觸發

    5.5.ready()
        -- 文檔就緒事件, 在整個html載入完成之後立即觸發執行
        如: $(document).ready(function(){...})
        簡寫形式為 $(function(){...})

======================================================    
六.效果
    6.1.show()
        $("xxx").show() -- 將匹配的所有元素由隱藏設定為顯示
        
    6.2.hide()
        $("xxx").hide() -- 將匹配的所有元素由顯示設定為隱藏
        
    6.3.toggle()
        $("xxx").toggle() -- 切換所匹配元素的可見狀態, 如果顯示則隱藏, 如果隱藏則顯示.
   

jQuery

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: