jquery important points of knowledge

jquery Basic selector----includes ID selector, tag Selector, class selector, wildcard selector and group selector 5 kinds

A. ID selector: $ ("#id")

B. Tag Selector: $ ("element")

C. class Selector: $ (". ClassName")

D. Wildcard selector: $ ("*") matches all elements in a specified context

E. Group selector: $ ("Selector1,selector2,selectorn") Features: No quantity limit, comma-delimited (match-by-one, result return all)

2. Hierarchy selector: Match elements through nested relationships in the DOM

jquery Hierarchy selector----contains selectors, sub-selectors, adjacent selectors, Brother selector 4 kinds

A. Include selector: $ ("a B") matches all descendant elements under a given ancestor element. (not restricted by hierarchy)

B. Sub-selector: $ ("Parent > Child") matches all child elements under the given parent element.

C. Adjacent selector: $ ("prev + next") matches all next elements immediately following the Prev element.

D. Brother Selector: $ ("prev ~ siblings") matches all sibling elements after the Prev element.

3. Common pseudo-class selectors: can be seen as a special class selector

1) Specific position selector

Selector description

: First matches the 1th element found

: Last match found final element

: EQ matches an element of a given index value

2) Specify range Selector

: Even matches all elements with an even number of indexed values

: Odd matches all elements with an odd index value

: GT (index) matches all elements that are greater than the given index value great than

: LT (index) matches all elements smaller than the given index value less than

3) Exclude selectors

: not removes all elements that match a given selector

2. Selector Optimization:

Using an appropriate selector expression can improve performance, enhance semantics, and simplify logic. In a common selector, the ID selector is the fastest, followed by the type selector.

A. Multi-use ID Selector

B. Less direct use of the class selector

C. Multiple parent-child relationships, less nested relationships

D. Caching jquery objects

Example:

for (i=0;i<10;i++) {

var mylist=$ ("MyList");

Mylist.append (i);

}

var mylist=$ ("MyList");

for (i=0;i<10;i++) {

Mylist.append (i);

}

3. Using filters

jquery provides 2 ways to select document elements: Selectors and filters

A. Class filters: Filter operations based on the class attributes of the elements.

Hasclass (ClassName): Determines whether an element in the current jquery object contains the specified class name, contains a return of true, does not contain a return of false

B. Subscript filter: Precisely select the specified subscript element

EQ (index): Gets the nth element. Index is an integer value and the subscript starts at 0

C. Expression filters

Filter (expr)/(FN): Filters out the collection of elements that match the specified expression/function.

The most powerful expression filter that can receive function arguments or simple selector expressions

D. Mapping Map (callback): Converting a set of elements to another array

E. Cleaning not (expr): Deleting elements that match the specified expression

F. Intercept Slice (start,end): Select a matching subset

$ ("#menu li"). Slice (1,4). CSS ("Color", "green"); 2,3,4 is green.

4. Find

A. Finding descendant elements down

Children (): Gets all the child element collections (child elements) of all elements

Find (): Searches for all elements that match the specified expression (found in all descendant elements)

E. Find sibling element siblings () find sibling of current element

First, create a node

1. Creating elements

Syntax: document.createelement (name);

var div = document.createelement ("div");

Document.body.appendChild (DIV);

$ (HTML): Creates a DOM object based on the passed token string

2. Create text

var div = document.createelement ("div");

var txt = document.createtextnode ("DOM");

Div.appendchild (TXT);

Document.body.appendChild (DIV);

var $div = = $ ("<div>DOM</div>");

$ (body). Append ($div);

3. Setting properties

Syntax: E.setattrbute (Name,value)

var div = document.createelement ("div");

var txt = document.createtextnode ("DOM");

Div.appendchild (TXT);

Document.body.appendChild (DIV);

Div.setattribute ("title", "box");

var $div = = $ ("<div title= ' box ' >DOM</div>");

$ (body). Append ($div);

Second, insert content

1. Internal insertion

To insert a node to the last face of an element:

A. Append (): Append content to each matched element

B. AppendTo (): Appends all matching elements to the specified set of elements, $ ("a"). Append ("B") is equivalent to $ ("B"). AppendTo ("a")

To insert a node to the front of the element:

C. prepend (): Put each matching element inside the front content

D. Prependto (): Put all matching elements in front of another specified set of elements, $ ("a"). Prepend ("B") is equivalent to $ ("B"). Prependto ("a")

2. External insertion

A. After (): Insert content after each matching element

B. Before (): Insert content before each match to an element

C. InsertAfter (): Inserts all matching elements behind another specified collection of elements, $A. Insert ($B) equivalent $B. InsertAfter ($A);

D. InsertBefore (): Inserts all matching elements in front of another specified collection of elements $A. Before ($B) equivalent $B. insertbefore ($A);

Iii. Deletion of content

1. Removal

Remove (): Removes all matching elements from the DOM

2. Clear

Empty (): Delete the contents of all child nodes in the matching element collection

Iv. cloning content: Creating a copy of the specified node

Clone ()

Note: If Clone (true) is a property that includes the cloned element, events, etc.

V. Contents of replacement

A. replacewith (): Replace all matching elements with the specified elements

B. ReplaceAll (): Replace the specified element with a matching element

Note: The effect is the same, except that the syntax is different $A. ReplaceAll ($B) is equivalent to $B. Replacewhith ($A);

=============================================================================================================== =======

I. Introduction to the jquery animation

The JavaScript language itself does not support animation design and must be animated by changing the CSS.

Explicit hidden

1. Explicit animation

Show (): Show

Hide (): Hide

Principle: Hide () changes the height width and opacity of an element until the three attribute values are 0

Show () increases the height of the element from top to bottom, increasing the width of the element from left to right, increasing the transparency from 0 to 1 until the content is fully visible

Parameters:

Show ()

Show (Speed,callback)

Speed: A string or number that indicates how long the animation will run (slow=0.6/normal=0.4/fast=0.2)

Callback: The method that is executed when the animation finishes

Show and hide a pair of inseparable animated forms.

2. Explicit switching

Toggle (): Toggles the visible state of an element

Principle: Match element width, height, and opacity, animate, hide the animation and set display to None

Parameters:

Toggle (Speed)

Toggle (Speed,callback)

Toggle (Boolean)

Speed: A string or number that indicates how long the animation will run (slow=0.6/normal=0.4/fast=0.2)

Easing: Which buffer function to use to transition the string (linear/swing)

Callback: The method that is executed when the animation finishes

Boolean:true to show false as hidden

Sliding

1. Explicit Slide effect

Slidedown (): Swipe to hide

Slidup (): Slide show

Parameters:

Slidedown (Speed,callback)

Slidup (Speed,callback)

2. Covert Toggle Slide

Slidetoggle (): Explicit slide Toggle

Parameters:

Slidup (Speed,callback)

Gradients: By changing the opacity

1. Fade in and fade out

FadeIn ()

FadeOut ()

Parameters:

FadeIn (Speed,callback)

FadeOut (Speed,callback)

2. Set fade-out transparency effect

FadeTo ()?: adjust to the specified transparency in a gradual manner

Parameters:

FadeTo (Speed,opacity,callback)

3. Gradient switch: Combine Fadein and fadeout

Fadetoggle ()

Parameters:

FadeOut (Speed,callback)

Custom:

1. Custom animations: Animate ()

Simulate show with Animate ():

Show: represented by transparent to opaque

Toggle: Toggle

Hide: Represented by display to hidden

2. Event property:

Type: Gets the event type name

Target: The node where the event occurred

KeyCode: Only for KeyPress event, get keyboard key number press ENTER, 13

PageX: The horizontal coordinate of the cursor for the origin of the page body

Pagey: The vertical coordinates of the cursor for the origin of the page

ClientX: Cursor for browser window's horizontal coordinate browser

ClientY: The vertical coordinates of the cursor for the browser window

ScreenX: The horizontal coordinates of the cursor for the computer screen computer screen

ScreenY: The horizontal coordinates of the cursor for the computer screen

3. Stoppropagation (): Stop bubbling

1. From inside to outside

2. Nesting relationships

3. Same event

4. When one of the parent classes does not have the same event, continue to look up

4. Bind ();//Bind

Binding processing methods for matching elements

You need to add multiple events to an element, as the event executes

One ()://Execute only once

To bind a specific event type method:

Blur () Focus () MouseDown () Resize () change () KeyDown () MouseMove () scroll ()

Click () keypress () mouseout () Select () DblClick () KeyUp () mouseover () Submit ()

Error () load () MouseUp () unload ()

jquery important points of knowledge