On-the-ground Python "16th chapter": JQuery of Web front-end

On-the-ground Python "16th chapter": The Web Front-end foundation of jquery One, what is jquery?

jquery is a library of JavaScript functions.

jquery is a lightweight "write less, do more" JavaScript library.

The jquery library contains the following features:

• HTML element Selection
• HTML element manipulation
• CSS actions
• HTML Event functions
• JavaScript Effects and animations
• HTML DOM Traversal and modification
• Ajax
• Utilities

Tip: In addition to this, jquery offers a number of plugins.

Here's a jquery operation Quick Check website: http://jquery.cuishifeng.cn/

There are three versions of jquery:

1.X 2.X 3.X

In principle is the newest best, the newest representative of the latest and most advanced features, but also contains the latest uncovered bugs, and the old version of the browser is not supported, compatibility relative 1. The x version is poor, 1 is recommended here. X version , the best compatibility, the function is not bad.

Download

Official website: https://jquery.com/

Download links for 1.12.4 are available here

Https://code.jquery.com/jquery-1.12.4.js
Https://code.jquery.com/jquery-1.12.4.min.js (This is a compact version)

First, find elements import jquery

<! DOCTYPE html>
Find element
 
  Selector 
    

  
  
 
   
 
    
Selector
Example
 
    
Select
 
   
 
   
 
    
*
 
    
$("*")
 
    
All elements
 
   
 
   
 
    
#ID
 
    
$ ("#lastname")
 
    
id= elements of "LastName"
 
   
 
   
 
    
. class
 
    
$ (". Intro")
 
    
class= all elements of "intro"
 
   
 
   
 
    
. class,. class
 
    
$ (". Intro,.demo")
 
    
All elements of Class "Intro" or "Demo"
 
   
 
   
 
    
Element
 
    
$ ("P")
 
    
All <p> elements
 
   
 
   
 
    
el1,el2,el3
 
    
$ ("h1,div,p")
 
    
All  
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
: First
 
    
$ ("P:first")
 
    
First <p> Element
 
   
 
   
 
    
: Last
 
    
$ ("P:last")
 
    
Last <p> Element
 
   
 
   
 
    
: Even
 
    
$ ("Tr:even")
 
    
All even <tr> elements, the index value starts at 0, the first element is an even number (0), the second element is odd (1), and so on.
 
   
 
   
 
    
: Odd
 
    
$ ("tr:odd")
 
    
All odd <tr> elements, the index value starts at 0, the first element is an even number (0), the second element is odd (1), and so on.
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
: First-child
 
    
$ ("P:first-child")
 
    
All <p> elements that belong to the first child element of its parent element
 
   
 
   
 
    
: First-of-type
 
    
$ ("P:first-of-type")
 
    
All <p> elements of the first <p> element that belong to its parent element
 
   
 
   
 
    
: Last-child
 
    
$ ("P:last-child")
 
    
All <p> elements that belong to the last child element of its parent element
 
   
 
   
 
    
: Last-of-type
 
    
$ ("P:last-of-type")
 
    
All <p> elements of the last <p> element that belong to its parent element
 
   
 
   
 
    
: Nth-child (n)
 
    
$ ("P:nth-child (2)")
 
    
All <p> elements that belong to the second child element of its parent element
 
   
 
   
 
    
: Nth-last-child (n)
 
    
$ ("P:nth-last-child (2)")
 
    
All <p> elements that belong to the second child element of its parent element, counting from the last child element
 
   
 
   
 
    
: Nth-of-type (n)
 
    
$ ("P:nth-of-type (2)")
 
    
All <p> elements of the second <p> element that belong to its parent element
 
   
 
   
 
    
: Nth-last-of-type (n)
 
    
$ ("P:nth-last-of-type (2)")
 
    
All <p> elements of the second <p> element that belong to its parent element, starting with the last child element count
 
   
 
   
 
    
: Only-child
 
    
$ ("P:only-child")
 
    
All <p> elements that belong to the unique child element of its parent element
 
   
 
   
 
    
: Only-of-type
 
    
$ ("P:only-of-type")
 
    
All <p> elements of a unique child element of a particular type that belong to its parent element
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
Parent > Child
 
    
$ ("div > P")
 
    
<div> all <p> elements of the immediate child element of the element
 
   
 
   
 
    
Parent descendant
 
    
$ ("div p")
 
    
<div> all <p> elements of descendants of an element
 
   
 
   
 
    
Element + Next
 
    
$ ("div + P")
 
    
Next <p> element adjacent to each <div> element
 
   
 
   
 
    
Element ~ Siblings
 
    
$ ("div ~ P")
 
    
<div> all <p> elements of an element's peers
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
: eq (index)
 
    
$ ("UL Li:eq (3)")
 
    
The fourth element in the list (the index value starts at 0)
 
   
 
   
 
    
: GT (no)
 
    
$ ("UL li:gt (3)")
 
    
Enumerate elements with index greater than 3
 
   
 
   
 
    
: LT (no)
 
    
$ ("UL Li:lt (3)")
 
    
Enumerate elements with index less than 3
 
   
 
   
 
    
: Not (selector)
 
    
$ ("Input:not (: Empty)")
 
    
All input elements that are not empty
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
: Header
 
    
$ (": Header")
 
    
All title elements  
   
 
   
 
    
: Animated
 
    
$ (": animated")
 
    
All animated elements
 
   
 
   
 
    
: Focus
 
    
$ (": Focus")
 
    
The element that currently has focus
 
   
 
   
 
    
: Contains (text)
 
    
$ (": Contains (' Hello ')")
 
    
All elements that contain the text "Hello"
 
   
 
   
 
    
: Has (selector)
 
    
$ ("Div:has (P)")
 
    
All <div> elements that contain <p> elements
 
   
 
   
 
    
: Empty
 
    
$ (": Empty")
 
    
All empty elements
 
   
 
   
 
    
:p arent
 
    
$ (":p arent")
 
    
Matches elements that contain child elements or text.
 
   
 
   
 
    
: Hidden
 
    
$ ("P:hidden")
 
    
All hidden <p> elements
 
   
 
   
 
    
: Visible
 
    
$ ("table:visible")
 
    
All the visible tables
 
   
 
   
 
    
: Root
 
    
$ (": Root")
 
    
The root element of the document
 
   
 
   
 
    
: lang (language)
 
    
$ ("P:lang (DE)")
 
    
All <p> elements with the value of the lang attribute starting with "de"
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
[attribute]
 
    
$ ("[href]")
 
    
All elements with an HREF attribute
 
   
 
   
 
    
[attribute=value]
 
    
$ ("[href= ' default.htm ']")
 
    
All elements with an HREF attribute and a value equal to "default.htm"
 
   
 
   
 
    
[attribute! =value]
 
    
$ ("[href!= ' default.htm ']")
 
    
All elements with href attribute and value not equal to "default.htm"
 
   
 
   
 
    
[attribute$=value]
 
    
$ ("[href$= '. jpg ']")
 
    
All elements with the href attribute and the value ending with ". jpg"
 
   
 
   
 
    
[attribute|=value]
 
    
$ ("[title|= ' Tomorrow ']")
 
    
All strings with the title attribute with a value equal to ' tomorrow ' or a ' tomorrow ' followed by a connector
 
   
 
   
 
    
[attribute^=value]
 
    
$ ("[title^= ' Tom ']")
 
    
All elements with the title attribute and the value beginning with "Tom"
 
   
 
   
 
    
[attribute~=value]
 
    
$ ("[title~= ' Hello ']")
 
    
All elements with the title attribute and the value contains the word "Hello"
 
   
 
   
 
    
[attribute*=value]
 
    
$ ("[title*= ' Hello ']")
 
    
All elements with the title attribute and the value containing the string "Hello"
 
   
 
   
 
    
[Name=value] [name2=value2]
 
    
$ ("input[id][name$= ' Man ']")
 
    
An input box with the id attribute and the Name property with the man end
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
: input
 
    
$ (": input")
 
    
All input elements
 
   
 
   
 
    
: Text
 
    
$ (": Text")
 
    
All input elements with type= "text"
 
   
 
   
 
    
:p Assword
 
    
$ (":p Assword")
 
    
All input elements with type= "password"
 
   
 
   
 
    
: Radio
 
    
$ (": Radio")
 
    
All input elements with type= "Radio"
 
   
 
   
 
    
: checkbox
 
    
$ (": checkbox")
 
    
All input elements with type= "checkbox"
 
   
 
   
 
    
: Submit
 
    
$ (": Submit")
 
    
All input elements with type= "Submit"
 
   
 
   
 
    
: RESET
 
    
$ (": Reset")
 
    
All input elements with type= "reset"
 
   
 
   
 
    
: button
 
    
$ (": Button")
 
    
All input elements with type= "button"
 
   
 
   
 
    
: Image
 
    
$ (": Image")
 
    
All input elements with type= "image"
 
   
 
   
 
    
: File
 
    
$ (": File")
 
    
All input elements with type= "file"
 
   
 
   
 
    
: Enabled
 
    
$ (": Enabled")
 
    
All enabled elements
 
   
 
   
 
    
:d isabled
 
    
$ (":d isabled")
 
    
All disabled elements
 
   
 
   
 
    
: Selected
 
    
$ (": Selected")
 
    
All selected drop-down list elements
 
   
 
   
 
    
: Checked
 
    
$ (": Checked")
 
    
All Selected check box options
 
   
 
   
 
    
. selector
 
    
$ (selector). Selector
 
    
is deprecated in jquery 1.7. returns the original selector passed to jquery ()
 
   
 
   
 
    
: Target
 
    
$ ("P:target")
 
    
The selector selects the <p> element that matches the ID and a formatted identifier in the URI
 
   
 
  
 
 
Second, the Operation element screening
$ (' #i1 '). Next () $ (' #i1 '). Nextall () $ (' #i1 '). Nextuntil (' #ii1 ') <div><a>asdf</a><a>asdf< /a><a id= ' i1 ' >asdf</a><a>asdf</a><a id= ' II1 ' >asdf</a><a>asdf</a ></div>$ (' #i1 '). Prev () $ (' #i1 '). Prevall () $ (' #i1 '). Prevuntil (' #ii1 ') $ (' #i1 '). Parent () $ (' #i1 '). Parents () $ (' #i1 '). Parentsuntil () $ (' #i1 '). Children () $ (' #i1 '). Siblings () $ (' #i1 '). Find () $ (' Li:eq (1) ') $ (' Li '). EQ (1) First () Last () Hasclass (Class)
Text manipulation
$(..). Text ()           # Gets the literal content $ (..). Text ("<a>1</a>") # set literal content $ (..). HTML () $ (..). HTML ("<a>1</a>") $ (..). Val () $ (..). Val (..)
Style actions
Addclassremoveclasstoggleclass
Property manipulation
# dedicated to making custom properties $ (..). attr (' n ') $ (..). attr (' n ', ' V ') $ (..). Removeattr (' n ') <input type= ' checkbox ' id= ' I1 '  /># is dedicated to chekbox,radio$ (..). Prop (' checked ') $ (..). Prop (' checked ', true) Ps:index get index location
Event Bindings
$ ('. C1 '). Click () $ ('. C1 ') ... $ ('. C1 '). Bind (' click ', Function () {}) $ ('. C1 '). Unbind (' click ', Function () {}) ********* $ ('. C '). Delegate (' A ', ' click ', Function () {}) $ ('. C '). Undelegate (' A ', ' click ', Function () {}) $ ('. C1 '). Click ', function () {}) $ ('. C1 '). Off (' click ', Function () {}) prevents the event from taking place return false# automatically executes $ (function () {$ (...)} after the page frame is loaded.
jquery extension
-$.extend        $. Method-$.fn.extend     $ (..). Method (function () {var status = 1;//wrapper variable}) (JQuery)
　　
On-the-ground Python "16th chapter": JQuery of Web front-end