JQuery is a fast, concise JavaScript framework, the next great JavaScript code base (framework) after Prototype, released by John Resig in January 2006. JQuery is designed to “write Less, Do More”, which is to write Less code and Do More things. It encapsulates common JavaScript functionality and provides a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction.

Here is a bunch of simple jQuery code to show how to get elements in jQuery today. $= $() $= $() $= $()

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> </head> <body> <div id="test"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div> </body> </html> window.$ = window.jQuery = function(selectorOrArray){ let elements if(typeof selectorOrArray === 'string'){ elements = document.querySelectorAll(selectorOrArray) }else if(selectorOrArray instanceof Array){ elements = selectorOrArray } return { addClass(className){ for(let i=0; i<elements.length; i++){ elements[i].classList.add(className) } }, find(selector){ let array = [] for(let i=0; i<elements.length; i++){ const x = Array.from(elements[i].querySelectorAll(selector)) array = array.concat(x) } return jQuery(array) } } }Copy the code
Element access
$(' # test) : $('#test').find('.child').addclass ('red') $('#test').find('.child').addclass ('red')Copy the code
In addition to some of the above code to get
$(document) // Select the entire document object $('div. MyClass ') // select the div element $('input[name=first]') // select the input element whose name attribute is equal to first $('a:first') $('#myForm :input') $('#myForm :input'Copy the code
The second design idea of jQuery is to provide a variety of powerful filters to filter the result set and narrow the selection.
$('div').has('p'); // Select div element $('div').not('.myclass '); // select the div element $('div').filter('.myClass'); // select the div element $('div').first(); // Select the first div element $('div').eq(5); // Select the sixth div elementCopy the code
You can also move to other related elements
$('div').next('p'); $('div').parent(); $('div').parent(); Closest ('form'); // Select the form parent element $('div').children(); $('div').siblings(); // Select the sibling element of divCopy the code
JQuery chain operations

The third design idea of jQuery is that once you finally select a web element, you can perform a series of operations on it, all of which can be linked together in a chain.

$('#test').addClass('glue').addClass('red') $('#test').addClass(' red').addClass('red')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.

Create the element
You can add new elements to the jQuery constructor directly
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
Copy the code
How to move elements

The fifth design idea of jQuery is to provide two sets of methods for manipulating the position of elements in a web page. One set of methods is to move the element directly, and the other set of methods is to move other elements so that the target element is where we want it to be.

Suppose we select a div element and need to move it after the P element.

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

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

The second way is to use.after(), which precedes the p element in the div:

$('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, there is one big difference between them, and that is that they return different elements. The first method returns the div element, and the second method returns the P element. There are other ways of doing this

.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
Modifying element attributes

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

The fourth design idea of jQuery is to use the same function to complete the getter and setter, i.e. “valuer” and “assignment” in one. Whether to evaluate or assign depends on the parameters of the function.

$('h1').html(); $('h1').html('Hello'); // HTML () takes the argument Hello, which assigns h1Copy the code

Other common values and assignment functions (read, write)

Div most of the time corresponds to multiple DIV elements
$div.html() reads and writes HTML content $div.text() reads and writes text content $div.attr('title',?) Style $div.addClass('blue') $div.on('clicl',fn) $div.off('click',fn) $div.width() Height () Reads and writes the height of an element. $div.val() reads the value of a form elementCopy the code

The attr() method sets or returns the attributes and values of the selected element.

When this method is used to return an attribute value, it returns the value of the first matched element.

When this method is used to set an attribute value, one or more attribute/value pairs are set for the matched element.

Return the value of the property:

$(selector).attr(attribute)
Copy the code

Set properties and values:

$(selector).attr(attribute,value)
Copy the code

Use functions to set properties and values:

$(selector).attr(attribute,function(index,currentvalue))
Copy the code

Set multiple properties and values:

$(selector).attr({attribute:value, attribute:value,... })Copy the code
Some common tool methods
$.trim() removes Spaces at both ends of the string. $.each() iterates over an array or object. $.inarray () returns the index position of a value in the array. If the value is not in the array, -1 is returned. $.grep() returns the elements in the array that meet certain criteria. $.extend() merges multiple objects into the first object. $.makeArray() converts an object to an array. $.type() determines the class of objects (function objects, date objects, array objects, re objects, and so on). $.isarray () checks whether a parameter is an array. $.isemptyObject () determines whether an object is empty (without any attributes). $.isfunction () checks whether an argument is a function. $.isplainObject () determines whether a parameter is an Object created with "{}" or "new Object". $.support() Checks whether the browser supports a featureCopy the code
Daily learning records, there are mistakes please correct, this article for referenceRuan Yifeng jQuery design ideas