1. How does jQuery get elements?

The basic design idea and main usage of jQuery is to “select a web element and do something with it”. 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

2. How is jQuery chained?

Chain operations refer to a series of operations that can be performed on a web element after it is finally selected, and all operations can be linked together in a chain form, such as: $(‘div’).find(‘h3’).eq(2).html(‘Hello’) the chain operation 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 step back:

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

3. How does jQuery create elements?

To create a new element, pass it directly into jQuery’s constructor:

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

4. Operations on elements: value and assignment

JQuery uses the same function to do getters and setters. 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 is an assignment to h1

Copy the code

Common values and assignment functions are as follows:

.html() retrieves or sets the HTML content.text() retrieves or sets the text content.attr() retrieves or sets the value of each property.width () retrieves or sets the width of an element.height() retrieves or sets the height of an element.val() retrieves the value of a form elementCopy the code

Note that if the result set contains more than one element, then all elements are assigned; To do this, we simply fetch the value of the first element (except.text(), which fetches the text content of all elements)

5. How does jQuery move elements

JQuery provides two ways to move an element. One way is to move it directly, and the other way is to move other elements to the desired position. 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’)); The second method is to use. After (), add the p element to the front of div elements: $(” p “). After ($(‘ div ‘));

6. How does jQuery modify element attributes?

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 (without deleting it) using.empty().