Detailed explanation of jQuery function_jquery

In JavaScript programming, developers usually need to write many small programs to implement some specific functions. For example, browser detection, string processing, array editing, etc. jQuery summarizes these commonly used programs and provides many practical functions.

1. Detect browser.

jQuery obtains browser information through the $.browser object.

Property Description
msie If it is ie, it is true, otherwise it is false
mozilla is true if it is a mozilla-related browser, otherwise false
safari If it is Safari browser, it is true, otherwise it is false
poera If it is opera browser, it is true, otherwise it is false
version browser version number
When used, developers can directly call these properties to obtain browser properties. As follows:

Copy code The code is as follows:

         

2. Box model

The $.boxModel object is provided in jQuery to detect the box model currently followed. It is a Boolean value. When true, it means following the w3c standard box model. If false, it is the ie box model

var sBox = $.boxModel ? "Standard W3C" : "IE";

Document.write("Your page currently supports:" sBox "Box Model");

3. Process javascript objects.

In JavaScript programming, it can be said that all variables are objects, such as strings, dates, and values.

jQuery provides some editing methods to process related objects, such as the $.trim() function (removing leading and trailing spaces) function is one of them

i. Use $each() method to traverse

The each() method was introduced earlier, which is used to traverse elements in selectors. Similarly, for JavaScript arrays and objects, you can use the $.each() method to traverse.

$.each(object,fn);

Among them, object is the object that needs to be traversed, and fn is the function executed by each element in object. The function fn can accept two parameters. The first parameter is the serial number of the array element or the attribute of the object. The second parameter is the value of the element or attribute.

Example: Use $.each() function to traverse arrays and objects

Copy code The code is as follows:

As you can see from the above example, $.each() is very convenient for traversing arrays and objects. For example, for unknown attributes $.browser, use $.each to traverse

$.each($.browser, function(iNum, value) {

                                                                                                                                                                                                                                                                                          // levy array

                       document.write("property" iNum "value" value "
");
            });
Worth:

Attribute chrome value true

Attribute version value 39.0.2171.99

Attribute webkit value true
ii. Filter data

For the data in the array, developers often need to filter it. If pure JavaScript is used, a for loop is often required to check one by one. jQuery provides the $.grep() method. Can easily filter array data.

The syntax is as follows:

$.grep(Array,fn,[invert])

Among them, array is the name of the array object that needs to be filtered, and fn is the filter function. For each object in the array, if it returns true, it will be retained, otherwise it will be removed. The optional invert is a Boolean value. If set to true, the function fn is inverted and those that meet the conditions are removed.

Copy code The code is as follows:

var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];

               var aResult = $.grep(aArray, function(value) {
                   return value >= 4;
           });                                                                   document.write(aResult.join());



First define the array aArray, and then use the $.grep() method to select the value greater than or equal to 4 to get a new array

Example 2, advanced method of filtering arrays.

Copy code The code is as follows:

iii conversion array

Many times developers hope that the elements in an array can be transformed uniformly, such as multiplying all elements by 2. Although this can be achieved in javascript such as a for loop, jQuery provides a more convenient $.map ()method. This method is as follows

$.map(array,fn)

Among them, array is the array to be converted, and fn is the conversion function, which is executed for each item in the array. This function can also accept two functions, and one parameter is the value of the element. The two parameters are the serial numbers of the elements and are optional parameters.

Copy code The code is as follows:

A0,B1,C2,D3,E4,F5,G6,H7,I8

A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8

After using the $.map() function to transfer, the length of the array is not necessarily the same as the original array. Elements of an array can be removed by setting null.

Copy code

The code is as follows:

Copy code

The code is as follows:                 $(function() {

            var aArray = ["one", "two", "three", "four", "five"];

                       $("p:eq(0)").text(aArray.join());
cArray =$.map(aArray,function(value){
                         return value.split("");
                });
                $("p:eq(1)").text("cArray length: " cArray.length " value: " cArray.join());
            });
                                                                                                                                                                                                                                                                             


Execution results

one,two,three,four,five

cArray length: 19 values: o,n,e,t,w,o,t,h,r,e,e,f,o,u,r,f,i,v,e

During the $.map conversion process of the above code, the split("") method splits the elements into letters

iiii Search array elements

For strings, you can use indexOf() to search for the position of a specific character. For array elements, JavaScript does not provide a similar method. In jQ, the $.inArray() function can provide a good search function for array elements. The syntax is as follows:

$.inArray(value,array)
Among them, value is the object you want to find, and array is the array itself. If found, the position of the first matching element in the array is returned. If not, return -1.

Copy code

The code is as follows:

In some larger projects, developers put different js in different js files, and sometimes load different codes based on subsidy requirements. jQuery provides $.getScript() to implement external code loading. How to use:

$.getScript(url,[callback])

Among them, url is the address of an external resource, which can be a relative or absolute address. callback is the callback function after successful loading, optional.

Copy code The code is as follows:

                $(function() {

                        $("p:eq(0)").click(function() {
                           $.getScript("1.js");
                });
                     $("p:eq(1)").click(function() {
                        textfun();
                });
            });
                                                                                                                                                                                                                                                                                                           

Click 1

& Lt; p & gt; click 2 & lt;/p & gt;



The 1.js code is

Copy code

The code is as follows: alert("Loading ok!") function textfun(){

alert("testfun")

};