jQuery 中一些細節知識點(本文會持續更新)

1.可見性過濾選擇器

:hidden 選取所有不可見的元素。例如:$(“:hidden”) 表示選取所有不可見的元素。包括:

<input type="hidden" />
<div style="display:none;"></div>
<div style="visibity:hidden"></div>

html頁面上的註釋內容/**/、<head></head>、<meta></meta>(如果頁面上由此標籤)、<title></title>、<script src="*.js"></script>、<script type='text/javascript'></script>、 <style type="text/css"></style>
等元素。如果只想去<input>元素,可以使用$(“input:hidden”) 注意input:hidden之間沒有空格,稍後我們會講解這個有無空格的區別;
驗證如下:
驗證頁面代碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>測試jQuery選擇器</title>

    <script src="Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .test {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="hidden"  value="hidden"/>
    <div style="display:none"></div>  
    <script type="text/javascript">
        var $hidden1 = $(":hidden");
        var $hidden2 = $("input:hidden");
        var len1 = $hidden1.length;
        var len2 = $hidden2.length;
        console.log("$(':hidden').length:"+len1);
        console.log("$('input:hidden').lengh:" + len2);
        $.each($hidden1, function () {
            console.log(this.nodeName+":"+  this.innerHTML);
        });
        $.each($hidden2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });
    </script>
</body>
</html>

輸出結果如下:

 $(':hidden').length:8
 $('input:hidden').lengh:1
 HEAD:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>測試jQuery選擇器</title>

    <script src="Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .test {
            background-color: yellow;
        }
    </style>

 META:
 TITLE:測試jQuery選擇器
 SCRIPT:
 STYLE:
        .test {
            background-color: yellow;
        }

 INPUT:
 DIV:
 SCRIPT:
        var $hidden1 = $(":hidden");
        var $hidden2 = $("input:hidden");
        var len1 = $hidden1.length;
        var len2 = $hidden2.length;
        console.log("$(':hidden').length:"+len1);
        console.log("$('input:hidden').lengh:" + len2);
        $.each($hidden1, function () {
            console.log(this.nodeName+":"+  this.innerHTML);
        });
        $.each($hidden2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });

 INPUT:

爲什麼會出現上面的情況呢？通過谷歌瀏覽的元素查看面板(直接按F12)，可以很直觀的看到 head、title等元素默認會繼承樣式 display:none.

head {
    display: none;
}

2. 選擇器中有無空格

在選擇器中的空格用不能忽視,有無空格會得到不同的結果。看下面的例子:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>測試jQuery選擇器</title>

    <script src="Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .test {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="test">
        <div style="display:none">a</div>
        <div style="display:none">b</div>
        <div style="display:none">c</div>
        <div class="test" style="display:none">d</div>
    </div>
    <div class="test" style="display:none;">e</div>
    <div class="test" style="display:none">f</div>

    <script type="text/javascript">
        var $t1 = $(".test :hidden");//帶空格
        var $t2 = $(".test:hidden");//不帶空格
        var len1 = $t1.length;
        var len2 = $t2.length;
        console.log("$('.test :hidden').length:" + len1);
        console.log("$('.test:hidden').length:" + len2);
        $.each($t1, function () {
            console.log(this.nodeName+":"+ this.innerHTML);
        });
        console.log();
        $.each($t2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });
    </script>
</body>
</html>

輸出結果如下:

 $('.test :hidden').length:4
 $('.test:hidden').length:3
 DIV:a
 DIV:b
 DIV:c
 DIV:d

 DIV:d
 DIV:e
 DIV:f

之所以有不同的結果,因爲後代選擇器和過濾選擇器的不同。
帶空格的$(".test :hidden") 選取的是class爲”test”的元素裏面的隱藏元素,相當於就是.class *:hidden 和css的表述類似。

不帶空格的$(".test:hidden") 選取的是隱藏的元素的class爲”test”。

以下是2016-12-14更新

3. 屬性獲取attr 和prop, is()方法和prop方法的效率

在jQuery 版本中獲取頁面表單元素屬性的時候使用的是方法attr,但是在訪問某些屬性的時候會有些問題。比如 input的disabled、readonly。在有些瀏覽器裏,只要寫了 disabled 屬性就可以,有些必須寫成disabled=”disabled”。所以在jQuery 1.6版本之後新增了方法prop,來獲取這些屬性,這個方法的返回值是標準屬性:true/false.比如$("#checkbox").prop("disabled"),不會返回 “undefined”、”disabled”、”“,只會返回true或者false,在賦值的時候也是如此。但是$("#checkbox").attr("disabled") 可能會返回會返回 “undefined”、”disabled”、”“。
下面的例子來進行驗證(我這裏使用的是谷歌瀏覽器):

 <div>
            <input type="text" id="txt" disabled readonly />
            <input type="checkbox" id="ck" disabled readonly checked />
        </div>
        <div>
            <input type="button" id="button1" value="測試" onclick="test();" />
        </div>
        <script type="text/javascript">
            function test() {
                var $txt = $("#txt");
                console.log("text attr:");
                console.log("readonly:" + $txt.attr("readonly"));
                console.log("disabled:" + $txt.attr("disabled"));
                console.log("text prop:");
                console.log("readonly:" + $txt.prop("readonly"));
                console.log("disabled:" + $txt.prop("disabled"));
                var $ck = $("#ck");
                console.log("checkbox attr:");
                console.log("readonly:" + $ck.attr("readonly"));
                console.log("disabled:" + $ck.attr("disabled"));
                console.log("checkbox prop:");
                console.log("readonly:" + $ck.prop("readonly"));
                console.log("disabled:" + $ck.prop("disabled"));
            }
        </script>

輸出結果:

text attr:
     readonly:readonly
     disabled:disabled
 text prop:
     readonly:true
     disabled:true
 checkbox attr:
     readonly:readonly
     disabled:disabled
 checkbox prop:
     readonly:true
     disabled:true

<div>
            <input type="text" id="txt"  />
            <input type="checkbox" id="ck"  />
        </div>
        <div>
            <input type="button" id="button1" value="測試" onclick="test();" />
        </div>
        <script type="text/javascript">
            function test() {
                var $txt = $("#txt");
                console.log("text attr:");
                console.log("readonly:" + $txt.attr("readonly"));
                console.log("disabled:" + $txt.attr("disabled"));
                console.log("text prop:");
                console.log("readonly:" + $txt.prop("readonly"));
                console.log("disabled:" + $txt.prop("disabled"));
                var $ck = $("#ck");
                console.log("checkbox attr:");
                console.log("readonly:" + $ck.attr("readonly"));
                console.log("disabled:" + $ck.attr("disabled"));
                console.log("checkbox prop:");
                console.log("readonly:" + $ck.prop("readonly"));
                console.log("disabled:" + $ck.prop("disabled"));
            }
        </script>

輸出結果:

text attr:
      readonly:undefined
      disabled:undefined
text prop:
      readonly:false
      disabled:false
checkbox attr:
     readonly:undefined
     disabled:undefined
 checkbox prop:
     readonly:false
     disabled:false

通過上面的例子我們已經直觀瞭解兩者的區別了。那麼那些屬性應該使用attr 訪問,那些應該使用prop 訪問？
1.只添加屬性名稱該屬性就會生效的應該使用prop;比如:disabled、readonly等。
2.只存在true/false的屬性應該使用prop。
按照jQuery 官方的說法如果設置disabled和checked這些屬性,應該使用prop方法,而不是attr方法。
雖然高版本的jQuery中提供了is(“:checked”) 方法來判斷checkbox是否選中,但是效率不如prop方法。
來簡單驗證一下:

<div>
            <input type="checkbox" id="ck"  />
        </div>
        <div>
            <input type="button" id="button1" value="測試" onclick="test();" />
        </div>
        <script type="text/javascript">
            function test() {
                var $ck = $("#ck");
                var start = time();
                var loopCnt = 10000;
                for (var i = 0; i < loopCnt; i++) {
                    if ($ck.is(":checked"))
                    {

                    }
                }
                var end = time();
                console.log(end - start);
                start = time();
                for (var i = 0; i < loopCnt; i++) {
                    if ($ck.prop(":checked")) {

                    }
                }
                 end = time();
                console.log(end - start);
            }
            function time()
            {
                return new Date().getTime();
            }
        </script>

輸出結果:

未選中狀態:
13
 4
選中狀態:
11
 2

當然網友可以更改測試用例的數量,來進行測試。可是爲什麼prop比is方法快呢？我們來看一下源碼就明白了。

is 還需要判斷選擇器之類的.
is: function( selector ) {
        return !!selector && ( 
            typeof selector === "string" ?
                // If this is a positional selector, check membership in the returned set
                // so $("p:first").is("p:last") won't return true for a doc with two "p".
                POS.test( selector ) ? 
                    jQuery( selector, this.context ).index( this[0] ) >= 0 :
                    jQuery.filter( selector, this ).length > 0 :
                this.filter( selector ).length > 0 );
    }
prop：不需要直接進行遍歷元素即可。
prop: function( name, value ) {
        return jQuery.access( this, name, value, true, jQuery.prop );
    }
    access: function( elems, key, value, exec, fn, pass ) {
        var length = elems.length;

        // Setting many attributes
        if ( typeof key === "object" ) {
            for ( var k in key ) {
                jQuery.access( elems, k, key[k], exec, fn, value );
            }
            return elems;
        }

        // Setting one attribute
        if ( value !== undefined ) {
            // Optionally, function values get executed if exec is true
            exec = !pass && exec && jQuery.isFunction(value);

            for ( var i = 0; i < length; i++ ) {
                fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
            }

            return elems;
        }

4.trigger 和triggerHandler

兩個都是用來模擬方法的運行,但是trigger不僅觸發元素綁定的事件,也會觸發瀏覽器默認綁定的事件。而triggerHandler之後觸發元素綁定的事件。

來舉個例子查看一下效果:

  <div>
            <input type="button" id="button1" value="測試" onclick="test()" />
            trigger: 
            <input type="text" id="txt" onfocus="getFocus()" />
            triggerHandler:  
            <input type="text" id="txt2" onfocus="getFocus2()" />
        </div>
        <script type="text/javascript">
            function test() {
                $("#txt").trigger("focus");
                $("#txt2").triggerHandler("focus");
            }
            function getFocus() {
                console.log("getFocus");
            }
            function getFocus2() {
                console.log("getFocus2");
            }
        </script>

結果:

我們發現使用trigger 觸發focus ,第一個文本框獲得了焦點,並且在控制檯的輸出中有個 2,表示執行了2次。獲取有網友問你是把trigger放到了前面,所以只有第一個獲取了焦點，那麼我們把兩者的順序換一下。再驗證一下:

 <div>
            <input type="button" id="button1" value="測試" onclick="test()" />
            trigger: 
            <input type="text" id="txt" onfocus="getFocus()" />
            triggerHandler:  
            <input type="text" id="txt2" onfocus="getFocus2()" />
        </div>
        <script type="text/javascript">
            function test() {
                $("#txt2").triggerHandler("focus");
                $("#txt").trigger("focus");
            }
            function getFocus() {
                console.log("getFocus");
            }
            function getFocus2() {
                console.log("getFocus2");
            }
        </script>

我們依舊發現獲得焦點的是trigger.

以下是2017-3-8更新

5.獲取和設置CSS屬性

在jQuery中css方法用於獲取和設置元素的CSS樣式。在獲取樣式值時,css()返回的是元素的當前樣式,返回值可能來自style屬性也可能來自樣式表。注意:不能獲取複合樣式的值,比如:font、margin等。應該單個樣式的值,比如:font-weight、font-size、margin-top、margin-bottom等等。在設置css樣式時,css()方法會將樣式簡單添加到該元素的style屬性中。css()方法允許在css樣式命中使用連接字符串(background-color)或者使用駝峯式JavaScript樣式名(backgroudColor)。在獲取樣式值時,css()會把數值轉換成帶有單位後綴的字符串返回。而在設置樣式時,則會將數值轉化爲成字符串,在必要時添加”px”（像素）後綴。

$("#divFont").css("font");//錯誤,不可能使用複合式
$("#divFont").css("font-weigth");//正確
$("#divFont").css("fontWeigth");//正確
$("#divFont").css("border","solid back 1px");//設置符合樣式時允許的
$("#divFont").css({backgroundColor:"black",padding:"10px 2px 4px 20px"});//允許設置多個樣式,也可以使用駝峯進行設置

以下是2017-3-15更新

6.jQuery.isFunction

當參數是原生Function對象時,返回true。在IE8以及之前的版本中,window.alert和window.attachEvent()等瀏覽器返回false.

7.jQuery.parseJSON

該函數會解析JSON格式的字符串,返回解析結果。當傳入的格式有誤時,它會拋異常。在定義它的瀏覽器中jQuery使用標準的JSON.parse()函數。注意jQuery只定義JSON解析函數,而沒有定義JSON序列化函數。

8. :hidden

匹配所有在屏幕上不可見的元素,大體上可以認爲這些元素的offsetWidth和offsetHeight爲0。

9. :image

jQuery的擴展方法,匹配<input type="image">元素.不會匹配<img>元素。

10:button

jQuery的擴展方法,匹配<input type="button">和<button type="button">元素

以下是2017-4-18更新
文章太長了,以增加新的篇幅,請查看
http://blog.csdn.net/u010533180/article/details/70226468

jQuery 中一些細節知識點(本文會持續更新)

1.可見性過濾選擇器

2. 選擇器中有無空格

3. 屬性獲取attr 和prop, is()方法和prop方法的效率

4.trigger 和triggerHandler

5.獲取和設置CSS屬性

6.jQuery.isFunction

7.jQuery.parseJSON

8. :hidden

9. :image

10:button

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

使用管理員權限運行vs2013

C# 構造函數避免IL(反編譯)代碼膨脹的方法--C#編譯有點狂啊

JavaScript 自己封裝的Set

重構和設計模式---2016最後一篇博文,也是這一年的心得。

JavaScript中對象轉換爲原始值的步驟

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結