jQuery

JQuery is the most widely used javascript function library. 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.

Select and get the web page element

The first step in using jQuery is to find a web element and place it in the constructor jQuery() by selecting an expression, commonly known as $(statement).

Select the entire document object

$(document)

Select the id

$('#id')

Select the class

$('div.className')

Select the name related element
// Select all input elements whose name attribute is equal to 'test'
$("input[name='test']") 
// Select all input elements whose name attribute is not equal to 'test'
$("input[name!='test']") 
// Select all input elements whose name attribute begins with 'name'
$("input[name^='name']") 
// Select all input elements whose name attribute ends in 'test'
$("input[name$='test']") 
// Select all input elements whose name attribute contains 'test'
$("input[name*='test']")
// Multiple attributes can be used for joint selection. The selector is to get all elements with an id attribute that ends in test
$("input[id][name$='test']") 
// find the form whose name is test.
$(":input[name='test']")

Copy the code

Jquery-specific expressions

Select the first element

$('div:first')

Select the odd-numbered rows of the table

$('tr:odd')

Select the input element in the form

$('#form1 :input')

Select the visible div

$('div:visible')

Select all divs except the first three

$('div:gt(2)')

Select the div element that is currently animated

$('div:animated')

Filters narrow selection results

has()

Select div with p element: $(‘div’).has(‘p’)

not()

Select div without a class: $(‘div’).not(‘className’)

filter

Select a specific class div: $(‘div’).filter(‘className’)

first()

Select the first div: $(‘div’).first()

eq()

Select the fifth element (starting from 0) : $(‘div’).eq(4)

The movement method on the DOM Tree

next()

Select the latter element: $(‘div’).next(‘p’);

parent()

Select the parent element: $(‘div’).parent();

children

Select the child element: $(‘div’).children();

siblings()

Select siblings: $(‘div’).siblings();

closest()

Closest (‘form’);

The chain operation

When a web element is selected, each action taken through jQuery returns a jQuery object, so different actions can be serialized and rendered in a chain.

For example: $(‘ div ‘). The parent (). The siblings ();

End () step back

$('div')
    .parent()
    .children() 
    .end() // Return to parent()
    .siblings(); 
Copy the code

Creating a new element

The new element is passed directly to the jQuery constructor

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

Copy the element

Select the element and use.clone()

Remove elements

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.

Mobile elements

// Outside the existing element, insert the element from behind
$('div').insertAfter($('p'));
$('p').after($('div'));
// Outside the existing element, insert the element from the front
$('div').insertBefore($('p'));
$('p').before($('div'));
// Inside the existing element, insert the element from behind
$('div').appendTo($('p'));
$('p').append($('div'))
// Inside the existing element, insert the element from the front
$('div').prependTo($('p'));
$('p').prepend($('div'));
Copy the code

The first method returns div, and the second returns p.

Element values and assignments

// Get or set the HTML content
.html() 
// Fetch or set the text content
.text() 
// Retrieves or sets the value of an attribute
.attr() 
// Retrieves or sets the width of an element
.width() 
// Retrieves or sets the height of an element
.height() 
// Fetch the value of a form element
.val() 
Copy the code

e.g.

// Assign Hello to 

$('h1').html('Hello'); 
Copy the code


References:

  • JQuery API Documentation in Chinese
  • JQuery design Philosophy
  • jQuery Prototype