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

Get the element

The basic design idea and main usage of jQuery is “select a webpage element and then perform certain operations on it”. This is what sets it apart from other JavaScript libraries.

The jQuery function is not a constructor in the normal sense. It is a constructor that does not require new.

The first step in using jQuery is often to put a selection expression into the constructor jQuery() ($) and get the selected element.

JQuery (selector) is used to get the corresponding elements, but it does not return those elements. Instead, it returns an object, called a jQuery constructed object, that can manipulate the corresponding elements.

Selection expressions can be CSS selectors:

$('#myId') $('#myId') $('#myId' $('input[name=first]') // Select the input element whose name attribute equals firstCopy the code

Or a jquery-specific expression:

$('a:first') // Select the first a element in the page $('tr:odd') // Select the odd row in 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 currently animated div elementsCopy the code

Two. Chain operation

JQuery is a classic design idea. After selecting a webpage element, you can perform a series of operations on it, and all operations can be linked together and written in the form of a chain. For example:

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

Breaking it down, it looks like this:

$('div') // find the div element. Find ('h3') // select the h3 element. Eq (2) // select the third h3 element. // Change its content to helloCopy the code

The idea is that each jQuery operation returns a jQuery object, so different operations can be linked together.

JQuery also provides a.end() method that allows the result set to step back:

$(' div '). The find (' h3). Eq. (2) HTML (' hello '.) the end () / / return to h3 elements of the selected all of the step. The eq (0) / / selected first h3 elements. The HTML (" World "); // Change its content to WorldCopy the code

Copy, delete, and create elements

Copy elements using.clone()

Remove () and.detach() are used to remove elements. The difference between the two is that the former does not retain events for deleted elements, while the latter retains them for re-insertion.

Empty the contents of an element (but not the element) using.empty().

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

4. Move elements

JQuery provides two sets of methods for manipulating the position of elements in a web page. One is to move the element directly, and the other is to move other elements to get the target element to the desired position.

Let’s say we’ve selected a div element and we need to move it behind the P element.

The first method is to use.insertafter () to move the div element after the p element:

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

The second method uses.after() to precede the div element:

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

On the surface, the effect of the two approaches is the same; the only difference seems to be the perspective from which they operate. But in reality, they have one major difference: the returned elements are different. The first method returns the div element, and the second returns the P element. You can choose which method to use as needed.

There are four pairs of operations using this mode:

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

Modify element attributes: value and assignment

The most common requirement for manipulating web page elements is to get their values, or to assign them.

JQuery uses the same function for getters and setters. Whether to value or assign a value depends on the parameters to the function.

$('h1').html(); $('h1').html('hello'); // HTML () takes hello, which is an assignment to h1Copy the code

Common value 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 a property
  • .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

Note that if the result set contains more than one element, all of the elements will be assigned; Is used to fetch only the value of the first element (except.text(), which fetters the text contents of all elements).

Refer to the link

  • JQuery Design Ideas by Ruan Yifeng
  • JQuery Chinese Document