JQuery tool function learning materials

• URL
• String operation
• Array and object operations
• Test Operation
• Browser

1: URL operation:

$. Param (obj)

Return Value: string;

Description: serialize jquery objects into URL parameters by name/value or key/value, and connect them.

Example:

Var obj = {name: zh, age: 20 };
Alert (jQuery. param (obj ));
// Alert "name = zh & age = 20 ";

2: String operation:

JQuery. trim (str)

Return Value: string;

Note: Remove spaces at the beginning and end of the string.

Example:

Alert ($. trim ("123 "));
// Alert "123 ";

3: array and object operations:

(1 ):

&. Each (obj, callback)

Note:

The general example method can be used for example object and array.

Unlike the $ (). each () method of the jQuery object, this method can be used to sample any object.

The callback function has two parameters: the first is the object's member or array index, and the second is the corresponding variable or content.

If you want to exit the each loop, the callback function returns false. Other return values are ignored.

Example:

Var a = [0, 1, 2, 3, 4, 5];
$. Each (a, function (I, n) {document. write ("" + I + "and" + n + "<br/> ");});

// Result:

/* 0 and 0
1 and 1
2 and 2
3 and 3
4 and 4
5 and 5I */

 

(2 ):

$. Extend (obj, default, option)

Note:

This function is most often used to process options when developing plug-ins.

The code for the fancybox plug-in to obtain options is as follows:

settings = $.extend({}, $.fn.fancybox.defaults, settings);

The above Code target is an empty object. It sets ults as the first object by default, and combines the settings setting passed by the user to the default object. The setting attribute prevails. if setting does not input a property, use the default value of default. then, copy the merged result to target and return it as the return value of the function.

Take a complete example:

var empty = {} var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = jQuery.extend(empty, defaults, options);

/*result：

settings == { validate: true, limit: 5, name: "bar" } empty == { validate: true, limit: 5, name: "bar" }*/

// The target parameter must pass an empty object because the target value will be changed at the end. For example:

var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = jQuery.extend(defaults, options);

The above Code uses ults as the target parameter. Although the final settings result is the sameThe value of ults has been changed! The default values in the plug-in should be fixed!Therefore, pay attention to the usage of the target parameter.

(3): Screening

JQuery. grep (array, callback, [invert])

Returned value: Array

Note:

Filter Array elements using the filter function.

This function must pass at least two parameters: the array to be filtered and the filter function. The filter function must return true to retain the element or false to delete the element.

Explanation:

The default invert is false, that is, the filter function returns true to retain elements. If invert is set to true, the filter function returns true to delete elements.

The following example shows how to filter elements whose indexes are less than 0 in an array:

$.grep( [0,1,2], function(n,i){ return n > 0; });

// Results: [1, 2]

 

(4). Conversion

JQuery. map (array, callback)

Return Value:Array

Note:

Convert the elements in one array to another.

The conversion function, as a parameter, calls each array element and transmits an element to the conversion function as a parameter.

The conversion function can return the converted value, null (delete items in the array), or an array containing values, and extend it to the original array.

Example:

Var arr = ["a", "B", "c", "d", "e"];

$ ("Div"). text (arr. join (","));

Arr = jQuery. map (arr, function (n, I) {return (n. toUpperCase () + I );});

$ ("P"). text (arr. join (","));

Arr = jQuery. map (arr, function (a) {return a + ;});

Alert (arr. join (","));

// Alert A0A0, B1B1, C2C2, D3D3, E4E4

(5)

JQuery. makeArray (obj ),JQuery. inArray (value, array),JQuery. merge (first, second),

JQuery. unique (array)I will not introduce them one by one,

The join () and split () Methods of JavaScript are also important.

4: Test Operation:

(1 ):

$. IsFunction (fn)

Return Value: Boolean;

Note: test whether it is a function;

Example:

Var fn = function (){};

Alert ($. isFunction (fn ));

// Alert true;

(2 ):

$. IsArray (obj );

Return Value: Boolean;

Note: whether the test is an array:

Example: omitted;

(3 ):

JavaScript only includes isNan () and isFinite (): Non-numbers and infinity;

 

5. browser objects:

 

JQuery's excellence lies in its cross-browser features. Generally, we do not need to write different codes for different browsers. however, jQuery developers or plug-in developers must handle browser differences on their own to provide users with cross-browser features.

JQuery provides the following attributes for obtaining browser features:

JQuery. support	New versions after 1.3
JQuery. browser	Abolished
JQuery. browser. version	Abolished
JQuery. boxModel	Abolished

$. Support:

Added jQuery 1.3. A set of attributes used to display different browser features and bugs.

JQuery provides a series of attributes, and you can freely add your own attributes. Many of these attributes are very low-level, so it is hard to say whether they can remain effective in the ever-changing development, but these are mainly used for plug-ins and kernel developers.

All these supported attribute values are implemented through feature detection, rather than any browser detection. There are some great resources to explain how these Feature Detection works:

• Http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting
• Http://yura.thinkweb2.com/cft/
• Http://www.jibbering.com/faq/faq_notes/not_browser_detect.html

JQuery. support mainly includes the following tests:

BoxModel: If the page and browser are rendered in W3C CSS box model, the value is true. Generally, this value is false in the geek mode of IE 6 and IE 7. This value is null before the document is ready.

CssFloat: If CSS float is used to access the CSS float value, true is returned. At present, false is returned in IE. He uses styleFloat instead.

HrefNormalized: True is returned if the returned result from getAttribute ("href") is unfrozen. In IE, false is returned because its URLs has been normalized.

HtmlSerialize: If the browser serializes these links when inserting link elements through innerHTML, true is returned. Currently, false is returned in IE.

LeadingWhitespace: If the browser retains leading white spaces when using innerHTML, true is returned. Currently, false is returned in IE 6-8.

NoCloneEvent: If the browser does not copy the cloned element together with the event processing function, true is returned. Currently, false is returned in IE.

ObjectAll: If getElementsByTagName ("*") is executed on an element object, all child elements are returned. The value is true. Currently, the value is false in IE 7.

Opacity: If the browser can properly interpret the transparency style attribute, true is returned. Currently, false is returned in IE because it is replaced by the alpha filter.

ScriptEval: Whether the Browser executes the script when using the appendChild/createTextNode method to insert the script code. Currently, false is returned in IE. IE inserts the script code using the. text Method for execution.

Style: True if getAttribute ("style") returns the row style of the element. Currently, false is used in IE because it is replaced by cssText.

Tbody: If the Browser allows the table element to not contain the tbody element, true is returned. At present, false is returned in IE, and the missing tbody is inserted automatically.