1. JQuery gets elements

The basic design idea and usage of jQuery is to “select a web element and do something with it”. This is the fundamental feature that sets it apart from other Javascript libraries.

The first step in using jQuery is often to put a selection expression into the constructor jQuery() ($for short) and get the selected element.

Select expressions can be CSS selectors:

$(document) // Select the entire document object
$('#myId') // Select the page element with ID myId
$('div.myClass') // Select the div element whose class is myClass
$('input[name=first]') // Select the input element whose name attribute is equal to first
Copy the code

It can also be a jquery-specific expression:

$('a:first') // Select the first a element in the page
$('tr:odd') // Select the odd rows of the table
$('#myForm :input') // Select the input element in the form
$('div:visible') // Select the visible div element
$('div:gt(2)') // Select all div elements except the first three
$('div:animated') // Select the div element that is currently animated
Copy the code

2. JQuery operation – chain operation

If you select a web element, you can perform a series of operations on it, and all operations can be linked together as a chain. For example:

$('div').find('h3').eq(2).html('Hello');
Copy the code

Broken down, it looks like this:

$('div') // Find the div element
.find('h3') // Select the h3 element
.eq(2) // Select the third h3 element
.html('Hello'); // Change its content to Hello
Copy the code

This is the most flattering and convenient feature of jQuery. It works because each step of the jQuery operation returns a jQuery object, so different operations can be linked together.

JQuery also provides the.end() method, which allows the result set to take a step back:

$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() // Go back to the step where all h3 elements are selected
.eq(0) // Select the first h3 element
.html('World'); // Change its content to World
Copy the code

3. JQuery moves elements

JQuery provides two sets of methods for manipulating the position of elements in a web page. One set of methods is to move the element directly, and the other set of methods is to move other elements so that the target element is where we want it to be.

Suppose we select a div element and need to move it after the P element.

The first method is to use.insertafter (), which moves the div element after the p element:

$('div').insertAfter($('p'));
Copy the code

The second way is to use.after(), which precedes the p element in the div:

$('p').after($('div'));
Copy the code

On the surface, the effect of the two methods is the same, the only difference seems to be the perspective of operation. But in fact, there is one big difference between them, and that is that they return different elements. The first method returns the div element, and the second method returns the P element. You can choose which method to use based on your needs.

There are four pairs of operation methods using this mode:

.insertafter () and.after() : inserts elements.insertbefore () and.before() : inserts elements.appendto () and.append() from the front outside the existing element. Inside the existing element, insert elements from behind. PrependTo () and. Prepend () : Inside the existing element, insert elements from the front

4. Copy, delete and create jQuery elements

In addition to moving elements, jQuery provides several other important ways to manipulate elements.

Copy elements using.clone().

Remove elements using.remove() and.detach(). The difference between the two is that the former does not retain the event of the deleted element, while the latter is retained for use when re-inserting the document.

Empty the element (but not delete it) using.empty().

Creating a new element is as simple as passing it directly into the jQuery constructor:

$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
Copy the code

5. JQuery modifies the element property getter/setter

The most common requirement for manipulating web elements is to get their values or assign them to them.

JQuery can use the same function to do getters and setters, that is, “valuer” and “assignment” together. Whether to evaluate or assign depends on the parameters of the function.

$('h1').html(); // HTML () takes no arguments to fetch the value of h1
$('h1').html('Hello'); // HTML () takes the argument Hello, which assigns h1
Copy the code

Common values and assignment functions are as follows:

.html() Takes or sets the HTML content.text() Takes or sets the text content.attr() Takes or sets the value of an attribute.width() Takes or sets the width of an element.height() Takes or sets the height of an element.val() Retrieves the value of a form element

Note that if the result set contains more than one element, then all elements are assigned; Fetching only the value of the first element (except.text(), which fetches the text content of all elements).

Refer to the link

Ruan Yifeng -JQuery design ideas