For details about jQuery, refer to the philosophy of 1.0jQuery.

This article introduces the philosophy of jQuery reference instance 1.0jQuery. If you need it, you can refer to it.

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, the following example: First hide

Element, and then to this hidden

Insert some new text in the element, change its attributes, and then re-display

Element. The corresponding jQuery code is as follows:

 
  
    
   Type
   =
   "Text/JavaScript"
     
   Src
   =
   "Http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js? 1.1.9"
   > Script
   
   
   
   
    
   
Old content
    
   Script
     
   // Hide all p elements on the page
   JQuery
   (
   'P'
   ).
   Hide
   ();
     
   // Update the text in all p elements
   JQuery
   (
   'P'
   ).
   Text
   (
   'New Content'
   );
     
   // Add the class attribute whose value is updatedContent to all p elements
   JQuery
   (
   'P'
   ).
   AddClass
   (
   "UpdatedContent"
   );
     
   // Display all p elements on the page
   JQuery
   (
   'P'
   ).
   Show
   ();
    
   Script
   
   
   
   
  

Let's take a look at these four jQuery statements one by one:

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

The above example uses the jQuery function to find all

And then use 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 p elements on the pageJQuery('P').Hide();// Update the text in all p elementsJQuery('P').Text('New Content');// Add the class attribute whose value is updatedContent to all p elementsJQuery('P').AddClass("UpdatedContent");// Display all p elements on the pageJQuery('P').Show();

Rewrite:

jQuery('p').hide().text('new content').addClass("updatedContent").show();

If code indentation is added:

jQuery('p') .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 a DOM element, sometimes contains multiple elements, and sometimes even contains nothing. When the encapsulated element set is empty, the jQuery method/attribute called on it will not throw any errors-this can avoid unnecessary if statements.

Take the preceding HTML code as an example. When there are multiple

What will happen to elements? In the following example, three more HTML pages are displayed.

Element:

 
  
    
   type
   =
   "text/JavaScript"
    
   src
   =
   "http://ajax.googleapis.com/ajax/libs/  jquery/1.3.0/jquery.min.js?1.1.9"
   >《script》
    
   
   
   
    
   
old content
    
   
old content
    
   
old content
    
   
old content
    
   《script》
     jQuery
   (
   'p'
   ).
   hide
   ().
   text
   (
   'new content'
   ).
   addClass
   (
   "updatedContent"
   ).
   show
   ();
    
   《script》
   
   
   
   
  

In the above example, there is no programming code that represents a loop. But what's amazing is that jQuery will scan the whole page and then

Elements are placed in the encapsulated element set, and then a series of jQuery methods are executed for each element in the Set (implicitly traversed. For example, every element in the encapsulation set calls. hide (). In the above Code, every method we use (hide (), text (), addClass (), and show () plays a role in all p elements on the page, just like writing a circular method to traverse DOM elements. The execution result of the above Code is:

The elements are hidden, the embedded text is changed, the class attribute is added, and the elements are re-displayed.

Familiarity with encapsulated element sets and implicit traversal are very important for writing complex loop logic-note that before writing any additional circular code, A simple loop operation already exists (for example, jQuery ('P '). each (function (){}). In other words, calling the jQuery method affects every element in the encapsulated element set.

It should be noted that some jQuery methods have special behaviors and only affect the first element in the encapsulated Element Set (for example, attr ()).