JQuery understanding (2) functional functions; jquery understanding functional functions

JQuery understanding (2) functional functions; jquery understanding functional functions

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

1. Check the browser.

JQuery obtains browser information through the $. browser object.

Attribute	Description
Msie	If ie is true, otherwise false
Mozilla	If the mozilla-related browser is true, otherwise false
Safari	If the Safari browser is true, otherwise false
Poera	If operabrowser is true, otherwise false
Version	Browser version number

During use, developers can directly call these attributes to obtain browser attributes. As follows:

<Script type = "text/javascript"> $ (function () {function detect () {if ($. browser. msie) return "IE"; if ($. browser. mozilla) return "Mozilla"; if ($. browser. safari) return "Safari"; if ($. browser. opera) return "Opera";} var sBrowser = detect (); document. write ("your browser is:" + sBrowser + "<br> Version:" + $. browser. version)}); </script>

2. Box Model

$. BoxModel object is provided in jQuery to detect the currently followed box model. It is a Boolean value. If it is true, it indicates that the w3c standard box model is followed. If it is 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, we can say that all variables are objects, such as strings, dates, and values.

JQuery provides some editing methods to process related objects. For example, the $. trim () function (space removal at the beginning and end) is one of them.

I. Use the $ each () method to traverse

The each () method is introduced in http://www.cnblogs.com/ahthw/p/4232813.htmlfor element traversal in the selector. You can also use the $. each () method to traverse javascript arrays and objects.

$.each(object,fn);

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

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

<Script type = "text/javascript"> var aArray = ["one", "two", "three", "four", "five"]; $. each (aArray, function (iNum, value) {// array document. write ("Serial Number" + iNum + "value" + value + "<br>") ;}); var oObj = {one: 1, two: 2, three: 3, four: 4, five: 5}; $. each (oObj, function (pro, value) {// pair object document. write ("attribute" + pro + "value" + value + "<br>")}); </script>

From the above example, we can see that $. each () is very convenient for Traversing arrays and objects. For example, for unknown attributes $. browser, we use $. each for traversing.

$. Each ($. browser, function (iNum, value) {// list the array document. write ("attribute" + iNum + "value" + value + "<br> ");});

Value:

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, they often need to perform a for loop check one by one. JQuery provides the $. grep () method. It can easily filter array data.

The syntax is as follows:

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

Here, array is the name of the array object to be filtered. fn is the filter function. If true is returned for each object in the array, it is retained; otherwise, it is removed. The optional invert is a Boolean value. If it is set to true, the fn function is reversed, and any matching conditions are removed.

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 a value greater than or equal to 4 to obtain the new array.

Example 2: advanced method for filtering arrays.

<Script type = "text/javascript"> 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, index) {// determine return (value >=4 & index> 3) ;}at the same time for element values and serial numbers; document. write (aResult. join (); </script>

Iii conversion Array

In many cases, developers expect that elements in an array can be converted in a unified manner. For example, all elements are multiplied by 2. although the for loop can be implemented in javascript, jQuery provides more convenient $. map () method. This method is as follows:

$.map(array,fn)

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

<Script type = "text/javascript"> $ (function () {var aArray = ["a", "B", "c", "d", "e ", "f", "g", "h", "I"]; $ ("p: eq (0 )"). text (aArray. join (); aArray = $. map (aArray, function (value, index) {// converts the array to uppercase and adds the serial number return (value. toUpperCase () + index) ;}; $ ("p: eq (1 )"). text (aArray. join (); cArray = $. map (aArray, function (value) {return value + value;}); $ ("p: eq (2 )"). text (cArray. join () ;}); </script> <p> </p>

Execution result

a,b,c,d,e,f,g,h,iA0,B1,C2,D3,E4,F5,G6,H7,I8A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8

After the $. map () function is used for transfer, the array length is not necessarily the same as that of the original array. You can delete array elements by setting null.

<Script type = "text/javascript"> $ (function () {var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8]; $ ("p: eq (0 )"). text (aArray. join (); $ ("p: eq (1 )"). text ("aArray length:" + aArray. length + "value:" + aArray. join (); cArray = $. map (aArray, function (value) {// + 1 greater than 1 is returned. Otherwise, return value> 1 by setting it to null? Value + 1: null;}); $ ("p: eq (2 )"). text ("cArray length:" + cArray. length + "value:" + cArray. join () ;}); </script> <p> </p>

In addition to deleting elements, $. map can also add array elements when converting arrays.

<Script type = "text/javascript"> $ (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 () ;}); </script> <p> </p>

Execution result

One, two, three, four, fivecArray length: 19 values: o, n, e, t, w, o, t, h, r, e, e, f, o, u, r, f, I, v, e

The above code splits an element into letters in the split ("") method during $. map conversion (refer to the http://www.cnblogs.com/ahthw/p/4126834.html for the split () method)

Iiii search array elements

For strings, you can use indexOf () to search for the location of a specific character (javascript approach can refer to the http://www.cnblogs.com/ahthw/p/4113280.html), and javascript does not provide a similar approach for array elements. In jQ, the $. inArray () function provides a good search function for array elements. Syntax:

$.inArray(value,array)

Here, value is the object to be searched, array is the array itself, if found, the First Matching Element is returned in the array position. If not,-1 is returned.

    <script type="text/javascript">            $(function() {                var aArray = ["one", "two", "three", "four", "five"];                var cx1 = $.inArray("two", aArray);                var cx2 = $.inArray("www", aArray);                $("p:eq(0)").text(cx1);                $("p:eq(1)").text(cx2);            });        </script>        <p></p>        <p></p>

4. obtain external code

In some major projects, developers place different js files in different js files, and sometimes load different codes according to subsidy requirements. JQuery provides $. getScript () for external code loading. The usage is as follows:

$.getScript(url,[callback])

The url is the address of an external resource, which can be relative or absolute. Callback is the callback function after successful loading. Optional.

<Script type = "text/javascript"> $ (function () {$ ("p: eq (0 )"). click (function () {$. getScript ("1.js") ;}; $ (" p: eq (1 )"). click (function () {textfun () ;}); </script> <p> click 1 </p> <p> click 2 </p>

The 1. js code is

Alert ("load OK! ") Function textfun () {alert (" testfun ")};

(This section is complete)