After a long time of learning, I have a certain understanding of the design ideas of jQuery. It has to be said that as the longest living JS function library, jQuery is more convenient for learners to get started, but it is not easy to master the true jQuery.

The process of learning various function libraries is not only learning how to use functions, but what can really improve myself is actually the thinking of the authors of these function libraries when designing them. Therefore, I try to summarize the thinking and steps of these functions in the following order:

  1. Access to elements

  2. Create the element

  3. Mobile elements

  4. Modifying element attributes

  5. How do chain operations work

Access to elements

Fetching elements is the basic design concept of jQuery, which essentially means selecting one or more web elements and then manipulating them.

Why use CSS selector expressions to select elements: $(‘#id’) and $’div.class’) etc.

$(‘a:first’), $(‘tr:odd’), etc. (See Ruan Yifeng – jQuery Design Ideas)

Create the element

In jQuery, creating an element is easy. You just pass a new element into the jQuery constructor.

Ex. :

$('<p>Hello</p>');

$('<li class="new">new list item</li>');

$('ul').append('<li>list item</li>');
Copy the code

. It’s that simple.

Mobile elements

In jQuery, there are two ways to move an element in a web page. One way is to move the element directly to the target location, and the other way is to move another element to the target location.

Such as:

$('div').insertAfter($('p'));  // Move the div element after the p element
$('p').after($('div'));        // Move the p element before the div element
Copy the code

In effect, the two methods are the same. The difference is that the elements returned after the operation are completed. The former returns div, while the latter returns P.

Modifying element attributes

Using jQuery to modify element attributes is a simplification of setAttribute() and getAttribute() in JS. There are four ways to use it:

$('selector').attr('attribute')// View the attribute values of the selected element.
$('selector').attr('attribute'.'value')// Set the attribute value of the selected element (modify if there is one, add if there is none)
$('selector').attr('attribute:value'.'attribute:value')// Sets multiple pairs of attribute values for the selected element
$('selector').attr('attribute'.function(index,oldvalue)// Sets the attribute value of the selected element using the return value of the functionCopy the code

The chain operation

After a web element is selected, you can perform a series of operations on that element, which can be written out in a chain.

Such as:

$('div').find('h1').addClass('red').addClass('green').html('hi').end().find('h3').html('hello');
Copy the code

Find the div element

→ Find the h1 element

Add ‘red’ to this element (h1 =’red’)

< h1 class = ‘red green’ >

→ Change the content of h1 element to “hi”

→ Return to the step of h1

→ Find the element H3

→ Change the content of h3 element to “Hello”

This is the magic of jQuery and a very convenient feature.

Principle: At the end of each jQuery operation, a jQuery object is returned (an object constructed from jQuery functions), so different operations can be linked together.

end(): jQuery provides a convenient way to step back from a result set.

That’s all for now. I hope it’ll be useful later.