Analysis on the usage of jQuery object Chain Operations _ jquery

This article mainly introduces the usage of jQuery object chain operations, and analyzes the principles, features, and precautions of chain operations based on examples. It has some reference value, for more information about jQuery object chain operations, see the examples in this article. We will share this with you for your reference. The details are as follows:

Chained operations on jQuery objects

First, let's look at an example:

The Code is as follows:

$ ("# Myphoto" ).css ("border", "solid 2px # FF0000"). attr ("alt", "good ");

A jQuery object first calls the css () function to modify the style, and then uses the attr () function to modify the attributes. This call method is like a chain, so it is called a "chain operation ".

Chained operations can simplify the code, because you can implement multiple previous statements in one statement to complete the task. For example, if you do not use a chain operation, you must use two statements to complete the preceding task:

$("#myphoto").css("border","solid 2px#FF0000");$("#myphoto").arrt("alt","good");

In addition to increasing the amount of code, the selector is also called twice to reduce the speed.

In a short chained operation, statements are usually clear and you can perform various operations on jQuery objects step by step. However, the chain operation should not be too long; otherwise, the statement may be hard to understand, because it is not easy to view the current status of the jQuery object, in particular, it is more difficult to judge the addition and deletion operations involving elements in jQuery objects.

Not all jQuery functions can be chained. This is related to the chain operation principle. The reason why the chain operation can be implemented is because each function returns the jQuery object itself. In the internal implementation of the jQuery class library, although many functions return the jQuery object itself, they are implemented by calling a limited number of internal functions, such as the attr () function setting attribute stone, in fact, "jQuery. each (object, callback, args) "method. Note that this method is not a jQuery object method. The jQuery object method also has an each () function, which is "jQuery. fn. each (callback, args) ", this function finally calls jQuery. each function:

Each:function(callback,args){  ReturnjQuery.each(this,callback,args);}

Let's take a look at the returned results of the jQuery. each function:

Each.function(object,callback,args){  Retumobject;}

An Object is a jQuery. fn Object, that is, a jQuery Object. The jQuery object is returned at the end.

You can use the following principles to determine whether a function returns a jQuery object, that is, whether it can be used for chained operations.

In addition to functions that obtain certain data, such as obtaining the property value "attr (name)" and getting the SET size "size ()", these functions obviously return data. All jQuery functions except these functions can be used for chained operations, such as setting the attribute "attr (name. value )".

"$" Variable usage

The variable "$" is a reference to the variable "jQuery. "JQuery" variables are global variables, and jQuery objects are "jQUery. fn". Do not confuse them. "JQuery" variables are similar to static classes. The above methods are static methods and can be called at any time. For example, "jQuery. each ". "JQuery. fn" is an instance method and can only be called on a jQuery object. For example, the "jQuery. fn. each ()" method can only be called in the form of "$ ('# id'). each.

As mentioned above, you can use "$" to replace "jQuery" because the following implementation is available in jQuery:

jQuery=window.jQuery=window.$

Therefore, "$" variables and "jQuery" variables are actually properties of the Window object, that is, global variables. It can be called anywhere on the page.