jquery tool Functions

Source: Internet
Author: User

I.. $.browser Object Properties

Property List Description

WebKit WebKit Related Browser Returns TRUE, otherwise it returns false, such as Google, to travel proudly.

Mozilla Mozilla-related browser returns TRUE, otherwise false, such as Firefox

Safari Safari related Browser returns True, otherwise false, such as Safari

Opera-related browsers return true, otherwise false, such as opera

MSIE MSIE Related Browser Returns TRUE, otherwise returns false, such as ie,360, Sogou

Version returns the corresponding browser versions

        $ (function () {            if ($.browser.msie) {                alert ("IE browser");            }            if ($.browser.webkit) {                alert ("WebKit browser");            }            if ($.browser.mozilla) {                alert ("Mozilla browser");            }            if ($.browser.safari) {                alert ("Safari browser");            }            if ($.browser.opera) {                alert ("Opera browser");            }            alert ($.browser.version);        })
Second, Boxmodel

Returns a Boolean value that returns True if it is a box model, otherwise false.

The box model is divided into two categories, one is the box model, and the other is IE box model. The fundamental difference between the two is that the box model does not include padding and border, only the height and width of content, and the IE box model contains padding and border.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

The above example pops up the box model, if you delete the top two lines, <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Operations on arrays and objects

Third, $.each ()

This tool function can not only complete the traversal of the specified array, but also implement the traversal of elements in the page.

Syntax: $.each (OBJ,FN (para1,para2)) obj the array or object to traverse, FN executes the callback function for each traversed element, PARA1 represents the ordinal of the array or the properties of the object, Para2 represents the elements of the array and the properties of the object.

        $ (function () {            var arr = [1, 2, 3, 4, 5];            $.each (arr, function (index, value) {                document.write (index + ":");                document.write (value + "<br/>");            })        
Output:
0:1
1:2
2:3
3:4
4:5

$.each () iterates through the array.

        $ (function () {            var arr = {"Zhang San": "23", "John Doe": 22, "Harry": "$"};            $.each (arr, function (index, value) {                document.write (index + ":");                document.write (value + "<br/>");            })        
Output: Zhang San: 23
John Doe: 22
       Harry: 21

ELEMENT traversal


The three lines of code are the same as the above three lines effect //$.each ($ ("P"), function () { // $ (this). CSS ("Background-color", "Red"); }) }) </script>
Iv. $.grep ()

Filter elements that match the criteria and return a new array

Syntax: $.grep (ARRAR,FN (Value,index)); Note the order of the parameters of the callback function, the first is the value, and the second is the index.

$.grep (ARRAR,FN (Value,index), [bool]); The third parameter indicates whether to reverse, true to reverse, and false to not reverse.

        $ (function () {            var arr = [2, 5, 8];            var arr1 = $.grep (arr, function (value, index) {                return index <= 2 && value < ten;            })            document.write (Arr1.join ()); Output 2,5        })
Liu, $.map ()

Change the data within the function to accept an array or class array object as a parameter

        $ (function () {            var arr = [2, 5, 8];            var arr1 = $.map (arr, function (value, index) {                if (value > 5 && Index < 3) {                    return value-10;
   }            )            document.write (Arr.join () + "<br/>");        2,5,34,22,8 can see that the original array does not change            document.write (Arr1.join ()); 24 The new array only gets the result after the Operation        })
Vii. $.inarray ()

Returns the index of the searched element if there is a searched element in the array

        $ (function () {            var arr = [1, 2, 3, 4, 5];            Alert ($.inarray (4,arr)); Popup 3        })
Viii. $.trim ()

Remove spaces on both sides of a string

        $ (function () {            var str = "Are you all right in your hometown?" ";            document.write ("one" + str + "one" + "<br/>"); Output 11 Are you all right in your hometown?   One            document.write ("one" + $.trim (str) + "11"); Output 11 Are you all right in your hometown? 11//Add a 11 to see the difference.        })
Nine, test operation

$.isarray (obj) detects if the parameter is an array

$.isfunction (obj) detects if a parameter is a function

$.isemptyobject (obj) detects if the parameter is an empty object

$.isplainobject (obj) detects whether the parameter is a purely object, that is, whether the object was created through the {} or New object () keyword.

$.contains (container,contained) detects if a DOM node contains another DOM node. Yes returns True otherwise indicates false. Note that the parameter is a DOM object that is not a jquery object.

        $ (function () {            var arr = [1, 2, 3, 2, 1];            document.write (Jquery.isarray (arr)); Returns True            var str = "123";            document.write (Jquery.isarray (str)); Returns false
})
        $ (function () {            var f = fun1;            Alert ($.isfunction (FUN1)); return True        })        function Fun1 () {}
        $ (function () {            var obj1 = {};            var obj2 = {name: "Zhang Fei"};            Alert ($.isemptyobject (OBJ1));  Returns True Obj1 is an empty object            alert ($.isemptyobject (OBJ2)); Returns false Obj2 is not an empty object        })
        $ (function () {            var obj1 = {};            var obj2 = {name: "Zhang Fei"};            var obj3 = new Object ();            var obj4 = null;            Alert ($.isplainobject (OBJ1));  True to create            alert ($.isplainobject (OBJ2)) through {};  True to create            alert ($.isplainobject (OBJ3)) through {};  True to create            alert ($.isplainobject (OBJ4)) with new Object (); Flase not created by {} or new Object        })
        $ (function () {            alert ($.contains ($ ("#div1") [0],$ ("#p1") [0]); Returns true, note that the parameter is a DOM object, not a jquery object        })
Ten, $.param ()

Serialized into URL string

$.param (Obj,[bool]); The second parameter is an optional parameter, indicating whether shallow serialization

        $ (function () {            var man = {Name: "Zhang Fei", age:23};            var str = $.param (man);            document.write (str); Name=%e5%bc%a0%e9%a3%9e&age=23            var str1 = decodeURI (str);            document.write ("<br>" + str1); Name= Zhang Fei &age=23        })
Xi. $.makearray ()

Copies the properties of an array or class array object to a new array (really an array) and returns the new array.

        var arr = [1,3,5,7,9];        $ (function () {            var arr1 = $.makearray (arr);            document.write (Arr1.join ()); Output 1,3,5,7,9        })
12, $.merge ()

The function accepts two arrays or class array objects, appends the second parameter to the first parameter, returns the first argument, the first array is modified, and the second does not.

        var arr1 = [1, 3, 5, 7, 9];        var arr2 = [2, 4, 6, 8, ten];        $ (function () {            var arr3 = $.merge (arr1, arr2);            document.write (Arr1.join () + "<br/>");    1,3,5,7,9,2,4,6,8,10            document.write (arr2.join () + "<br/>");    2,4,6,8,10            document.write (arr3.join () + "<br/>");    1,3,5,7,9,2,4,6,8,10        })
13, $.parsejson ()

The function parses a JSON-formatted string and returns a parse result (object). Similar to Json.parse (), note: jquery defines only JSON parsing functions, and does not define serialization functions.

        var man = {name: "Zhang San", age:23};        var str = json.stringify (man);        document.write (str + "<br/>");  {"Name": "Zhang San", "Age":        man1 var = $.parsejson (str);        document.write (Man1.name + man1.age);   Zhang 323
14, $.proxy ()

The bind () method, similar to the function object, takes the functions as the first argument, the object as the second argument, and returns a new function that is called as a method of the second parameter object.

$ (function () {var obj = {name: "John", Test:function () {alert (this.name);  When the button with ID test is clicked, the name pops up ("#test"). Unbind ("click", Obj.test);    and cancel the event bindings (next click will not pop up the name)}};  $ ("#test"). Click (Jquery.proxy (obj, "test")); Bind method Test} in Object)
XV, $.unique (array)

Delete a repeating element in an array of elements

$ (function () {    var arr = [1, 2, 3, 2, 1];    Jquery.unique (arr);    Alert (Arr.join ()); Return 3,2,1})
16, $.extend ()

Merging elements in an object

$ (function () {    var result=$.extend ({},{name: "Tom", age:21},    {name: "Jerry", Sex: "Boy"}); alert (result.name);    Output Jerry behind will overwrite the previous, result is always just an object})

Omitting the dest parameter, the dest parameter in the Extend method prototype can be omitted, and if omitted, the method can have only one src parameter, and the SRC is merged into the object that invokes the Extend method.

It is important to note that the following value overrides the previous name.

$ (function () {    $.extend ({        hello:function () {alert (' Hello ');} The method has only one parameter, which means that the Hello method is merged into the jquery Global Object    });    $.hello ();    Popup Hello})

namespaces Example:

$ (function () {    $.extend ({net:{}});        Extend a namespace    $.extend ($.net,{        hello:function () {alert (' Hello ');}    Bind the Hello method to namespace net    })    $.net.hello ();    Calling methods through the net namespace})

Copy method Prototypes:

Extend (BOOLEAN,DEST,SRC1,SRC2,SRC3 ...)

The first parameter, Boolean, indicates whether to make a deep copy.

$ (function () {    var result=$.extend (True,  {},          {name: "John", Location: {City: "Boston", Country: "USA"}},          {last: ' Resig ', location: {state: ' MA ', Country: ' China '}});     alert (result.location.state);        Output MA    //result={name: ' John ', Last: ' Resig ', location:{city: ' Boston ', State: ' Ma ', County: ' China '}    var result=$.extend (False,  {},          {name: "John", Location: {City: "Boston", Country: ' USA '}},          {last: " Resig ", Location: {state:" MA ", Country:" China "});     alert (result.location.city);        Output undefined    //result={name: "John", Last: "Resig", Location:{state: "MA", County: "China"}}    note No city, Just merge the attributes inside the location,location regardless of})

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.