Summary of the jQuery

JQuery is an efficient, compact, and feature-rich JavaScript tool library. It provides an API that is easy to use and compatible with many browsers, making things like HTML document traversal and manipulation, event handling, animation, and Ajax manipulation much easier.

How does jQuery get elements

The first step is to put a selection expression into the constructor jQuery() ($). The selected element selection expression can be either a CSS selector or a jquery-specific expression.

CSS selector: $(document) $('#myId') $('div. MyClass ') $('input[name=first]' Select the input element whose name attribute is equal to firstCopy the code
Jquery-specific expressions: $('a:first') // Select the first a element $('tr:odd') // select the odd row $('#myForm :input') // Select the input element $('div:visible') // Select the visible div element $('div:gt(2)') // Select all div elements except the first three $('div:animated') // select the div elements that are currently animatedCopy the code

How is jQuery chained

Once the web element is finally selected, you can perform a series of operations on it, all of which can be linked together and written out in a chain. For example, you can use the end() method to make the result take a step back

$('.text').find('.child').addClass('red').end().addClass('yellow')Copy the code

The above decomposition looks like:

$('.text').find('.child') // Find the element of class child.addClass('red') // add a class of red to the element of class child.end() // return to the.text node .addClass('yellow') // Adds a class named yellow to an element of class named.textCopy the code

How does jQuery create elements

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

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

$('<div><span>Hello</span></div>');

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

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

How does jQuery move elements

Provides two sets of methods for manipulating the movement 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

The first method returns a div element, while the second method returns a P element.

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 frontCopy the code

How does jQuery modify an element’s attributes

Common functions that modify elements (values and assignments are determined by function arguments) :

.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 elementCopy the code

Reference: Ruan Yifeng’s weblog