1. How does jQuery get elements

$('input[name=first]') $('input[name=first]') // Select the input attribute whose name attribute is equal to firstCopy the code
$('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
$('div').has('p'); // Select div element $('div').not('.myclass '); // select the div element $('div').filter('.myClass'); Query $('div').first(); query $('div').first(); // Select the first div element $('div').eq(5); // Select the sixth div elementCopy the code
$('div').next('p'); $('div').parent(); $('div').parent(); Closest ('form'); // Select the form parent element $('div').children(); $('div').siblings(); // Select the sibling element of divCopy the code

2. Chain operation of jQuery

Once the web element is finally selected, you can perform a series of operations on it, all of which can be linked together in a chain.

$('div').find('h3').eq(2).html('Hello');
Copy the code
$(' div ') / / find div elements. The find (' h3) / / choice of h3 elements. The eq. (2) / / select the third h3 elements. The HTML (" Hello "); // Change its content to HelloCopy the code

Because each step of the jQuery operation returns a jQuery object, different operations can be linked together.

$(' div '). The find (' h3). Eq. (2) HTML (' Hello '.) the end () / / return to h3 elements of the selected all of the step. The eq (0) / / selected first h3 elements. The HTML (" World "); // Change its content to WorldCopy the code

3. How does jQuery create elements

Pass the new element directly into the jQuery constructor.

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

4. How does jQuery move elements

.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

If we select a div element, we need to move it after the p element:

$('div').insertAfter($('p')); // return the div element $('p').after($('div')); // Return the p elementCopy the code

5. How does jQuery modify element attributes

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

Such as:

$('h1').html(); $('h1').html('Hello'); // HTML () takes the argument Hello, which assigns h1Copy the code

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).