[JQuery] A summary of common methods in jQuery and a summary of jquery

[JQuery] A summary of common methods in jQuery and a summary of jquery

1. Hierarchical Selector
Descendant selector "parent element descendant element"

For example, $ ("div p") selects all p elements under the div element.
Child element selector "parent element> child element"

For example, $ ("div> p") selects the p element in the child element of the div.
The first backward sibling element "element name + sibling element"

For example, $ ("div + p") selects the first p element after the div Element
All the following sibling elements "element names ~ Sibling element"

For example: $ ("div ~ P ") select all p elements after the div Element

2. Filter Selector
: First $ ("p: first") first <p> element
: Last $ ("p: last"); last <p> element
: Gt $ ("p: gt (1)"); all <p> elements numbered greater than 1
: Eq $ ("p: eq (1)"); <p> element with number equal to 1
: Odd $ ("td: odd"); all <td> elements with odd Numbers
: Even $ ("td: even"); all <td> elements with an even number
: Not $ ("p: not (. notr)") select all <p> elements without the class name notr

Filter by content
: Contains (content)
: Empty ()
Filter by display
: Hidden: Select hidden elements (display: none or type = "hidden" or hide parent elements with a length and width of 0, which are hidden elements)
: Visible
3. Form Selector
: Input
: Text
: Button
: File
: Radio
: Submit

4. Attribute -- filter Selector
[Attribute name] Select an element with this attribute
[Attribute name = 'value'] Select an element whose property is equal to a value
[Attribute name! = 'Value'] elements with properties not equal to a specific value

For example: $ ("input [name = 'newlatter ']"); select the input element whose name attribute is newlatter.

5. Form attribute Selector
Use: checked: selected: enabled: disabled to filter elements.
Simplified attribute filtering Selector
For example, $ (": radio: checked") selects all the selected radio Elements

$ ("Select option: selected") All selected option elements under the selected select
 
6. Get attributes

Attr ("property name ")

Set attributes

Attr ("attribute name", attribute value)

Remove attribute
RemoveAttr ("property name ")

7. How to obtain and set the value attribute
Val () and val ("value ")

8. html () html ("value ")
Html () corresponds to innerHTML
Html ("value") corresponds to innnerHTML = "value"

Text () text ("value ")
Text () corresponds to innerText ()
Text ("value") corresponds to innerText = "value"


9. style functions
Css ("style name") obtains the value of the style.
Css ("style name", "style value") sets a corresponding Style
Css ({"style name": "style value", "style name": "style value"}) sets multiple styles at a time

AddClass ("class Name") adds a value corresponding to the class attribute.
RemoveClass ("class Name") deletes the value corresponding to the class attribute
ToggleClass ("class Name") Switch

Width ()
Height () Get height
InnerWidth () to get the width (including the padding)
OuterWidth () to get the width (including the padding and Border)
OuterWidth (true) to get the width (including the padding and border and the padding)
 

10. Display and hide Functions
Show () display
Hide () hide
Toggle () Switch
Show (speed) is displayed within the specified time
Hide (speed) hidden within the specified time
Toggle (speed) Switching within the specified time

SlideUp (speed) shrinks upwards within the specified time
SlideDown (speed) expands down within the specified time
SlideToggle (speed) switches the above two States within the specified time

FadeIn (speed) fades in within the specified time
FadeOut (speed) fades out within the specified time
FadeToggle (speed) switches the two statuses above

11. Custom Animation
Selector. animate ({"parameter"}, [time], [animation callback function]);

$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). animate ({
Left: '250px ',
Opacity: '0. 5 ',
Height: '150px ',
Width: '150px'
},2000 );
});
});


12. Bind events
Selector. bind ("Event", event processing function); the event processing function associated with the element is replaced by on.
Selector. unbind ("Event"); disconnects element events and corresponding processing functions are replaced by off
Selector. trigger ("Event"); trigger event call