The birth of the jQuery

John Resig developed the first version of jQuery in 2005 and announced it in BarCampNYC. On the jQuery website, he writes:

JQuery is a JavaScript library to make writing JavaScript code fun. JQuery makes JavaScript code simple, concise, and more readable by encapsulating generality and repeatability and removing unnecessary code rhetoric

So the essence of jQuery is to solve the anti-human design of DOM, after all, DOM manipulation nodes are really long!

Manipulating elements with the DOM is like a foot-cloth — long and smelly

// Get the element with id myId
let element = $('#myId')  / / jQuery way
  
let element = document.getElementById("myId") // the way DOM provides

// Who will like the way DOM provides?
Copy the code

The basic design idea and usage of jQuery is to select a web element and then do something with it.

Basic usage of jQuery

Select elements

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

Or use jQuery’s own 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

Select element filtering

The powerful filters provided by jQuery can be used when the selection expression does not satisfy the odd requirement

// Narrow down the selection
    $('div').has('p'); // Select the div element that contains the p element$('div').not('.myClass'); // Select the div element whose class is not equal to myClass$('div').filter('.myClass'); // Select the div element whose class equals myClass$('div').first(); // Select the first div element$('div').eq(5); // Select the sixth div element
  
// Move the selection to nearby
   $('div').next('p'); // Select the first p element after the div element$('div').parent(); // Select the parent of the div element$('div').closest('form'); // Select the form parent element nearest the div$('div').children(); // Select all the children of div$('div').siblings(); // Select the sibling element of div
Copy the code

Create, copy, and delete elements

// Create an element: Just pass the new element directly into the jQuery constructor

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

Copy the code

Clone element:.clone()

Remove elements:.remove().detach() 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:.empty()

Assign and value elements

JQuery uses get and set to assign and get values. JQuery passes parameters to determine whether to assign or to value

    $('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()// Get or set the HTML content.text()// Fetch or set the text content.attr()// Retrieves or sets the value of an attribute.width()// Retrieves or sets the width of an element.height()// Retrieves or sets the height of an element.val()// Fetch the value of a form element

Copy the code

Note that if the result set contains more than one element, then all elements are assigned; (.text(), which fetches the text content of all elements)

Mobile elements

$('div').insertAfter($('p')); // Move the div element behind the p element to return div

$('p').after($('div')); // Add the p element to the front of the div element and return p


// 4 pairs of relative methods.insertafter () and.after() : inserts elements.insertbefore () and.before() : inserts elements.appendto () and.append() from the front outside the existing element. Inside the existing element, insert elements from behind. PrependTo () and. Prepend () : Inside the existing element, insert elements from the frontCopy the code

The chain operation

A chain operation is a series of operations that can be performed on a web element after it is finally selected, and all operations can be linked together in a chain form, such as:

$('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

This is the most flattering and convenient feature of jQuery. 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