How does jQuery get elements

1. Select web 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 whole document object $('#myId'// Select the page element $(with ID myId)'div.myClass'// Select div element $(class = myClass)'input[name=first]'// Select the input element whose name attribute is equal to firstCopy the code

It can also be a jquery-specific expression:

$('a:first'// Select the first element in the page $('tr:odd'// Select the odd row $('#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 animatedCopy the code

How is jQuery chained

The third design idea of jQuery is that once you finally select a web element, you can perform a series of operations on it, all of which can be linked together in a chain

How does jQuery create elements

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

How does jQuery move elements

The fifth design idea of jQuery is to provide 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

There are four pairs of operation methods to use this mode. Choose which method to use according to your needs

.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

1.text() sets or returns the text content of the selected element

2.html() sets or returns the content of the selected element (including HTML tags)

3. Val () sets or returns the value of the form field

Set (not null in parentheses) or return (returned if parentheses are null) HTML is a child element that contains the HTML tag of the element

The attr() method is used to get or modify attribute values, but it differs from the above three functions

The values

$("#nihao").attr("href")
Copy the code

Set the value

$("#nihao").attr("href"."https://www.baidu.com")
Copy the code

5.removeAttr()

div.removeAttr(‘name’);

Delete the name attribute

6.prop()

Prop () is similar to attr()

Prop can only add non-custom attributes, while attR can

$(p).prop(‘nihao’) is not possible because hello is our custom property

Prop () does not return the same value as attr()