Java Review front-end article--jquery

　1.Jquery Overview

The Lightweight JS class library. JS is encapsulated. The role of jquery: Do page effects, page asynchronous operation. (jquery file {Note version} is first introduced when using)

　Entry function for 2.JQ

JQ is performed when the DOM tree of the page is drawn. You can write multiple entry functions.
and the anonymous function of JS, can only write one.

Traditional JS Way: page-loaded events can only be executed once.
Window.onload = function () {}

jquery Original notation
$ (document). Ready (function () {
Write your code here ...
});
jquery Simplified notation
$ (function () {
Write your code here ...
});

{$ (function () {}): The DOM tree of the page is executed after the drawing is complete.
The equivalent of a page-loaded event that can be executed multiple times. Efficiency is higher than window.onload.
$ equivalent to jquery}

3.JQ object and JS object convert to each other

(1) JS object converted to JQ object: var jqobj = $ (jsobj);
(2) The JQ object is converted to JS object:
var jsobj = jqobj[0];
or var jsobj = jqobj.get (0);

4.Jquery Selector

Description: $ ("selector") gets all the array objects

(1) Basic Selector
1. Element Selector
$ ("label name")
2.id Selector
$ ("#id属性值") property value that matches the ID of the label
3. Class Selector
$ (". Class attribute value") matches the property value of the tag class
4. Wildcard Selector
$ ("*") matches all tags
5. Parallel Selector
$ ("Selector 1, selector 2, selector 3")

(2) Level selector
Spaces: descendant elements of an element (including all descendants)
$ ("div span") matches all the span tags below the div
>: child element selector (includes son only)
$ ("div > span") matches the first layer span tag below the DIV
+: Next Sibling element
~: All the brothers behind the elements

(3) Basic filter selector
    :odd  odd
        $ ("#table tr:odd")   matches the odd line of id= "table"
    :even  even
        $ ("#table tr: Even ")   match even rows of id=" table "
    :first  first
        $ (" # Table Tr:first ")   match id= first row of" table "
    :last  last
        $ ("#table tr:last")   match id= last line of "table"
    :eq (number)   first (starting from subscript 0)
        $ ("#table tr:eq (3)")   matches fourth row of id= "table"

(4) Attribute Selector
Selector [Properties]
Description: A label that matches a property in the selector
Input[type]: Match label with type attribute in input tag
Selector [Property = property value]
Description: Label with attribute = attribute value in Match selector
Input[type= ' checkbox ']: Matches all check boxes

(5) Form selector
1. Form Object selector:
: Input matches all input, textarea, select, and button elements
: Text matches all single-line text boxes
:p assword match all password boxes
: Radio matches all radio buttons
: CheckBox matches all check boxes
: Submit matches all submit buttons
: Image matches all image fields
: Reset matches all reset buttons
: Button matches all buttons
: File matches All files fields
: Hidden matches all invisible elements, or elements of type hidden

2. Form object Property Selector:

: Enabled matches all available elements
:d isabled matches all unavailable elements
: Checked matches the selected Radio/checkbox
: Selected matches the selected drop-down box

　5.Jquery Property Manipulation

Attr the property----------$ ("selector") for a non-boolean property. attr ("src", "1.png")
Prop is primarily used to manipulate the Boolean property (checked and selected)----------$ ("selector"). Prop ("checked", true);
Removeattr (): Removes an attribute from each matching element
Removeprop (): Used to delete a property set set by the. Prop () method

6.Jquery of content operations

HTML ()
1. Get the tag content body (including HTML tags) var str = $ ("Iddiv"). html (); Get the content body of Id=iddiv
2. Set the label content body $ ("Iddiv"). HTML ("<span> overlay Content </span>") sets the content body of the Id=iddiv, overwriting its original content
Val ()
1. Gets the Value property of the form element (contains the selected checkbox/radio/select) var v = $ ("#select"). Val (); Gets the value of the Id=select selected drop-down box
2. Set the Value property of the form element (which can be used to select Checkbox/radio/select) $ ("#select"). Val ("Beijing"); check id=select below option value= "Beijing" <option> label
Text ()
1. Get the plain text content of the label (not including HTML tags) var text = $ ("Iddiv"). text (); Get Id=iddiv Plain text content
2. Set the plain text content of the label $ ("#idDiv"). Text ("Plain text content"); Set Id=iddiv Plain text content

7.Jquery Document Processing

Append ()--------Description: $ ("#idDiv"). Append ("<span> append to Id=iddiv back </span>")
AppendTo ()-----Description: $ ("#idSpan"). AppendTo ("#idDiv"); move Id=idspan tag to the back of Id=iddiv
Remove ()--------Description: $ (". Classdiv"). Remove (); Delete all labels for all Class=classdiv
InsertBefore ()------Insert all matching elements in front of another, specified set of element elements
InsertAfter ()--------insert all matching elements behind another, specified set of element elements

8.Jquery Manipulating CSS Styles

CSS ()----------------Description: $ ("#idDiv"). CSS ("Background", "Red"); set background:red CSS style for the style property of the Id=iddiv label
AddClass ()---------Description: $ ("Iddiv"). AddClass ("Newclass"); add Id=iddiv style to the Label class property of Newclass
Removeclass ()------Description: $ ("#idDiv"). Removeclass ("Newclass"); remove Newclass from class in Id=iddiv tag

9.Jquery Common Events

Click on the event:
$ ("selector"). Click=function () {}
The Change drop-down list changes the event:
$ ("selector"). Change=function () {}
Focus gets the Spotlight event:
$ ("selector"). Focus=function () {}
Blur Lost Focus Event:
$ ("selector"). Blur=function () {}
Submit a form event:
$ ("selector"). Submit=function () {} Note that you must return false to prevent the form from being submitted

　10.Jquery Trigger Event

Trigger ():
Description: Triggers the specified event $ ("#input") using jquery. Trigger ("focus"), triggering the focus event of the Id=input input, which executes the browser default behavior
Triggerhandler ():
Description: Triggers the specified event $ ("#input") using jquery. Triggerhandler ("Focus"), triggering a focus event for id=input input that blocks the browser's default behavior

11.Jquery Event Switching

Toggle ([SPEED],[EASING],[FN]);--click the Toggle Event
Used to bind two or more event handler functions in response to a rotating click event of the selected element.

Hover ([Over,]out)
A method that mimics the hover event (moving the mouse over an object and moving out of the object)
Over: The mouse moves to the function to be triggered on the element
Out: The mouse moves out of the element to trigger the function

12.Jquery Each loop

1.$.each ();
Description: Typically used to iterate through an array object
Format: $.each (Array object, function (I,n) {}); ----------Here the function represents the callback function
2.$ ("selector"). each ()
Description: Typically used to loop through the selected JQ array object of the selector
Format: $ ("selector"). each (function (i,n) {});
3. Note: The current value of the loop, which is the value of N of the current loop above, is represented in the use of this in each.

Java Review front-end article--jquery