JQuery notes, jquery

JQuery notes, jquery
JQuery is a JavaScript function library.
JQuery Library also has the following features:
1. HTML element selection
2. HTML element operations
3. CSS operations
4. HTML event Functions
5. JAVASCRIPT effects and animation
6. AJAX
7. Utilites
JavaScript is the default scripting language in HTML5 and all modern browsers!
Using Google or Microsoft's jQuery has a major advantage:
Many users have loaded jQuery from Google or Microsoft when visiting other sites. All the results are that jQuery is loaded from the cache when they visit the site, which reduces the loading time. At the same time, most cdns can ensure that when users request files from them, they will return a response from the server closest to the user, which can also increase the loading speed.


JQuery syntax example
$ (This). hide () hides the current HTML element.
$ ("# Test"). hide () hides the id = "test" element.
$ ("P"). hide () hides all <p> elements.
$ (". Test"). hide () hides all elements of class = "test.
JQuery uses a combination of XPath and CSS selection syntax.
The jQuery function is in a document ready function to prevent the document from running jQuery code before it is fully loaded (ready. If you run the function before the document is fully loaded, the operation may fail.
For example: 1. Try to hide a nonexistent element.
2. Obtain the size of the not fully loaded image
The jQuery element selector and attribute selector allow you to select HTML elements by Tag Name, attribute name, or content.
The selector allows you to operate on HTML element groups or individual elements.
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.
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.
$ ("Your href0000'.jpg ']" optional. All elements whose hrefvalue ends with ". jpg.
The jQuery CSS selector can be used to change the CSS attributes of HTML elements.
Change the background color column of all P elements to red.
$ ("P" ).css ("backgroud-color", "red ");
$ ("Ul li: first") the first <li> element of each <ul>
$ ("Href00000000'.jpg '" contains all href attributes with attribute values ending with JPG.
$ ("Div # intro. head") id = "intro" all the class = "head" elements in the <div> element
JQuery Name Conflict
Var jq = jQuery. noConflict () helps you replace the $ symbol with your own name (such as jq.
JQuery events
$ (Document). ready (function) binds a function to a ready event in the document.
$ (Selector). click (function) triggers or binds a function to a click event of the selected element.
$ (Selector). dbclick (function) triggers or binds the function to the double-click event of the selected element.
$ (Selector). click (function) triggers or binds a function to a click event of the selected element.
$ (Selector). mouseover (function) triggers or binds a function to the mouse hover event of the selected Element
$ (Selector). hide (speed, callback); the speed parameter specifies the hidden/display speed, which can be slow, fast, or millisecond.
$ (Selector). show (speed, callback); the callback parameter is the name of the function that hides or displays hot rows.
JQuery. You can use the toggle () method to switch between the hide () and show () methods.
JQuery has the following four fade methods:
FadeIn () fade in
FadeOut () fade out
FadeToggle () switches between fade-in and fade-out methods
FadeTo () allows gradient to be a given opacity (values between 0 and 1)
SlideDown () sliding down Element
SlideUp () sliding up Element
SlideToggle () is used to slide up and down
$ (Selector). animate ({params}, speed, callback); used to create a Custom Animation
The required params parameter defines the CSS attributes of the animation.
The optional speed parameter specifies the duration of the effect.
The optional callback parameter is the name of the function executed after the animation is completed.
$ ("Button"). click (function (){
$ ("Div"). animate ({
Left: '250px ',
Opacity: '0. 5 ',
Height: '150px ',
Width: '150px'
});
});
$ (Selector). stop (stopAll, goToEnd );
The optional stopAll parameter specifies whether to clear the animation queue.
The optional goToEnd parameter specifies whether the current animation is completed immediately.
The Callback function is executed after the current animation 100% is complete.
JQuery Method for DOM operations:
Text () -- set or return the text content of the selected Element
Html () -- set or return the content of the selected Element
Val () -- set or return the value of a form field
The jQuery attr () method is used to obtain the attribute value.
$ ("Button"). click (function (){
Alert ($ ("# w3s"). attr ("href "));
})
With jQuery, you can easily add new elements/Content
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
Delete Element
Remove ()-delete the selected element (and its child element)
Empty ()-delete a child element from the selected Element
Operate CSS using jQuery
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
JQuery size Method
Width ()
Height ()
Excluding padding, border, and margin
The innerWidth () method returns the width of the element.
The innerHeigh () method returns the height of the element.
Includes padding
The outerWidth () method returns the width of the element.
The outerHeight () method returns the height of an element.
Border with padding
The outerWidth (true) method returns the width of the element.
The outerHeight (true) method returns the height of the element.
Includes padding, border, and outer distance
JQuery provides a variety of DOM traversal methods. The biggest type is tree traversal (tree-traversal)
Traverse the DOM tree up
These jQuery methods are useful for traversing the DOM tree up:
Parent () returns the direct parent element of the selected element. This method only traverses the DOM tree at the upper level.
Returns the direct parent element of each <span> element.
$ (Document). ready (function (){
$ ("Span"). parent ();
})
Parents () returns all the ancestor elements of the selected element along the way until the root element of the document Returns all origins of all <span> elements.
$ (Document). ready (function (){
$ ("Span"). parents ();
})
Returns all the ancestors of all <span> elements, and is a <ul> element.
$ (Document). ready (function (){
$ ("Span"). parents ("ul ");
})
ParentsUntil () returns all ancestor elements between two given elements.
Returns all ancestor elements between <span> and <div>.
$ (Document). ready (function (){
$ ("Span"). parentsUntil ("div ");
})
Traverse the DOM tree down to find the child of the element
Children () returns all direct child elements of the selected element.
Returns all the <p> elements of the class named "1", and they are the direct sub-elements of <div>.
$ (Document). ready (function (){
$ ("Div"). children ("p.1 ");
})
Find () returns the generation of the selected element, all the way down until the last descendant.
Returns all <span> elements belonging to <div> descendants.
$ (Document). ready (function (){
$ ("Div"). find ("span ");
})
Returns all <div> descendants.
$ (Document). read (function (){
$ ("Div"). find ("*");
})
Horizontal traversal in the DOM tree
Siblings () returns all siblings of the selected element.
Returns all <p> elements belonging to the $ (Document). ready (function (){
$ ("H2"). siblings ("p ");
})
Next () returns the next cycle cell element of the selected element.
$ (Document). ready (function (){
 
$ ("H2"). next ();


});
NextAll () returns all siblings of the selected element.
Returns all the following compatriot elements of $ (Document). ready (function (){
$ ("H2"). nextAll ();
})
NextUntil () returns all the following compatriot elements between two given parameters.
All compatriot elements between $ (Document). ready (function (){
$ ("H2"). nextUtil ("h6 ");
})
Prev ()
PrevAll ()
PrevUntil ()
The preceding three elements are returned.
JQuery traversal-Filtering
Abbreviation: Search Element range
First () returns the first element of the selected element.
Select the first <div> element <p>
$ (Document). ready (function (){
$ ("Div p"). first ();
})
Last () returns the last element of the selected element.
Select the last <div> element <p>
$ (Document). ready (function (){
$ ("Div p"). last ();
})
Eq () returns the element with the specified index number in the selected element. The index number starts from 0.
Select the second <p> element (index number 1)
$ (Document). ready (function (){
$ ("P"). eq (1 );
})
Filter () allows you to specify a standard. elements that do not match this standard will be deleted from the set, and matched elements will be returned.
Returns all <p> elements with the class name "intro ".
$ (Document). ready (function (){
$ ("P"). filter ("intro ");
})
Not () returns all elements that do not match the standard. The not () method is opposite to the filter () method.
Returns all <p> elements without the class name "intro ".
$ (Document). ready (function (){
$ ("P"). not ("intro ");
})
JQuery-AJAX Introduction
AJAX is the art of data exchange with the server. It updates some webpages without reloading all pages.
AJAX = Asynchronous javaScript and XML
Without reloading the entire webpage, AJAX loads data through the background and displays the data on the webpage.
Load () loads data from the server and puts the returned data into the selected Element
$ (Selector). load (URL, data, callback );
Required URL
Set of query string key/value pairs that can be sent together with requests
The optional callback parameter is the name of the function executed after the load () method is complete.
$ ("# Div1"). load ("demo_test.txt"); load the file content to the specified <div> element
$ ("# Div1"). load ("demo_test.txt # p1"); load the content of the element id = "p1" in the file to the specified <div> element.
The callback function can set different parameters:
1 responseTxt-contains the successful call results
2 statusTxt-including the call status
3 xhr-contains XMLHttpRequest object
$. Get () requests data from the server through http get requests
$. Get (URL, callback );
Required URL
Name of the function executed after the callback request is successful.
The following method is used to retrieve data from a file on the service crying face:
$ ("Button"). click (function (){
$. Get ("demo_test.asp", function (data, status ){
Alert ("Data:" + data + "\ nStatus:" + status );
})
})
$. Post () method requests data from the server through http post request
$. Post (URL, data, callback );
$ ("Button"). click (function (){
$. Post ("demo_test_post.asp ",
{
Name: "Donald Duck ",
City: "Duckburg"
},
Function (data, status ){
Alert ("Data:" + data + "\ nStatus:" + status );
});
});
The noConflict () method releases the $ identifier control so that other scripts can use it.
$. NoConflict ();
JQuery (document). ready (function (){
JQuery ("button"). click (function (){
JQuery ("p"). text ("jQuery is still running! ");
});
});
Var jq = $. noConflict ();
Jq (document). ready (function (){
Jq ("button"). click (function (){
Jq ("p"). text
})
})