JQuery is an efficient, compact, and rich JavaScript tool library. It is the most widely used JavaScript function library today. It provides an API that is easy to use and compatible with many browsers, making things like HTML document traversal and manipulation, event handling, animation, and Ajax manipulation much easier.

1. 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.

JQuery (selector) is used to get the corresponding elements, but it does not return these elements. Instead, it returns an object, called an object constructed by jQuery, that can operate on the corresponding elements.

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

Two, chain operation

You can perform a series of operations on a web element after it has been selected. All operations can be linked together in a chain form. For example:

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

Broken down, it looks like this:

$('div')  // Find the div element
  .find('h3')  // Select the h3 element
  .eq(2)  // Select the third h3 element
  .html('hello');  // Change its content to Hello
Copy the code

It 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 take a step back:

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

Operation elements

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 (but not delete it) using.empty(). Create a new element using:

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

Moving elements:

$('div').insertAfter($('p'));
$('p').after($('div'));
Copy the code

On the surface, the effect of the two methods is the same, the only difference seems to be the perspective of operation. But in fact, they have one major difference, and that is the element returned is different. The first method returns the div element, and the second method returns the P element. You can choose which method to use based on your needs. There are four pairs of operation methods using this mode:

  • insertAfter()and.after(): Inserts an element from behind, outside of an existing element
  • insertBefore()and.before(): Inserts an element from the front outside of an existing element
  • appendTo()and.append(): Inserts an element from behind inside an existing element
  • prependTo()and.prepend(): Inserts the element from the front inside the existing element

Modify element attributes

JQuery uses the same function to complete 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 assigns h1
Copy the code

Common values and assignment functions are as follows:

  • html()Gets or sets the HTML content
  • text()Retrieves or sets the text content
  • attr()Gets or sets the value of an attribute
  • width()Gets or sets the width of an element
  • height()Gets or sets the height of an element
  • val()Retrieves the value of a form element

Refer to the link

  • Design Ideas of jQuery by Yifeng Ruan
  • JQuery 英 文 版