jquery Common tool methods

Previous words

jquery provides some element-independent tool methods that you can use directly without having to select the elements. If you understand the inheritance principle of native JavaScript, then you can understand the nature of tool methods. It is a method defined on the jquery constructor, i.e. Jquery.method (), so it can be used directly. The methods that manipulate elements are those that define the prototype object on the constructor, that is, JQuery.prototype.method (), so you must generate an instance (that is, select the element) to use. It is OK to use the tool method to understand the method that can be used directly in the image JavaScript native function. Here's a more detailed introduction to jquery's Common tools approach

Element-related

"Each ()"

It is a general-purpose iterative function that can be used to iterate objects and arrays seamlessly. Arrays and array-like objects iterate through a numeric index, from 0 to length-1, through a length attribute, such as a function's parameter object. Other objects iterate through their property names

Jquery.each (collection, Callback (Indexinarray, valueofelement))

The Jquery.each () function is not the same as jquery (selector), which is designed to traverse a jquery object. The Jquery.each () function can be used to iterate over any collection, whether it is a "name/Value" object (JavaScript Object) or an array. In the case of an iterative algebraic group, the callback function passes an array index and the corresponding array value as an argument each time. (This value can also be obtained by accessing the This keyword, but JavaScript will always use the this value as an object, even if it is a simple string or numeric value.) The method returns its first argument, which is the object of the iteration

function (index,value) {    //index #0: a    //index #1: b    // Index #2: C    Console.log ("Index #" + Index + ":" + value);});

function (index,value) {    //index #name: John    //index #lang: JS    Console.log ("Index #" + Index + ":" + value);});

"Contains ()"

Check that one DOM element is a descendant of another DOM element

Jquery.contains (container, contained)

// true

"Extend ()"

Merges the contents of two or more objects into the first object

Jquery.extend (Target [, Object1] [, objectn]) target:object An object if the attached object is passed to this method will then it will receive the new attribute if it is the only parameter that will extend the jquery namespace. Object1:object an object that contains additional attributes merged into the first parameter Objectn:object contains additional attributes merged into the first parameter

$.extend ({}, Object1, object2);

Jquery.extend ([deep], Target, Object1 [, objectn]) Deep:boolean If true, merging becomes recursive (also known as a dark copy). Target:object object extension. This will receive the new attribute. Object1:object an object that contains additional attributes that are merged into the first parameter. Objectn:object contains additional attributes merged into the first parameter

$.extend (True, Object1, object2);

Data related

"Data ()"

Stores arbitrary data to the specified element and/or returns the value of the setting

Jquery.data (element, key, value) Jquery.data (element, key)
Jquery.data (Element)

Element:element the DOM object to associate the data key:string the stored data name value:object the new data value

$.data (document.body, ' foo ',' bar ', ' Test '' foo '); // Console.log ($.data (document.body)); // {foo:52, bar: ' Test '}

"Removedata ()"

Delete a previously stored piece of data

Jquery.removedata (element [, name])

var div = $ ("div""Test1", "VALUE-1""Test2", "VALUE-2"), Console.log ($.data (Div)); // {test1: "VALUE-1", Test2: "VALUE-2"}$.removedata (Div, "test1"); Console.log ($.data (Div)); // {test2: "VALUE-2"}

Type detection

"Type ()"

The type () method is used to detect the types of JavaScript objects

If the object is undefined or null, the corresponding "undefined" or "null" is returned

Jquery.type (undefined) = = = "undefined" = == "undefined"= = = "undefined"null ) = = = " Null

If the object has an internal [[class]] and a browser's built-in object [[Class]], return the corresponding [[class]] Name

true ) = = = "boolean" 3) = == "number" "Test")= = = = "string"function() {}) = = = "function" /c5>=== "Array"new date ()) = = = "Date"new Error ()) = == "Error"/test/) = = = "RegExp"

So this approach is similar to the encapsulated Object.prototype.toString () method in native JavaScript

function type (obj) {    return Object.prototype.toString.call (obj). Slice (8,-1). toLowerCase ();

"IsArray ()"

In native JavaScript, array detection is a classic problem, and array detection is no longer easy when a scene with multiple frames is present in the page

jquery provides the IsArray () method to detect an array

Console.log ($.isarray ([])); // true

"Isfunction ()"

The Isfunction () method is used to detect whether an incoming parameter is a function

Console.log ($.isfunction () (function() {})); // true

If you use native JavaScript, you can use TypeOf to implement

Console.log (typeoffunction() {}); // "function"

"IsNumeric ()"

The IsNumeric () method is used to detect whether an incoming parameter is a number

[note] The parameter is either a pure number or a numeric string can be

$.isnumeric (" -10");  // true$.isnumeric ( -10);  // true

If native JavaScript is used, it can be done using typeof, but the results are slightly different

Console.log (typeof 10); // "Number"Console.log (typeof ' 10 '); // "string"

"Isemptyobject ()"

The Isemptyobject () method is used to detect whether an object is an empty object

// true // false

"Isplainobject ()"

The Isplainobject () method is used to detect whether an object is a native object, that is, an object created through "{}" or "New object"

Console.log ($.isplainobject ({})); // trueconsole.log ($.isplainobject (document.documentelement)); // falseConsole.log ($.isplainobject (new Boolean (true))); // falseConsole.log ($.isplainobject (true)); // false

Array-related

"InArray ()"

The InArray (value, array [, FromIndex]) method resembles the native JavaScript indexof () method, which returns 1 when no matching element is found. If the first element of the array matches a parameter, then $.inarray () returns 0

The parameter fromindex is an array index value that represents where to start the lookup. The default value is 0

var arr = [1, ' 2 ', ' 3 '];console.log (Arr.indexof (' 2 ')); // 4Console.log (Arr.indexof (3)); // 2console.log (arr.indexof (0)); // -1 var arr = [1, ' 2 ', ' 3 '];console.log ($.inarray (' 2 ', arr)); // 4Console.log ($.inarray (3,arr)); // 2console.log ($.inarray (0,arr)); // -1

"Makearray ()"

The Makearray () method is used to convert a class array object to a true JavaScript array

Console.log ($.isarray ({0: ' A ', 1: ' B ', length:2})); // falseConsole.log ($.isarray ($.makearray ({0: ' A ', 1: ' B ', Length:2}))); // true

If native JavaScript is used, you can use the slice () method to make the class array object a true array

var arr =0: ' A ', 1: ' B ', length:2})//  [' A ', ' B ']Array.prototype.slice.call ( Document.queryselectorall ("div")); Array.prototype.slice.call (arguments);

"Unique ()"

The unique () method is used for array de-weight

var $arr = [Document.body,document.body];console.log ($.unique ($arr)); // [body] var $arr = [1,2,1];console.log ($.unique ($arr)); // [2,1]

Use native JavaScript to implement the following

 Array.prototype.norepeat = function   () {     var  result = [];  for  (var  i = 0; i < this . Length; I++ if  (Result.indexof (this  [i]) = = -1 this[i]); }}  return   result;}  

var arr = [1,2,1];console.log (Arr.norepeat ()); // [up] var arr = [Document.body,document.body];console.log (Arr.norepeat ()); // [body]

"Grep ()"

Finds an array element that satisfies the filter function. Original array not affected

function (Elementofarray, Indexinarray) [, invert]) Array:array An array of elements to query.  functions: function () to handle the alignment of each element. The first parameter is the element of the array being checked, and the second parameter is the index value of the element. The function should return a Boolean value. This will be the global Window object. Invert:boolean if "invert" is false, or is not provided, the function returns an array of all elements that return true in "callback". If "Invert" is true, the function returns an array of all elements that return false in "callback". 

The $.grep () method removes the necessary elements from the array so that all remaining elements are checked by the filter function. The test is a function that passes an array element and the index value within that array. Only if the test returns true, the array element is returned to the result array.

The function of the filter is passed two parameters: the element in the array that is currently being checked, and the index value of the element. The filter function must return ' true ' to include the item in the result array

var function (n,i) {   return n > 0;}); Console.log (result); // [1, 2]

var function (n,i) {   return n > 0;},true); Console.log (result); // [0]

"Merge ()"

Merges two array contents into the first array

Jquery.merge (first, second)

Console.log ($.merge ([0,1,2], [2,3,4])); // [0, 1, 2, 2, 3, 4]

Other

"Proxy ()"

The proxy () method takes a function and then returns a new function, and the new function uses the specified this

The proxy () method is similar to bind (), but not the same. The difference is that the bind () method is to change the this point of the original function, and the proxy () method is to create a new function and use the this point in the argument to point to the original function's this direction and no change

var a = 0; function foo () {    Console.log (this. a);} var obj = {    A:2};foo (); // 0$.proxy (foo,obj) (); // 2foo (); // 0

The proxy () method supports multiple parameter passing methods

function Foo (b) {    Console.log (a+b);   } $.proxy (foo,document); // 3$.proxy (foo,document,1,2) (); // 3$.proxy (foo,document,1) (2); // 3

When binding an event, be sure to use the argument pass of the proxy () method, otherwise the event has not occurred and the function may have been called.

$ (document). Click ($.proxy (foo,window,1,2))

"Trim ()"

The Jquery.trim () function is used to remove whitespace characters at both ends of a string

This function is very simple and there is no extra parameter usage.

Console.log ($.trim ("    Hello, how is you?    ")); // ' Hello, how is it? '

"NoOp ()"

An empty function

Jquery.noop () This method does not accept any arguments

When you just want to pass an empty function, use it.

This is useful for some plug-in authors, when the plug-in provides an optional callback function interface, then if the call does not pass the callback function, use Jquery.noop instead of executing

"Now ()"

Returns a number that represents the current time

Jquery.now () This method does not accept any parameters

The $.now () method is an expression (new Date). GetTime () returns a shorthand for the value

"Parsehtml ()"

Parses a string into an array of DOM nodes

false): Boolean A Boolean value that indicates whether the script is included in the passed HTML string.

　　jQuery.parseHTMLUse the CREATE function of the native DOM element to convert the string to a set of DOM elements, which can then be inserted into the document.

By default, if there is no specified or given or null undefined , context it is current document . If HTML is used in another document, such as an IFRAME, the file for that frame can be used

var result = $.parsehtml ("Hello, my name is JQuery"); $ (' div '). Append (result);

"Parsejson ()"

Accepts a JSON string in a standard format and returns the parsed JavaScript object

Jquery.parsejson (JSON)

var obj = Jquery.parsejson (' {' name ': ' John '} '= = = ' John '); // true

jquery Common tool methods