For more information about jQuery, see Example 1.0 jQuery Philosophy

Translated from jQuery Cookbook (O 'Reilly 2009) 1.0 The jQuery Philosophy

JQuery's philosophy is "Writing less code and doing more things". This philosophy can be divided into three concepts:

• Use the CSS selector to search for elements and use the jQuery method to operate on these elements.
• Chain multiple jQuery methods on the Element Set
• JQuery encapsulation and implicit Traversal

Fully understanding these three concepts is essential for writing jQuery code. Let's take a closer look at these three concepts.

Search for elements and perform operations

More accurately, it is to locate a batch of elements in the DOM tree and then operate on the element set. For example, in the following example: First hide a <div> element to the user, then insert some new text into the hidden <div> element, and then change its attributes, the <div> element is re-displayed. The corresponding jQuery code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Let's take a look at these four jQuery statements one by one:

 

 
  
Hide all div elements on the page to make them invisible
 
  
Replace the original text in the hidden div element with the new content
 
  
Add a new class property value (updatedContent) to the div Element)
 
  
Re-display the div element on the page

 
The preceding example uses the jQuery function to find all the <div> elements on the HTML page, and then uses the jQuery method to perform operations (hide (), text (), addClass (), show ()).
Chain call
When calling jQuery methods, you can perform chained calls to these methods according to jQuery's design. For example, you can only perform an element search once and then perform a series of operations on the elements you find. The previous code example can be rewritten as a JavaScript Statement by using a chained call.
You can use the following code to perform a chained call:
// Hide all the div elements on the page. jQuery ('div '). hide (); // update the text jQuery ('div ') in all div elements '). text ('new content'); // Add the class attribute jQuery ('div ') whose value is updatedContent on all div elements '). addClass ("updatedContent"); // display all the div elements on the page, jQuery ('div '). show ();
Rewrite:
jQuery('div').hide().text('new content').addClass("updatedContent").show();
If code indentation is added:
jQuery('div') .hide() .text('new content') .addClass("updatedContent") .show();
In short, chained calls allow infinite jQuery methods to be used together on the selected element set. Actually, elements processed using the jQuery method will always be returned after the method is processed, so the chained call can continue. JQuery's plug-ins are also designed to return encapsulated element sets. Therefore, using the plug-ins does not affect chained calls.
Another advantage of chained calling is to save the cost by selecting only one DOM element. Avoiding DOM tree traversal is crucial for improving web page performance. Therefore, you need to reuse or cache the selected DOM element set as much as possible.
JQuery Encapsulation
In most cases, if jQuery is used, it will certainly deal with something called "jQuery encapsulation. In other words, the elements selected from the HTML page with jQuery will be encapsulated with the functions provided by jQuery. I personally like to call this thing "encapsulate element sets" because it is an element set that encapsulates jQuery functions. This encapsulated Element Set sometimes contains one DOM element, sometimes multiple, and sometimes