JQuery-1.9.1 source code analysis series (14) Some jQuery tools, jquery-1.9.1jquery

JQuery-1.9.1 source code analysis series (14) Some jQuery tools, jquery-1.9.1jquery

To prepare for the next chapter of analysis animation processing, let's take a look at some tools. Queue tools are often used in animation processing.

JQuery. fn. queue ([queueName] [, newQueue]) | ([queueName,]CallBack ))(Gets or sets the function queue to be executed on the current matching element. if the current jQuery object matches multiple elements: when obtaining the queue, only the queue on the First Matching Element is obtained; when setting the queue (replacing the queue and append function, each matching element is set separately. To remove and execute the first function in the queue, use the dequeue () function. You can also use the clearQueue () function to clear the specified queue)

JQuery. fn. dequeue ([dequeueName])(Remove the first function in the specified queue for each Matching Element and execute the removed function. You can also use the clearQueue () function to clear the specified Queue (the function will not be executed ))

JQuery. fn. clearQueue ([dequeueName])(Clear all unexecuted items in the specified queue for each matching element)

JQuery. error (msg)(Throws an exception that contains the specified string information .)

JQuery. each (object, callback)(Traverse the specified object and array, and use each attribute of the object (or each member of the array) as the context to traverse and execute the specified function. The context indicates that this pointer inside the function references this element. This function is a global jQuery object. Note that this is different from the each () function of the jQuery object (Instance). However, the each () implementation of the jQuery object (Instance) also calls jQuery. each)

JQuery. proxy ()(Change the context of the function. You can pass in a specified function to this function. this function returns a New Function and Its Execution Code remains unchanged. However, the context (this) inside the function has been changed to the specified value.

　　Usage 1:

JQuery. proxy (function, context [, additionalArguments])

Convert FunctionsfunctionThe context object of is changed to the specifiedcontext.

　　Usage 2:

JQuery. proxy (context, name [, additionalArguments])

NamenameThe context of the function is changed to the specifiedcontext. FunctionnameShould becontextAn attribute of an object.

)

JQuery. map (object, callback)(Use the specified function to process each element in the array (or each attribute of the object), and encapsulate the processing result as a new array to return. The jQuery Library also has an instance method jQuery. fn. map () with the same name. It is only used to traverse the elements matching the current jQuery object)

JQuery. fn. data ([key [, value])(Access data on all elements matching the current jQuery object)

JQuery. fn. removeData (keys)(Remove the data items with the specified key name stored on each element that the current jQuery object matches)

JQuery. support(Return the features or bugs of the browser currently used by the user. This attribute is an object. The attributes of this object are not static, and jQuery does not guarantee that the specified attributes will be available in future versions. These attributes are mainly used by plug-ins or kernel developers)

JQuery. contains (container, contained)(Determine whether the specified element contains another element. In short, this function is used to determine whether another DOM element is a descendant of a specified DOM element)

JQuery. extend ([deep], target, object1 [, objectN...])(Merge the content of one or more objects to the target object. This function can copy the member attributes and methods of one or more objects to the specified object. The parameter deep is used to indicate whether deep recursive merge is performed)

JQuery. fn. extend (object)(Extension of one or more instance attributes and methods for jQuery (mainly used for extension methods ))

JQuery. globalEval (code)(Execute a piece of JavaScript code globally. This function is similar to the general JavaScript eval () function. The difference is that the scope of the Code executed by jQuery. globalEval () is global)

JQuery. grep (array, function [, invert])(Filter the elements in the array using the specified function and return the filtered array. The source array is not affected, and the filter result is only reflected in the returned result array)

JQuery. inArray (value, array [, fromIndex])(Search for the specified value in the array and return its index value. If this value does not exist in the array,-1 is returned)

JQuery. isArray (object)(Determine whether the specified parameter is an array)

JQuery. isEmptyObject (object)(Determines whether the specified parameter is an empty object. The so-called "null object" does not include any property that can be enumerated (custom. In short, it means that the object has no attributes and can be iterated through for... in)

JQuery. isPlainObject (object)(Determine whether the specified parameter is a pure object. The so-called "Pure Object" means that the Object is created through "{}" or "new Object)

JQuery. isFunction (object)(Determine whether the specified parameter is a function)

JQuery. isNumeric (value)(Determine whether the specified parameter is a numeric value)

JQuery. isWindow (object)(Determine whether the specified parameter is a window)

JQuery. isXMLDoc (node)(Determine whether a DOM node is in an XML document or is an XML document. This function is used to determine whether a specified document is an XML document or an HTML (or XHTML) document)

JQuery. makeArray (object)(Convert a class array object to a real array object. The so-called "class array Object" is a common Object, but it is very similar to the array Object: it has the length attribute and takes 0, 1, 2, 3 ...... And other numbers as attribute names. After all, it is not an array and does not have any built-in methods inherited from the prototype objects of the array (for example, push (), sort ))

JQuery. noop ()(It is an empty function that does nothing. When you need to input function parameters and want them to do nothing, you can use this function without creating an empty function)

JQuery. now ()(Returns the number of milliseconds passed by the current time from midnight, January 1, January 1, 1970. This function is similar to new Date (). getTime ())

JQuery. parseHTML (htmlString [, context] [, keepScripts])(Parse the HTML string into the corresponding DOM node array. This function will use the native DOM element creation function to convert the HTML string into a collection of DOM elements. you can insert these DOM elements into the document)

JQuery. parseJSON (jsonString)(Convert the formatted JSON string into the corresponding JavaScript Object. The so-called "well-formed" means that the specified string must comply with the strict JSON format. For example, attribute names must be enclosed by double quotation marks and string values must also be enclosed by double quotation marks. If a JSON string in an invalid format is input, a JS exception is thrown)

JQuery. parseXML (XMLString)(Parses the string into the corresponding XML document. This function uses the browser's built-in parsing function to create a valid XML document. This document can be passed into the jQuery () function to create a typical jQuery object, so as to traverse it or perform other operations)

JQuery. trim (str)(Removes spaces at both ends of the string. This function can remove the white spaces at the start and end of the string (until the first non-white string is encountered ). It will clear common blank characters including line breaks, spaces, tabs, and so on)

JQuery. type (object)(Determine the type of the JavaScript built-in object and return the type name in lower case. JavaScript also comes with a typeof operator to determine the data type. However, for the vast majority of objects, the typeof operator returns "object" and cannot distinguish specific types. JQuery. type () can more accurately determine the type of JS built-in objects. For example, for new Number (5), typeof returns "object", jQuery. type () returns "number"; for new Date (), typeof returns "object", jQuery. type () returns "date ". Type Returns a lowercase Value of "Boolean Number String Function Array Date RegExp Object Error)

JQuery. unique (array)(Sort the DOM element array according to the order in which the elements appear in the document and remove repeated elements.

　　Note: This function only applies to DOM element arrays, rather than numbers, strings, or other types. In addition, the repetition here refers to the fact that two elements are the same element (determined by full equality "="), rather than the elements with the same attributes.

　　Warning: the actual test shows that the function does not return correct results as expected. The returned results may be inconsistent in different browsers and jQuery versions (see the Demo code below ))

JQuery. fn. promise ([type,] obj)(Obtain the promise of the resolved delayed object and merge it with the obj object. When clearing a queue of the specified type (the default type is FX), add a solution)

 

A. jQuery. trim source code explanation

The trim function has two branches. The first branch is: if the browser supports the trim function, use the local trim function of the browser; otherwise, use the regular expression in the second branch to remove the blank spaces on both sides.

// If possible, use the trim function supported by the browser // core_version.trimjQuery.trim: core_trim &&! Core_trim.call ("\ uFEFF \ xA0 ")? Function (text) {return text = null? "": Core_trim.call (text );}: // otherwise, use regular expressions to remove leading and trailing blank spaces. // rtrim =/^ [\ s \ uFEFF \ xA0] + | [\ s \ uFEFF \ xA0] + $/g, function (text) {return text = null? "": (Text + ""). replace (rtrim ,"");},

　　

B. queue details

JQuery. fn. queue (type, data)

　　The procedure is as follows:

The default queue is a standard animation effect queue of the fx type. If the queue type is not a string, adjust the data according to the default type.

if ( typeof type !== "string" ) {    data = type;    type = "fx";    setter--;}

Determine whether to obtain or set a queue of the specified type based on the parameter.

If it is to obtain the queue of the corresponding type of the first element that matches the current jQuery match directly;

// Obtain the specified type of queue if (arguments. length <setter) {return jQuery. queue (this [0], type );}

If it is set, it traverses the elements matching the current jQuery, sets a queue of the specified type for each element, and sets the corresponding hooks for each element (used for extended processing, for example, clear the queue at last)

Return data = undefined? This: // each jQuery element adds a queue this. each (function () {var queue = jQuery. queue (this, type, data); // ensure that the queue has a hooks. After the code is executed, a queue clearing function empty jQuery is saved. _ queueHooks (this, type); // if it is "fx" (indicating the queue of standard animated effects in jQuery ), and the first function in the queue is not being executed // then the first function in the queue is executed. After an animation queue is added, the animation if (type = "fx" & queue [0] is immediately executed. = "Inprogress") {jQuery. dequeue (this, type );}})

The function uses the low-level api jQuery. queue function, which is the basic interface for obtaining/setting queues. The source code is as follows:

Queue: function (elem, type, data) {var queue; if (elem) {// obtain the queue type of the corresponding type first = (type | "fx ") + "queue"; queue = jQuery. _ data (elem, type); // Add the function if (data) {if (! Queue | jQuery. isArray (data) {queue = jQuery. _ data (elem, type, jQuery. makeArray (data);} else {queue. push (data) ;}} return queue | [] ;}}View Code

　　

C. jQuery. fn. dequeue

Remove the first function in the specified queue for each Matching Element and execute the removed function. Call jQuery. dequeue internally. The source code of jQuery. dequeue is as follows:

In jQuery. dequeue, you must pay special attention to the processing of the FX animation queue.

Dequeue: function (elem, type) {type = type | "fx"; var queue = jQuery. queue (elem, type), startLength = queue. length, fn = queue. shift (), // retrieve the first function hooks = jQuery in the queue. _ queueHooks (elem, type), next = function () {jQuery. dequeue (elem, type) ;}; // if a column is in the FX queue, the Progress point is always retrieved if (fn = "inprogress") {fn = queue. shift (); startLength --;} hooks. cur = fn; if (fn) {// Add progress point to Prevent Automatic dequeue if (type === "Fx") {queue. unshift ("inprogress");} // clears the last queue and stops the delete hooks function. stop; // next and hooks will be passed to the callback fn. call (elem, next, hooks);} // if (! StartLength & hooks) {hooks. empty. fire ();}}

Note the parameters (elem, next, hooks) passed by the function in the execution queue ).

The animation queue will be analyzed in detail later

 

If you think this article is good, click [recommendation] in the lower right corner ]!