Web Front End "tenth chapter" jquery Basic syntax

I. The basis of jquery
1. Why use jquery?
Simple, easy to write, high development efficiency, good compatibility
2. What is jquery?
jquery is a multi-browser-compatible JavaScript library (Python-like module)
3. How to use jquery?
1, import <script src= "Jquery-3.2.1.js" ></script>
or <script src= "Jquery-3.2.1.min.js" ></script>
2. Syntax rules: $ ("")
4. What is the difference between JS and jquery?
jquery is written in JS.
JS is the foundation, jquery is the tool
5. Introduction to jquery
-Version
-1.x
Compatible with IE8 ...
-3.x
Latest
-. min.xx
Compressed: For production environments
-No compression (No. min.xx): for development
6, jquery knowledge points
HTML: The Naked man
CSS: The person who wears the clothes
JS: Get people moving.
7. Selector:
1. Basic Selector
-ID Selector $ ("#id的值")
-Class Selector (classes) $ (Value of ". Class")
-Tag Selector (HTML tag) $ ("tag name")
-All Tags $ ("*")

-Combo Selector $ ("xx,xxx")
2. Level Selector
-Find $ ("Father and Descendants") from a label's descendants
-Find $ from a tagged son ("father > Son tag")
-Find the label next to the $ ("label + the tag next to below")
-Find the $ ("tags ~ brothers") for all the siblings behind

8. JQuery object:
-The jquery object was found with the jquery selector.
-jquery object, he can use the JQuery method, cannot use the DOM method

-dom objects and jquery object transformations:
-$ (". C1") [0]--dom object
-$ (DOM object)

9. Filter
        -written in quotation marks.
            Basic filters
            $ (": First")   find the One
            $ (": Not (')")  is not/non
            $ ("#i1 >input": Not ('. C1,.c2 '))
            $ (": even")     even
            $ (": Odd")      odd
            $ (": EQ (Index)")       find equal to index
            $ (": GT (Index)")       to find more than index
            $ (": LT (Index)")       find less than index
            $ (": Last")     
            $ (": Focus")    focus

Content ==========
$ (". C1:contains (' I'm the first ')") a label that contains the contents of the document
$ (": Empty") label content is empty
$ (": Has (')") contains label label
$ (":p arent") find a father with a child
$ ("#i7"). Parent () Find I7 's father

Visibility of ========
$ (": hidden") found hidden
$ (": visible") to find not hidden, that is, the display of
Property ==========
Input[name]--look for input with the name attribute
Input[type= ' password ')-type is the input label for password
Form ==========
: input
:p Assword
: checkbox
: Radio
: Submit
: button
: Image
: File

Form Object Properties =========
: Enable optional
:d isable not selectable
: Checked the selected
: Selected drop-down box selected
-written out of the signal when the method is used
Filter ===========
$ (""). First () find the One
$ (""). Parent () Find Father
$ (""). EQ (index) to find equals index
. Hasclass () Determine if there is a class
Find
. Children () Find a child
. Find () Lookup
. Next () below the
. Nextall () all of the following
. Nextuntil () find the following until a label is found

. Parent () Find Father
. Parents () Find all the Fathers
. Parentsuntil () until you find the father you're looking for.

. prev () above the
. Prevall () above all
. Prevuntil () above until a label is found

. Siblings () all the brothers

-Toggleclass () toggle | switch: Remove, no add

-AddClass ("Hide") Add Class

-Removeclass ("Hide") Delete class

Here are a few pictures to note
(1)

(2)

(3)

(4)

Second, exercises

Answer

Three, switch example

<! DOCTYPE html>
Web Front End "tenth chapter" jquery Basic syntax