JQuery is the most widely used JavaScript library, and it is essential for every web developer to learn it. I will summarize the usage of jQuery in the following ways.

1. How does jQuery get elements

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

It can also be a jquery-specific expression:

$('a:first') // Select the first a element in the page

$('tr:odd') // Select the odd rows of the table

$('#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 animated
Copy the code

2. How is jQuery chained

After selecting a web element, you can perform a series of operations on it. All the operations can be linked together in a chain form, such as:

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

The principle is that each step of the jQuery operation returns a jQuery object. JQuery also provides a.end() method that allows the result set to take a step back.

3. How does jQuery create elements

You can create a new element by passing it directly into jQuery’s constructor:

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

4. How does jQuery move elements

There are four pairs of methods, each of which implements the same result but returns a different element. Select as needed:

  • .insertafter () and.after() : Inserts elements from behind, outside of an existing element

  • .insertbefore () and.before() : Inserts elements from the front outside of an existing element

  • .appendto () and.append() : Insert elements from behind inside existing elements

  • .prependto () and.prepend() : Inserts the element from the front inside the existing element

5. How does jQuery modify element attributes

  • .attr()Gets the value of the attribute of the first element in the matched set of elements. Sets one or more attributes for each matched element.
Value $("#nihao").attr("href"Set value $()"#nihao").attr("href"."https://www.baidu.com")
Copy the code
  • .prop()Gets the property value of the first element in the matched element set. Sets one or more properties for the matched element. The difference is that prop can only add non-custom attributes, while attR can.
  • .removeAttr()Removes an attribute from each element in the matched set of elements.
  • .removeProp()Deletes a property for the matched element in the collection.

6. What are the differences between jQuery objects and DOM objects and how do they convert to each other

How to convert jQuery objects to DOM objects

Content Reference:

www.ruanyifeng.com/blog/2011/0…

www.jquery123.com/