Usage analysis of chain operations of jQuery objects

The examples in this article describe the use of chain operations on jQuery objects. Share it with everyone for your reference, the details are as follows:

Chain operation of jQuery objects

First let’s look at an example:

The code is as follows:

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

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

Chain operations can make the code more concise, because it is often possible to achieve tasks in one statement that could only be completed in multiple statements in the past. For example, if chain operations are not used, two statements are needed to complete the above 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, which reduces the speed.

In a shorter chain operation, the statements are often clearer, and various operations on jQuery objects can be implemented step by step. However, the chain operation should not be too long, otherwise the statement will be difficult to understand, because it is not easy to check the current status of the jQuery object, especially if it involves the addition and deletion of elements in the jQuery object, it is even more difficult to judge.

Not all jQuery functions can use chained operations. This is related to the principle of chained operations. The reason why chained operations can be achieved is that 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 all implemented by calling a limited number of internal functions. For example, the attr() function sets the 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 also calls the jQuery.each function at the end:

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

Let’s take a look at the return result of the jQuery.each function:

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

Object is the jQuery.fn object, that is, the jQuery object. The final returned object is still the jQuery object.

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

In addition to functions for obtaining certain data, such as obtaining attribute value "attr(name)" and obtaining collection size "size()", these functions obviously return data. In addition to these functions, jQuery functions can be used for chain operations, such as setting the attribute "attr(name.value)".

Usage of "$" variable

The "$" variable is a reference to the "jQuery" variable. The "jQuery" variable is a global variable, and the jQuery object refers to "jQUery.fn", don't be confused. "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 the jQuery object. For example, the "jQuery.fn.each()" method can only be called in the form "$('#id').each".

As mentioned earlier, you can use "$" instead of "jQuery", because there is the following implementation inside jQuery:

jQuery=window.jQuery=window.$

So the "$" variable and the "jQuery" variable are actually It is a property of the Window object, which is a global variable. Can be called anywhere on the page.

I hope this article will be helpful to everyone in jquery programming.