How does jQuery get elements

The basic design idea of jQuery is to take the elements of a web page and then do something with them.

To get an element using jQuery, you usually put a selector into the constructor jQuery() ($()), so jQuery(selector) gets the corresponding element.

Such as some common selectors

The $(document) / / select the entire document object $(' # myID). Find (' red ') / / select all ID for myID. Red page elements $. (' div '). (' myClass ') / / Select all div elements $('.red').each(fn) with class value myClass // iterate over all.red elements and execute fn on each elementCopy the code

How does jQuery create elements

JQuery creates a new element by passing it directly to jQuery() :

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

$('<div class="new1">new1 div</div>')

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

How does jQuery move elements

It provides two sets of methods for moving elements. One group moves the reference element directly, and the other group moves other elements so that the reference element is in the desired position.

Suppose we get a div element and need to move it after the p element.

$(' div '). InsertAfter ($(" p ")) / / move the div elements behind the p element $(" p "). After ($(' div ')) / / / / move the p element to the front of the div elementsCopy the code

Both methods seem to have the same effect, but they actually have one important difference. That is, the elements returned are different. The first method returns the div element, and the second returns the P element. You need to choose which method to use based on your requirements.

In the same way as the two pairs above, there are four other pairs of movements:

.inserafter () and.after() // Outside the reference element, insert elements.inserbefore () and.before() // outside the reference element, AppendTo () and.append() // Inside the reference element,.prependto () and.prepend() // Inside the reference element, insert the element from the frontCopy the code

How does jQuery modify elements

1. The most common requirement for modifying web elements is to value and assign values to them. The design pattern of jQuery is to use the same function for getters and setters. Whether to evaluate or assign depends on the argument

$('h1').html() $('h1').html('Hello') // HTML () has the parameter Hello, which assigns value to h1Copy the code

Common values and assignment functions:

.html() // Gets or sets the HTML content.text () // Gets or sets the text content.attr () // Gets or sets the value of an attribute.width() // Gets or sets the width of an elementCopy the code

2. There are also several important ways to modify elements. (Copy, delete and empty)

.clone() // copy elements. Remove () // delete elements. This method does not retain the deleted element. Detach () // Delete element. This method preserves the deleted element and can be re-inserted into the document using.empty() // to empty the element's contents. The element is not deletedCopy the code

5, jQuery chain operation

That is, after the element is finally retrieved, a series of operations can be performed on it, and all operations can be linked together and written out in a chain. Such as:

$('div').find('.red').eq(0).html('Hello')
Copy the code

It can be split like this:

Find ('.red') // Find the div element with class value red. Eq (0) // Get the first div element with class value red. HTML ('Hello') // change its content to HelloCopy the code

The principle is that each step of the jQuery function operation returns an operable jQuery object (Api for short), so different operations can be linked together.

In addition, jQuery provides the.end() method to make the result set step back

$('div').find('.red').eq(0).html('Hello').end() // Go back to getting all div elements with class value red .html('World') // Changes its contents to WorldCopy the code

Design Ideas of jQuery by Yifeng Ruan

JQuery API Documentation in Chinese