Premise: jQuery is a cross-browser, versatile, extensible JavaScript library. JQuery is popular because of the following features:

  • (1) Powerful compatibility processing, eliminating the differences between browsers
  • (2) concise chain syntax, combined with functional programming skills can be used to complete a series of functions in a small amount of code
  • (3) Diversified element operations, which can search for elements in the document, read and write attributes, control styles, register events and other operations
  • (4) Can quickly achieve Ajax, animation, browser sniffing, functional programming and other functions
  • (5) Good expansibility, attracting many developers to design plug-ins for it

How does jQuery get elements?

How does jQuery get page elements?

$("#test") : Gets the ID astestElement set $(".red") : Gets the set of elements whose class is redCopy the code

JQuery chain call

Methods in jQuery objects return the object itself as much as possible, so you can do a neat chain call, for example: find the target element with an ID attribute of “BTN” (the element to match), add a CSS class to its parent, and return the HTML content of the parent element

$("#btn".parent().addClass("container").html();
Copy the code

JQuery manipulation of elements

In jQuery, you can create one or more elements in a very simple way (by calling the $() function), and other operations, such as insert, find, delete, and copy, are also very easy to do.

1: Search method:

Pass the CSS selector string to() is compatible with all browsers and extends existing selectors, such as: Button,:checkbox and other unique form selectors. JQuery objects returned are much more powerful than Nodelist

The selector describe The selector describe
:button Match button element :image Matching image elements
:checkbox Matches the checkbox element :text Matches text box elements
:radio Matches a checkbox element :selected Matches the selected option element in the selection box
:file Matches the upload button element

2: insert method

JQuery provides multiple methods to insert the specified content in a location. The append() method in jQuery inserts the specified element at the end of the child list of the target element. Another appendTo() method does the same thing, but in a different way: append() inserts the first element. Call it the front mode. In appendTo(), the target element comes first and the content to be inserted comes first.

$("#target").append("
 Insert content 
");
$("
 Insert content 
").appendTo("#target")
Copy the code

1: Modify elements

Create elements directly using the jQuery constructor

$('<h1>Hello</h1>')
Copy the code

Attributes of an element

JQuery objects can not only change the structure of a document, but also get and set elements’ attributes, attributes, dimensions, coordinates, styles, associated data, and spatial values in the form.