What are the categories of tool functions in jquery?

Tool function categories in jquery: 1. Operations on arrays and objects, such as the "$.each()" function to traverse arrays and "grep()" function data filtering; 2. String operations, such as " The $.trim()" function removes spaces; 3. Test operations, such as the "$.contains()" function to detect DOM nodes; 4. URL operations, such as the "$.proxy()" function binds the scope of the event; 5. Browser detection, such as obtaining the properties of the "$.browser" object.

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

Tool function in jquery

What is a tool function

In jQuery, a tool function refers to a tool function that is directly attached to a jQuery object and targets a jquery object The definition itself, that is, global functions, are collectively called tool functions, or Utilities functions. They have an obvious feature. Generally, they are called in the following format:

$.函数名()或jquery.函数()

Classification of tool functions

According to tool functions Different processing objects can be divided into the following categories:

• Browser detection

• Array and object operations

• String operations

• Test operations

• ##URL operations

Browser detection

In browser detection, it can be divided into detection of browser type and characteristics. The former obtains the name of the browser or Version information, the latter detects that the browser supports the standard W3C box model.

Browser name or version information

Although jquery has good browser compatibility, sometimes program developers need to obtain browser-related information for Provides the user or program. In jquery, it can be obtained by accessing the properties of the $.browser object. The $.browser object is the jQuery.browser object, which is used to handle browser-related transactions. The properties of this object are as follows:

Box model

The box model is an exclusive noun in CSS, used to describe various attributes in page settings

The width and height of the W3C box model do not include padding and border

IE box The model width and height include padding and border

##$.support.boxModel property. If true, it is the W3C box model, otherwise it is the IE box model.

Array and object operations1) Traverse the array

Use the $.each() tool function, not only To realize the traversal of elements in the page, you can also complete the traversal of the specified array. The syntax format of the call is as follows:

　　$.each(obj,fn(para1,para2))

The parameter obj represents the array or object to be traversed, and fn is the callback executed for each traversed element. Function, this function contains two parameters, para1 represents the serial number of the array or the properties of the object, and para2 represents the elements of the array and the properties of the object.

2) Traverse the object

$. In addition to traversing the array, the each() function can also traverse the object and obtain the properties and values ​​of the object.

3) Data filtering

When operating an array, sometimes it is necessary to filter elements according to various conditions. Traditional JavaScript code will traverse the entire array and set the elements of the filtering rules during the traversal. When using grep() in jQuery, the format is as follows:

$.grep(array,function(elementOfArray,indexInArray),[invert])

Among them, the parameter array is the original array to be filtered, and two parameters can be set in the callback function fn, where elementOfArray is the element in the array and indexInArray is The serial number of the element in the array; in addition, the optional [invert] is a Boolean value, indicating whether to invert the result according to the rules of fn. The default value is false, which means not to invert. If it is true, it means to invert, that is, return Data contrary to the rules of callback function fn.

Conditions In the return of unloading fn, for example: ele >5 && index

4) Data change

Modify the selected elements in the array according to the specified conditions ,

$.map(array,fn(eleArr,indexArr))

Among them, the parameter array is the original array to be changed, and two parameters can be set in the callback function fn, where eleArr is the element in the array, and indexArr is the serial number of the element in the array.

5) Data search

In jQuery, if you want to search for an element in an array, you can use the utility function $.inArray(), which is equivalent to using indexOf( in JavaScript ) searches for a certain character in a string. In the tool function $.inArray(), if a specified element is found, the index number of the element in the array is returned, otherwise, a value of -1 is returned. The calling format is as follows:

$.inArray(value,array)

Among them, the parameter value represents the object to be searched, and array represents the array of search objects.

String operation#If you want to remove the spaces on the left and right sides of the characters, you can use the tool function $.trim().

$.trim(str)

Test operation

原始对象：即对象是否通过{}或 new Object()关键字创建

$.contains()函数

$.contains()函数用于检测在一个DOM节点中是否包含另外一个DOM节点，其语法如下：

$.contains(container,contained)

其中：参数container为Object，是一个DOM元素，作为容器，可以包含其他DOM元素；参数contained也是一个DOM是一个节点，可能被其他元素包含。整个函数返回一个布尔值，如果包含返回true，否则返回false。

URL操作

$.param(obj,[traditional])

其中：参数obj表示需要进行序列化的对象，该对象可以是数组、jQuery元素、普通对象；可选项参数[traditional],表示是否使用普通话的方式浅层序列化，该函数返回一个序列化，该函数返回一个序列化后的字符串。

$.extend()扩展工具函数

$.proxy()函数 改变绑定事件的作用域

视频教程推荐：jQuery视频教程

The above is the detailed content of What are the categories of tool functions in jquery?. For more information, please follow other related articles on the PHP Chinese website!