The front end - jquery

What is jQuery

Js highly encapsulated code module (efficiency is relatively low)

• Dom node encapsulates
• Packaging method is simple node dom

jQuery advantage

Js code to the browser compatibility do better

Two features of jQuery

• Chain Programming: for example the .Show () and .html () can be written even .show () html ().

• Implicit iterative: Implicit corresponding explicit. Implicit iterative means: cycle through the internal method, rather than our own cycle further simplify our operations, we call convenience

jQuery import

https://code.jquery.com/jquery-3.4.1.js　　uncompressed version
https://code.jquery.com/jquery-3.4.1.min.js　　compressed version
download: Save the file locally
introduced: <script src = "filename"> </ script>

The relationship between the $ and jQuery

$ Name is shorthand for jQuery, virtually identical

jQuery using  $ symbols reason: writing is simple, compared to other characters distinctive, easy to remember

jQuery objects and DOM objects relationships and conversion

jQuery encapsulates DOM

DOM turn into jQuery: jQuery (DOM object) or $ (DOM object)

jQuery turn into DOM: jQuery Object [index]

jQuery selector

The basic selector

$ ( "# the above mentioned id")          // the above mentioned id selector 
$ ( "tagName")      // tag selector 
$ (. "className")   // class selector 
$ ( "*")            // universal selector 
$ ( "div .c1 ")       // intersection selectors have found a div tag containing the c1 class 
$ (" # the above mentioned id, .className, tagName ") // and set selector

Level selector

$ ( "the y-x"); // descendant selectors to find all descendants of x y (children and grandchildren) 
$ ( "x> the y-"); // descendant selectors to find all the sons of x y (son) 
$ ( " y + x ") // adjacent selector to find all immediately behind the x y 
$ (" x ~ y ") // all the selectors after younger brother brothers find x y

Attribute selectors

$ ( '[Attribute name]' ) must be a label containing an attribute 
$ ( 'a [attribute name]' ) containing an attribute of a tag 
$ ( 'selector [attribute name]' matching a previous selection) containing an attribute the label of 
$ ( 'selector [attribute name = "aaaa"]') attribute name = AAA meet the selection requires tag 
$ ( 'selector [attribute name $ = "xxx"]' ) attribute value ends with xxx of 
$ ( 'selector [attribute name ^ = "xxx"]' ) attribute value begins xxx of 
$ ( 'selector [attribute name * = "xxx"]' ) attribute value contains xxx 
$ ( 'selector [attribute name 1] [attribute name 2 = "xxx] ') has an attribute, and the attribute value of the two =' xxx ', in line with the front of the selector required

Filters

Basic filters

Usage: $ ( 'selector: filter')

Action selected in the selector results

$ ( 'Select: Filters' ) 
$ ( 'selector: first' ) 
action is selected in the selector results 
first find the first 
last last 
eq (index) by an index to find 
even look for even-indexed 
odd odd-looking index 
gt (index) greater than a certain index 
lt (index) is smaller than a certain index 
not (selector) does not meet the requirements of the selector 
has (selector) contains (not find the selected progeny requires offspring, looking for a itself)

Form Filter

type filter

Filter by type of label input

$ ( ': text' ) 
$ ( ': password' ) 
$ ( ': Radio' ) 
$ ( ': the CheckBox' ) 
$ ( ': File' ) 
$ ( ': the Submit' ) 
$ ( ': the RESET' ) 
$ ( ': the Button' ) 
Note: date type of input can not be found

Status Filter

$(':disabled')
$(':enabled')
$(':checked')
$(':selected')

jQuery filter method

Brothers find: $ ( 'ul p' ) .siblings () 
find his brother 
$ ( 'the p-ul' ) .prev () to find one closest to me brother 
$ ( 'the p-ul' to find all brother) .prevAll () 
$ ( 'the p-ul') prevUntil ( 'selector' ) to find his brother somewhere stopped 
looking for his brother: the Next () nextAll () nextUntil ( 'selector' ) 
to find ancestors: parent () parents () parentsUntil ( 'selector' ) 
to find his son: children ()

Further screening methods

First () 
Last () 
EQ (index) 
Not ( 'selector' ) removed satisfies selector condition 
filter ( 'selector' ) the intersection of the selector, all the results continue to find satisfies the selection requires a 
Find ( 'Select device ' ) descendant selector selectors meet the requirements to find the descendants of all results 
has ( ' selector ') by looking for contemporary descendant relationship progeny that meet the requirements put contemporary selector left