Utilities

Posted on Edited on In Views: Disqus:

 

一、.clearQueue()

請參考Data第一項。

 

二、.dequeue()

請參考Data第三項。

 

三、$.boxModel

has been deprecated

 

四、$.browser

has been deprecated

 

五、$.contains()

檢查是否DOM元素與另一個DOM元素是父子孫關係。

jQuery.contains( Element container, Element contained )

$.contains( document.documentElement, document.body ); // true
$.contains( document.body, document.documentElement ); // false

註：container大於contained時則為true。

 

六、$.data()

請參考Data第二項。

 

七、$.dequeue()

請參考Data第五項。

 

八、$.each()

跟$.each()寫法都是一樣的，此範例作用為將所宣告的陣列與集合的值秀在網頁上

<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>

    <script>
        var arr = ["one", "two", "three", "four", "five"];
        var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };

        //此時i為index(1、2、3...)，val為陣列裡的值("one"、"two"、"three"...)
        $.each(arr, function (i, val) {
            $("#" + val).text("Mine is " + val + ".");
        });

        //此時i為obj的屬性(one、two、three...)，val為obj的值(1、2、3...)
        $.each(obj, function (i, val) {
            $("#" + i).append(document.createTextNode(" - " + val));
        });
    </script>

</body>
</html>

 

九、$.extend()

將n個物件合成一個object。

jQuery.extend( Object target [, Object object1 ] [, Object objectN ] )

jQuery.extend( [ Boolean deep ], Object target, Object object1 [, Object objectN ] )

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery.extend demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <div id="log"></div>

    <script>
        var object1 = {
            apple: 0,
            banana: { weight: 52, price: 100 },
            cherry: 97
        };
        var object2 = {
            banana: { price: 200 },
            durian: 100
        };

        // Merge object2 into object1
        $.extend(object1, object2);

        // Assuming JSON.stringify - not available in IE<8
        $("#log").append(JSON.stringify(object1));
    </script>

</body>
</html>

 

十、$.fn.extend()

jQuery.fn.extend( object )

用來擴充jQuery library的擴充方法。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery.fn.extend demo</title>
    <style>
        label {
            display: block;
            margin: .5em;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <label><input type="checkbox" name="foo"> Foo</label>
    <label><input type="checkbox" name="bar"> Bar</label>

    <script>
        jQuery.fn.extend({
            check: function () {
                return this.each(function () {
                    this.checked = true;
                });
            },
            uncheck: function () {
                return this.each(function () {
                    this.checked = false;
                });
            }
        });

        // Use the newly created .check() method
        $("input[type='checkbox']").check();
    </script>

</body>
</html>

 

十一、$.globalEval()

用來執行JavaScript程式碼。

function test() {
  jQuery.globalEval( "var newVar = true;" )
}
test();
// newVar === true

 

十二、$.grep()

對所傳入的array做條件篩選。

jQuery.grep( ArrayLikeObject array, Function function [, Boolean invert ] )

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery.grep demo</title>
    <style>
        div {
            color: blue;
        }

        p {
            color: green;
            margin: 0;
        }

        span {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <div></div>
    <p></p>
    <span></span>

    <script>
        var arr = [1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];
        $("div").text(arr.join(", "));

        arr = jQuery.grep(arr, function (n, i) {
            return (n !== 5 && i > 4);
        });
        $("p").text(arr.join(", "));

        arr = jQuery.grep(arr, function (a) {
            return a !== 9;
        });

        $("span").text(arr.join(", "));
    </script>

</body>
</html>

 

十三、$.inArray()

在陣列內搜索指定的值，並返回其索引，-1代表沒找到。

jQuery.inArray( Anything value, Array array [, Number fromIndex ] )

 

十四、$.isArray()

判斷這個object是否是個Array。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery.isArray demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    Is [] an Array? <b></b>

    <script>
        $("b").append("" + $.isArray([]));
    </script>
</body>
</html>

 

十五、$.isEmptyObject()

判斷這個object是否是空的。

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({ foo: "bar" }); // false

 

十六、$.isFunction()

判斷這個object是否是個function。

$.isFunction(function() {}); // true

 

十七、$.isNumeric()

判斷這個object是否是JavaScript number。

// true (numeric)
$.isNumeric( "-10" )
$.isNumeric( "0" )
$.isNumeric( 0xFF )
$.isNumeric( "0xFF" )
$.isNumeric( "8e5" )
$.isNumeric( "3.1415" )
$.isNumeric( +10 )
$.isNumeric( 0144 )

// false (non-numeric)
$.isNumeric( "-0x42" )
$.isNumeric( "7.2acdgs" )
$.isNumeric( "" )
$.isNumeric( {} )
$.isNumeric( NaN )
$.isNumeric( null )
$.isNumeric( true )
$.isNumeric( Infinity )
$.isNumeric( undefined )

 

十八、$.isPlainObject()

判斷這個object是否是PlainObject。

jQuery.isPlainObject({}) // true
jQuery.isPlainObject( "test" ) // false

 

十九、$.isWindow()

判斷這個object是否是Window還是iframe。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery.isWindow demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    Is 'window' a window? <b></b>

    <script>
        $("b").append("" + $.isWindow(window));
    </script>
</body>
</html>

 

二十、$.isXMLDoc()

判斷這個DOM node是否是XML document。

jQuery.isXMLDoc( document ) // false
jQuery.isXMLDoc( document.body ) // false