The basic design idea and usage of jQuery is to “select a web element and do something with it”.

How to use jQuery

Put a selection expression into the jQuery constructor

$('#myId') $('div. MyClass ') $('input[name]') // Select the input element whose name attribute is equal to firstCopy the code

JQuery changes the result set

Further filtering based on result sets is the second design idea of jQuery

$('div').has('p'); // Select div element $('div').not('.myclass '); // select the div element $('div').filter('.myClass'); // select the div element $('div').first(); // Select the first div element $('div').eq(5); // Select the sixth div elementCopy the code

JQuery also provides a way to move or select nearby elements based on the result set

$('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

The chain operation

It works because each step of the jQuery operation returns a jQuery object, so different operations can be linked together.

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

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

$(' 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 .html (" World "); // Change its content to WorldCopy the code

Element values and assignments

Use the same function to evaluate and assign, depending on the parameters of the function.

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

Movement of elements

Four methods

.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

Copy deletion and creation of elements

Copy elements using.clone() to delete elements:.remove() and.detach() to empty elements without deleting them:.empty() to create new elements and pass them directly into the jQuery constructor:

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