jQuery 學習筆記

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。
若是一個對象是 jQuery對象，那麼它就可使用jQuery裏的方法

$("#i1").html()的意思是：獲取id值爲 i1的元素的html代碼。
其中 html()是jQuery裏的方法。至關於： document.getElementById("i1").innerHTML;

1. jQuery對象轉換成DOM對象,用索引取出具體的標籤
2. DOM對象轉換成jQuery對象,$(DOM對象)
# dom對象         => $(dom對象)        jquery對象
# jquery對象    => $('li')[0]        dom對象

$("#i1").html();        //jQuery對象可使用jQuery的方法
$("#i1")[0].innerHTML;    // DOM對象使用DOM的方法

選擇器

    1.基本選擇器

        $("#id")            //ID選擇器
        $("div")            //元素選擇器
        $(".classname")     //類選擇器
        $(".classname,.classname1,#id1")     //組合選擇器

    2.層次選擇器

        x和y能夠爲任意選擇器
            $("x y");    // x的全部後代y（子子孫孫）
            $("x > y")    // x的全部兒子y（兒子）
            $("x + y")    // 找到全部緊挨在x後面的y
            $("x ~ y")    // x以後全部的兄弟y

    3.過濾選擇器(重點)

        $("li:first")    // 第一個li
        $("li:last")     // 最後一個li
        $("li:even")     // 匹配全部索引值爲偶數的元素，從 0 開始計數
        $("li:odd")      // 匹配全部索引值爲奇數的元素，從 0 開始計數
        $("li:eq(4)")    // 索引等於 4 的li(第五個 li 元素)
        $("li:gt(2)")    // 匹配全部大於給定索引值的元素
        $("li:lt(2)")    // 匹配全部小於給定索引值的元素
        $("li:not(#runoob)") //挑選除 id="runoob" 之外的全部li

    3.2內容過濾選擇器

        $("div:contains('Runob')")    //包含 Runob文本的元素
        $("td:empty")                 //不包含子元素或者文本的空元素
        $("div:has(selector)")        //含有選擇器所匹配的元素 //選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)
        $("td:parent")                //含有子元素或者文本的元素

    3.3可見性過濾選擇器

        $("li:hidden")        //匹配全部不可見元素，或type爲hidden的元素
        $("li:visible")        //匹配全部可見元素

    3.4屬性過濾選擇器

        $("div[id]")            //全部含有 id 屬性的 div 元素
        $("div[id='123']")        // id屬性值爲123的div 元素
        $("div[id!='123']")        // id屬性值不等於123的div 元素
        $("div[id^='qq']")        // id屬性值以qq開頭的div 元素
        $("div[id$='zz']")        // id屬性值以zz結尾的div 元素
        $("div[id*='bb']")        // id屬性值包含bb的div 元素
        $("input[id][name$='man']") //多屬性選過濾，同時知足兩個屬性的條件的元素

    3.5狀態過濾選擇器

        $("input:enabled")        // 匹配可用的 input
        $("input:disabled")        // 匹配不可用的 input
        $("input:checked")        // 匹配選中的 input
        $("option:selected")    // 匹配選中的 option

    4.表單選擇器

        $(":input")        //匹配全部 input, textarea, select 和 button 元素
        // $(":text")    等價於$("[type=text]")，推薦使用$("input:text")效率更高，下同
        $(":text")        //全部的單行文本框
        $(":password")    //全部密碼框
        $(":radio")        //全部單選按鈕
        $(":checkbox")    //全部複選框
        $(":submit")    //全部提交按鈕
        $(":reset")        //全部重置按鈕
        $(":button")    //全部button按鈕
        $(":file")        //全部文件域


篩選器方法

    下一個元素：

        $("#id").next()
        $("#id").nextAll()            // 下到全部
        $("#id").nextUntil("#i2")    // 下到某處爲止

    上一個元素：

        $("#id").prev()
        $("#id").prevAll()
        $("#id").prevUntil("#i2")

    父親元素：

        $("#id").parent()
        $("#id").parents()        // 查找當前元素的全部的父輩元素
        $("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止。

    兒子和兄弟元素：

        $("#id").children()        // 兒子們
        $("#id").siblings()        // 兄弟們

    查找

        $("div").find("p")
        // 搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。
        // 等價於$("div p")

    篩選
    
        $("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的
            // 篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。
            // 等價於 $("div.c1")
            
        .first()    // 獲取匹配的第一個元素
        .last()        // 獲取匹配的最後一個元素
        .not()        // 從匹配元素的集合中刪除與指定表達式匹配的元素
        .has()        // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
        .eq()        // 索引值等於指定值的元素

    

操做標籤

    樣式類
    
        addClass()        // 添加指定的CSS類名。
        removeClass()    // 移除指定的CSS類名。
        hasClass()        // 判斷樣式存不存在
        toggleClass()    // 切換CSS類名，若是有就移除，若是沒有就添加。

        示例：
            $("p").css("color", "red");    // 將全部p標籤的字體設置爲紅色

    位置操做

        offset()    // 獲取匹配元素在當前窗口的相對偏移或設置元素位置
        position()    // 獲取匹配元素相對父元素的偏移
        scrollTop()    // 獲取匹配元素相對滾動條頂部的偏移
        scrollLeft()// 獲取匹配元素相對滾動條左側的偏移
        示例：
            $(window).scrollTop(0);        // 返回頂部

    文本操做

        HTML代碼：

            html()        // 取得第一個匹配元素的html內容
            html(val)    // 設置全部匹配元素的html內容

        文本值：

            text()        // 取得全部匹配元素的內容
            text(val)    // 設置全部匹配元素的內容

        值：

            val()                // 取得第一個匹配元素的當前值
            val(val)            // 設置全部匹配元素的值
            val([val1, val2])    // 設置多選的checkbox、多選select的值
        
        示例：
            獲取被選中的checkbox或radio的值：

                <label for="c1">女</label>
                <input name="gender" id="c1" type="radio" value="0">
                <label for="c2">男</label>
                <input name="gender" id="c2" type="radio" value="1">

            可使用：
                $("input[name='gender']:checked").val()


    尺寸：

        height()        // 設置或返回被選元素的高度
        width()
        innerHeight()    // 返回元素的高度（包含 padding，不包含 border）
        innerWidth()
        outerHeight()    // 返回元素的寬度（包含 padding 和 border）
        outerWidth()    // outerWidth(true) 設置true計算margin值



屬性操做
    
    用於ID等或自定義屬性：

        attr(attrName)                // 返回第一個匹配元素的屬性值
        attr(attrName, attrValue)    // 爲全部匹配元素設置一個屬性值
        attr({k1: v1, k2:v2})        // 爲全部匹配元素設置多個屬性值
        removeAttr()                // 從每個匹配的元素中刪除一個屬性


    用於checkbox和radio

        prop()            // 獲取屬性
        removeProp()    // 移除屬性
        
        對於返回布爾值的好比checkbox、radio和option的是否被選中都用prop。        
        示例：
            <input type="checkbox" checked id="i1" value="1">

            $("#i1").attr("checked")    // checked
            $("#i1").prop("checked")    // true
        attr的做用範圍只限於HTML標籤內的屬性，
        而prop獲取的是這個DOM對象的屬性，選中返回true，沒選中返回false。


文檔處理

    添加到指定元素內部的後面

        $(A).append(B)        // 把B追加到A
        $(A).appendTo(B)    // 把A追加到B

    添加到指定元素內部的前面

        $(A).prepend(B)        // 把B前置到A
        $(A).prependTo(B)    // 把A前置到B

    添加到指定元素外部的後面

        $(A).after(B)        // 把B放到A的後面
        $(A).insertAfter(B)    // 把A放到B的後面

    添加到指定元素外部的前面

        $(A).before(B)        // 把B放到A的前面
        $(A).insertBefore(B)// 把A放到B的前面

    移除和清空元素

        .remove()    // 從DOM中刪除全部匹配的元素。所選元素消失
        .empty()    // 刪除匹配的元素集合中全部的子節點。所選元素還在

    替換
    
        $("p:first").replaceWith("Hello world!");
        // 規定要插入的內容（可包含 HTML 標籤）。
        $("<span>Hello world!</span>").replaceAll("p:last");
        // 規定要插入的內容（必須包含 HTML 標籤）。

    克隆

        clone()    // clone方法加參數true，克隆標籤而且克隆標籤帶的事件



事件
    經常使用事件
        
        click(function(){...})
        hover(function(){...})
        blur(function(){...})
        focus(function(){...})
        change(function(){...})
        keyup(function(){...})
        
    keydown和keyup、change事件組合示例:
        <script>

            var flag = false;
            // shift按鍵被按下的時候
            $(window).keydown(function (event) {
                console.log(event.keyCode);
                if (event.keyCode === 16){
                    flag = true;
                }
            });
            // shift按鍵被擡起的時候
            $(window).keyup(function (event) {
                console.log(event.keyCode);
                if (event.keyCode === 16){
                    flag = false;
                }
            });
            // 當元素的值改變時發生 change 事件（僅適用於表單字段）。
            $("select").change(function (event) {
                // 若是shift按鍵被按下，就進入批量編輯模式
                // shift按鍵對應的code是16
                // 判斷當前select這一行是否被選中
                console.log($(this).parent().siblings().first().find(":checkbox"));
                var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
                console.log(isChecked);
                if (flag && isChecked) {
                    // 進入批量編輯模式
                    // 1. 取到當前select選中的值
                    var value = $(this).val();
                    // 2. 給其餘被選中行的select設置成和我同樣的值
                    // 2.1 找到那些被選中行的select
                    var $select = $("input:checked").parent().parent().find("select")
                    // 2.2 給選中的select賦值
                    $select.val(value);
                }
            });
        </script>


    hover() 
        方法規定當鼠標指針懸停在被選元素上時要運行的兩個函數。
        方法觸發 mouseenter 和 mouseleave 事件。
        注意: 若是隻指定一個函數，則 mouseenter 和 mouseleave 都執行它。
            
        $("p").hover(function(){
            $("p").css("background-color","yellow");
        },function(){
            $("p").css("background-color","pink");
        });


    事件綁定

        .on( events [, selector ],function(){})
        // 使用 on() 方法添加的事件處理程序適用於當前及將來的元素（好比由腳本建立的新元素）。
        events： 事件
        selector: 選擇器（可選的）
        function: 事件處理函數
        示例：
            $("table").on("click", ".delete", function () {
              // 綁定的事件...
            })
            
    移除事件

        .off( events [, selector ][,function(){}])

        off() 方法移除用 .on()綁定的事件處理程序。

        events： 事件
        selector: 選擇器（可選的）
        function: 事件處理函數

    阻止後續事件執行

        return false;         // 常見阻止表單提交等
        e.stopPropagation();  // 阻止事件冒泡(層級觸發)
 e.preventDefault(); // 阻止默認事件  示例：  <div><p><span>點我</span></p></div> <script> $("span").click(function (e) { alert("span"); // e.stopPropagation(); return false; }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script>  頁面加載完成再執行javascript的三種方式 當DOM載入就緒 能夠查詢及操縱時綁定事件。 $(document).ready(function(){ // myfunc();  }) 簡寫： $(function(){ // 你在這裏寫你的代碼  }) // window.onload()函數有覆蓋現象，必須等待着圖片資源加載完成以後才能調用 // jQuery的這個入口函數沒有函數覆蓋現象，文檔加載完成以後就能夠調用（建議使用此函數）  示例： <script> function Fa() { // 屢次用到的jQuery對象存儲到一個變量，避免重複查詢文檔樹 var $f1 = $("#f1"); } // 文檔樹就緒後執行 $(document).ready(function () { Fa(); }); </script>  動畫效果 語法： $(selector).xxx(speed,callback); // 可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。 // 可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。  隱藏、顯示： hide() 和 show() toggle() hide和show實例： $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(1000,function(){ alert('ssss'); }); }); toggle實例(在hide與show之間切換): $("button").click(function(){ $("p").toggle(); }); 淡入淡出： fadeIn $("button").click(function(){ $("#div3").fadeIn(3000); }); fadeOut $("button").click(function(){ $("#div2").fadeOut("slow"); }); fadeToggle // 切換fadeIn與fadeOut $("button").click(function(){ $("#div3").fadeToggle(); }); fadeTo() 方法 jQuery fadeTo() 方法容許漸變爲給定的不透明度（值介於 0 與 1 之間）。 語法: $(selector).fadeTo(speed,opacity,callback); 必需的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。 fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。 可選的 callback 參數是該函數完成後所執行的函數名稱。 實例 $("button").click(function(){ $("#div1").fadeTo("slow",0.15); }); 滑動方法： // 用法同上  slideDown() slideUp() slideToggle() 動畫 - animate() 方法 語法： $(selector).animate({params},speed,callback); // 必需的 params 參數定義造成動畫的 CSS 屬性。 // 默認狀況下，全部 HTML 元素都有一個靜態位置，且沒法移動。 // 如需對位置進行操做，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！  示例： $("button").click(function(){ $("div").animate({left:'250px'}); }); // 操做多個屬性 $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); 使用相對值 // 也能夠定義相對值（該值相對於元素的當前值）。須要在值的前面加上 += 或 -=：  實例 $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); 使用隊列功能 編寫多個 animate() 調用，jQuery 會建立包含這 些方法調用的"內部"隊列。而後逐一運行這些 animate 調用。 示例： $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); }); 能夠用 animate() 方法來操做全部 CSS 屬性嗎？ 使用駝峯屬性名，好比，marginRight 而不是 margin-right， 若是須要生成顏色動畫，您須要從 jquery.com 下載 顏色動畫 插件。 注：但...咱能夠在回掉函數中簡單改變color屬性 each jQuery.each(collection, callback(indexInArray, valueOfElement))： 描述：一個通用的迭代函數，它能夠用來無縫迭代對象和數組。數組和相似數組的對象經過一個長度 屬性（如一個函數的參數對象）來迭代數字索引，從0到length - 1。其餘對象經過其屬性名進行迭代。 li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循環的具體元素。  }) 輸出： 010 120 230 340 .each(function(index, Element))： 描述：遍歷一個jQuery對象，爲每一個匹配元素執行一個函數。 .each() 方法用來迭代jQuery對象中的每個DOM元素。每次回調函數執行時，會傳遞當前循環次數做 爲參數(從0開始計數)。因爲回調函數是在當前DOM元素爲上下文的語境中觸發的，因此關鍵字 this 總 是指向這個元素。 // 爲每個li標籤添加foo $("li").each(function(){ $(this).addClass("c1"); // $("li").addClass("c1"); // 對全部標籤作統一操做  }); 在遍歷過程當中可使用 return false提早結束each循環。 .data() 在匹配的元素集合中的全部元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。 .data(key, value): 描述：在匹配的元素上存儲任意相關數據。 $("div").data("k",100);//給全部div標籤都保存一個名爲k，值爲100  .data(key): 描述: 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值—經過 .data(name, value)或 HTML5 data-*屬性設置。 $("div").data("k");//返回第一個div標籤中保存的"k"的值  .removeData(key): 描述：移除存放在元素上的數據，不加key參數表示移除全部保存的數據。 $("div").removeData("k"); //移除元素上存放k對應的數據