JQuery notes, jquery learning notes

JQuery notes, jquery learning notes

I. jQuery reference

Method 1:

Method 2:

 

Ii. jQuery syntax

Basic Syntax: $ (selector). action ()

--- Dollar sign defines jQuery

--- Selector: "query" and "Search" HTML elements

--- JQuery action () executes operations on Elements

 

Example

$ (Document). ready (function () {--- prevent the document from running jQuery code before it is fully loaded

$ (Botton). onclick (function (){

$ (This). hide ()-hide the current element

$ ("P"). hide ()-hide all paragraphs

$ (". Test"). hide ()-hide all elements of all classes = "test"

$ ("# Test"). hide ()-hide all id = "test" Elements

});

});

 

Iii. jQuery Selector

 

1, JQuery element Selector

JQuery uses the CSS selector to select HTML elements.

$ ("P") Select the <p> element.

$ ("P. intro") select all <p> elements of class = "intro.

$ ("P # demo") select all <p> elements of id = "demo.

 

2, JQuery attribute Selector

JQuery uses an XPath expression to select an element with a given attribute.

$ ("[Href]") selects all elements with the href attribute.

$ ("[Href = '#']") select all elements with an href value equal.

$ ("[Href! = '#'] ") Select all elements with an href value not equal.

$ ("Your href00000000'.jpg ']") select all elements whose href values end with ". jpg.

 

3, JQuery CSS Selector

$ ('"P" ).css ("background-color", "red ");

 

Iv. Event Functions

JQuery events

EventFunction	Bind a function
$ (Document). ready (function)	Bind the function to the ready event of the document (when the document is loaded)
$ (Selector). click (function)	Click events that trigger or bind a function to the selected Element
$ (Selector). dblclick (function)	Double-click event that triggers or binds a function to the selected Element
$ (Selector). focus (function)	Events that trigger or bind a function to the retrieved focus of the selected Element
$ (Selector). mouseover (function)	A mouse hover event that triggers or binds a function to the selected element.

 

V. JQuery hide and display

1. Syntax

$ ("Selector"). hide (speed, callback); // speed: Display hidden speed, slow, fast, or millisecond

$ ("Selector"). show (speed, callback); // callback: displays or hides the name of the function to be executed.

$ (Selector). toggle (speed, callback); // switch between display and hide

 

Vi. fade in and out of jQuery

 $ (Selector). fadeIn (speed, callback); // fades in hidden elements.

 

$ (Selector). fadeOut (speed, callback); // fade-out element.

$ (Selector). fadeToggle (speed, callback); // fade in and out

The fadeTo () method allows gradient to be a given opacity (value between 0 and 1 ).

$ (Selector). fadeTo (speed, opacity, callback );

 

7. jQuery slide up and down

$ (Selector). slideDown (speed, callback); \ slide down the element

$ (Selector). slideUp (speed, callback); \ move up Element

$ (Selector). slideToggle (speed, callback); \ move the element up or down

 

8. jQuery Animation

$ (Selector). animate ({params}, speed, callback );

-- Params Parameter definition forms the CSS attribute of the animation

* ** To operate the position, set the CSS position attribute of the element to relative \ fixed \ absolute ****

Instance:

$ ("Button"). click (function (){

$ ("Div"). animate ({

Left: '250px'

Opacity: '0. 5' --- transparency

Height: '+ = 150px' ---- relative application, based on the original

Width: 'toggle '-- default value, hide \ show \ toggle

// Queue animate

Var div = $ ("div ")

Div. animate ({CSS attribute}, speed, callback );//

Div. animate ({CSS attribute}, speed, callback );

})

}

9. stop the animation ()

$ (Selector). stop (); -- stop the current animation and continue the next Animation

$ (Selector). stop (true); ---- stop all animations

$ (Selector). stop (true, true); ---- stop the animation to complete the current Animation

 

10. callback usage

Instance

$ ("P"). hide (1000, function () {alert ("test ");});

 

 

11. jQuery method and action connection usage

Optional (selector).css ("color", "red"). slideUp (100). slideDown (100); --- each method can be wrapped with a line break. Do not use a semicolon

 

12. jQuery acquisition and setting

• Text ()-set or return the text content of the selected Element
• Html ()-set or return the content of the selected element (including HTML tags)
• Val ()-set or return the value of a form field
• The attr () method is used to obtain the attribute value.

Instance: alert ("html:" + outputs (selector).html ());

 

12. Use callback function settings

$ ("# Btn1"). click (function (){

$ ("# Test1"). text (function (I, origText ){

Return "Old text:" + origText + "New text: Hello world! (Index: "+ I + ")";

});

});

 

$ ("# Btn2"). click (function (){

$ ("# Test2" functions .html (function (I, origText ){

Return "Old html:" + origText + "New html: Hello <B> world! </B>

(Index: "+ I + ")";

});

});

$ ("Button"). click (function (){

$ ("# W3s"). attr ("href", function (I, origValue ){

Return origValue + "/jquery ";

});

});

$ ("Button"). click (function () {-- set multiple attribute values at the same time

$ ("# W3s"). attr ({

"Href": "http://www.w3school.com.cn/jquery ",

"Title": "W3School jQuery Tutorial"

});

});

13. insert content at the position of the selected Element

Append ()-insert content at the end of the selected Element

Prepend ()-insert content at the beginning of the selected Element

After ()-insert content after the selected Element

Before ()-insert content before the selected Element

Function afterText ()

{

 

Var txt1 = "<B> I </B>"; // create a new element in HTML

Var txt2 = $ ("<I> </I>"). text ("love"); // create a new element using jQuery

Var txt3 = document. createElement ("big"); // create a new element through DOM

Txt3.innerHTML = "jQuery! ";

$ ("Img"). after (txt1, txt2, txt3); // Insert new elements after img

}

14. jQuery deletes Elements

Remove () ---- Delete selected Element

Empty () ---- Delete the child element of the selected Element

$ ("P"). remove (". cl") --- deletes the element with class cl in "p ".

 

15. jQuery -- get and set the CSS class

• AddClass ()-add one or more classes to the selected Element
• RemoveClass ()-delete one or more classes from the selected Element
• ToggleClass ()-Adds or deletes the selected element to/from the switch operation.
• Css ()-set or return style attributes

$ (Selector). addClass ("CSS class name") --- set multiple CSS classes separated by Spaces

$ (Selector). removeClass ("CSS class name") --- Remove the CSS class

((Selector).css ("propertyname") ---- return the value of the CSS attribute

((Selector).css ("propertyname", "value") ---- set the CSS Attribute value

((Selector).css ({"propertyname": "value1", "propertyname": "value"}); --- set multiple CSS attribute values

 

16. jQuery size

JQuery width ()AndHeight ()Method

$ (Selector). width () method to set or return the width of an element (excluding the padding, border, or margin)

$ (Selector). height () method to set or return the height of an element (excluding the padding, border, or margin)

JQuery innerWidth ()AndInnerHeight ()Method

The innerWidth () method returns the width (including the padding) of the element ).

The innerHeight () method returns the height of the element (including the padding ).

JQuery outerWidth ()AndOuterHeight ()Method

The outerWidth () method returns the width of the element (including the padding and border ).

The outerHeight () method returns the height of an element, including the padding and border ).

The outerWidth (true) method returns the width of the element (including the padding, border, and margin ).

The outerHeight (true) method returns the height of an element, including the padding, border, and margin ).

 

17. jQuery Traversal

-Ancestor---You can directlyParent().cssAttribute

$ ("Span"). parent (); returns the direct parent element of the selected element.

$ ("Span"). parents (); ------ return all ancestor elements of the selected Element

$ ("Span"). parents ("ul"); ---- returns all origins of all <span> elements, and it is a <ul> element.

$ ("Span"). parentsUntil ("div"); --- returns all ancestor elements between two given elements.

 

18. jQuery traversal-descendant

$ ("Selector"). children () ------- return all direct child elements of the selected Element

$ ("Div"). children ("p.1"); ----- returns all <p> elements of the class named "1", and they are directly subelements of <div>.

$ ("Div"). find ("*"); ----- returns all descendants of <div>

$ ("Div"). find ("span"); ----- returns all <span> elements belonging to <div> descendants.

 

19. jQuery traversal-compatriot

$ ("H2"). siblings (); --- return all sibling elements of

$ ("H2"). siblings ("p"); --- return all <p> elements belonging to

$ ("H2"). next (); -- returns the next compatriot element of the selected element.

$ ("H2"). nextAll (); --- return all sibling elements following

$ ("H2"). nextUntil ("h6"); --- return all sibling elements between

Prev (), prevAll () & prevUntil () method --- returns the first, all of the preceding, sibling elements between two elements.

 

20. jQuery traversal-Filtering

$ ("Div p"). first (); ----- select the first <div> element <p>

$ ("Div p"). last (); ----- select the last <p> element in the last <div> element:

$ ("P"). eq (1); ----- select the second <p> element (index number 1); the first is 0

$ ("P"). filter (". intro"); ---- return all <p> elements with the class name "intro"

$ ("P"). not (". intro"); ---- return all <p> elements without the class name "intro"

 

21. AJAX

 It is the art of data exchange with the server. It updates some webpages without reloading all pages.

 

22. AJAX load ()

$ (Selector). Load (URL,Data,Callback); -- Load data from the server and put the returned data into the selected Element

$ ("# Div1 "). load ("demo_test.txt # p1"); -- load the content of the id = "p1" element in the "demo_test.txt" file to the specified <div> element.

The following example shows a prompt box after the load () method is complete. If the load () method is successful, "external content loaded successfully" is displayed !", If it fails, an error is displayed.

$ ("Button"). click (function (){

$ ("# Div1"). load ("demo_test.txt", function (responseTxt, statusTxt, xhr ){

If (statusTxt = "success ")

Alert ("external content loaded successfully! ");

If (statusTxt = "error ")

Alert ("Error:" + xhr. status + ":" + xhr. statusText );

});

});

• ResponseTxt-Contains the result when the call is successful.
• StatusTXT-Including the call status
• Xhr-Contains the XMLHttpRequest object.

Twenty-three, jQuery get () and post () Methods

Used to request data from the server through http get or POST requests

$. Get (URL,Callback);

---- The preceding example uses the $. get () method to retrieve data from a file on the server.

$ ("Button"). click (function (){

$. Get ("demo_test.asp", function (data, status ){

Alert ("Data:" + data + "\ nStatus:" + status );

});

});

$. Post (URL,Data,Callback);