jQuery tool functions

jquery provides us with tool functions for operating arrays and objects, which facilitates and simplifies our operations on them. Today we will get into the review of jQuery’s tool functions.

jQuery provides us with 5 main types of tool functions:

• URL

• StringOperation

• Array and object operations

• Test operation

• Browser

1：URL operation：

$.param(obj)

Return: string;

Description: The jquery object is serialized into URL parameters according to name/value or key/value, and connected with &.

Example:

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

2: String operation:

jQuery.trim(str)

Return: string;

Description: Remove leading and trailing spaces from the string.

Example:

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

3: Arrays and objects Operation:

(1) :

&.each(obj,callback)

Description:

General instance method, can be used to instance objects and array.

Unlike the $().each() method that iterates over jQuery objects, this method can be used to iterate over any object.

Callback function has two parameters: the first is the member of the object or the index of the array, and the second is the corresponding variable or content.

If you need to exit the each loop, you can make the callback function return false, and other return values ​​will be ignored.

Example:

var a =[0,1,2,3,4,5];
$.each(a,function(i,n){document.write (""+i+" and " +n +"
");});

//result:

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

(2):

$.extend(obj,default,option)

Description:

This function is most commonly used to handle options when developing plug-ins.

The following It is the code for the fancybox plug-in to obtain options:

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

The target of the above code is an empty object, and the default settings defaults are used as the first object, and the settings passed in by the user are merged into default. The attributes are subject to the setting. If the setting does not pass in the attribute, the default value of default is used. Then the merged result is copied to the target and returned as the function return value.

See 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 needs to pass an empty object because the value of the target will eventually be changed. 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 defaults as the target parameter. Although the final settings result is the same, ## The value of #defaults has been changed! The default values ​​in the plug-in should be fixed! So please pay attention to the usage of the target parameter when using it.

(3): Filter

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

Return value: Array

Description:

Use filter function to filter array elements.

This function passes 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 remove the element.

Explanation:

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

The following example demonstrates how to filter elements in an array with index less than 0:

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

//results:[1,2]

(4) .Conversion

jQuery.map(array, callback)

Return value:Array

Description:

Convert elements in one array to another array.

The conversion function as a parameter will be called for each array element, and the conversion function will be passed a parameter representing the element being converted.

The conversion function can return the converted value, null (removes the item in the array), or an array containing the value expanded into the original array.

Example:

var arr = [ "a", "b", "c", "d", "e" ];

$("p" ).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 + 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 won’t introduce them one by one,

and JavaScript’s join() and The split() method is also important.

4: Test operation:

(1):

$.isFunction(fn)

Return: Boolean;

Description: Test whether it is a function;

Example:

var fn =function(){};

alert($.isFunction(fn));

//alert true;

(2):

$.isArray(obj);

Return: Boolean;

Description: Test Whether it is an array:

Example: omitted;

(3):

JavaScript only has isNan() and isFinite(): non-number and infinity;

5: Browser object:

The excellence of jQuery lies in its cross-browser features. Usually we don’t need to write different objects for different browsers. Code. But if you are a jQuery developer or plug-in developer, you must handle browser differences by yourself in order to provide users with cross-browser features.

jQuery provides the following properties for obtaining browser features:

DeprecatedDeprecated

jQuery.support	Newly added after version 1.3
jQuery.browser	Deprecated
##jQuery.browser.version
jQuery.boxModel

$ .support:

New in jQuery 1.3. A set of properties used to display the features and bugs of different browsers.

jQuery provides a series of properties, and you can also add your own properties freely. Many of these properties are very low-level, so it's hard to say whether they will remain effective over time, but these are mainly intended for plugin and kernel developers.

All these supported attribute values ​​are implemented through feature detection, rather than any browser detection. Here are some great resources explaining how these feature detections work:

• 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 this page and the browser Is rendered using the W3C CSS box model, equals true. Normally this value is false in quirks mode of IE 6 and IE 7. This value is null until the document is ready.

cssFloat

: Returns true if cssFloat is used to access the CSS float value. Currently, false is returned in IE, and styleFloat is used instead.

hrefNormalized

: Returns true if the browser returns the intact result from getAttribute("href"). In IE it will return false because its URLs have been normalized.

htmlSerialize

: If the browser will serialize these links when inserting link elements through innerHTML, it will return true. Currently, IE returns false.

leadingWhitespace

: Returns true if the browser will keep leading whitespace characters when using innerHTML, currently returns false in IE 6-8.

noCloneEvent

: Returns true if the browser will not copy the element together with the Event handling function when cloning the element. Currently, it returns false in IE.

objectAll

: true if executing getElementsByTagName("*") on an element object will return all descendant elements, currently in IE 7 false.

opacity

: Returns true if the browser can properly interpret the transparency style attribute, currently returns false in IE because it uses an alpha filter instead.

scriptEval

: When using the appendChild/createTextNode method to insert script code, whether the browser executes the script, currently returns false in IE, and IE uses the .text method to insert script code for execution.

style

: True if getAttribute("style") returns the element's inline style. Currently it is false in IE because it uses cssText instead.

tbody

: Returns true if the browser allows table elements not to contain tbody elements. Currently, false is returned in IE, and it will automatically insert the missing tbody. There are similar articles in this blog, please see:

Directory summary of my jQuery series

The above is the detailed content of jQuery tool functions. For more information, please follow other related articles on the PHP Chinese website!