Today, I found that many of the Code in Greasemonkey is written using jQuery, so I want to spend time learning jQuery. Okay, well, there is a tutorial on w3cschool, this is much easier to learn, but you still need to record it to avoid forgetting it later! In addition, there is a problem with the blog garden server today, but the good news is-I found a new editor with many ready-made controls, which is really good and has a lot of expressions, this shows my status perfectly!
Reference: http://www.cnblogs.com/aimyfly/archive/2012/03/23/2413125.html
Reference: jQuery tutorial
Reference: jQuery selector Reference Manual
Reference: jQuery event Reference Manual
Reference: jQuery HTML Operation Reference Manual
Reference: jQuery CSS function reference manual
Reference: jQuery AJAX Reference Manual
The jQuery library is located in a JavaScript file, which contains all jQuery functions. You can add jQuery to the webpage using the following tag:
<Head>Note that the <script> label should be in the
<Head>The jQuery syntax is compiled for the selection of HTML elements. You can perform some operations on the elements. The basic syntax is:$ (Selector). action ()
You may have noticed that all jQuery functions in our instance are in a document ready function:
$ (Document). ready (function (){This is 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. The following are two examples:
In the previous section, we showed some examples about how to select HTML elements. The key point is to learn how the jQuery selector accurately selects the elements you want to apply. 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. In html dom terminology, selector allows you to operate a DOM element group or a single DOM node.
<I> jQuery element Selector$("p").css("background-color","red");| Syntax | Description |
|---|---|
| $ (This) | Current HTML Element |
| $ ("P ") | All <p> Elements |
| $ ("P. intro ") | All <p> elements of class = "intro" |
| $ (". Intro ") | All class = "intro" Elements |
| $ ("# Intro ") | Id = the first element of "intro" |
| $ ("Ul li: first ") | The first <li> element of each <ul> |
| $ ("Your href00000000'.jpg ']") | All href attributes with attribute values ending with ". jpg" |
| $ ("Div # intro. head ") | All the elements of class = "head" in the <div> element of id = "intro" |
For a complete reference manual, visit our jQuery selector reference manual.
5. jQuery events| Event Function | 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. |
For a complete reference manual, visit our jQuery event reference manual.
6. jQuery HTML operationsThe contents (selector).html (content) html () function changes the content of the matched HTML element (innerHTML ). $ ("P" ).html ("W3School"); $ (selector). append (content) append () function adds content to the inside of the matching HTML element. $ (Selector). prepend (content) prepend () function preset content to the matching HTML element. $ ("P"). append ("W3School"); $ (selector). after (content) after () function inserts HTML content after all matching elements. $ (Selector). before (content) before () function inserts HTML content before all matching elements. $ ("P"). after ("W3School .");
| Function | Description |
|---|---|
| Contents (selector).html (content) | Change the (internal) HTML of the selected Element |
| $ (Selector). append (content) | Append content to the (internal) HTML of the selected Element |
| $ (Selector). prepend (content) | Prepend content to the (internal) HTML of the selected Element |
| $ (Selector). after (content) | Add HTML after the selected Element |
| $ (Selector). before (content) | Add HTML before the selected Element |
For a complete reference manual, visit our jQuery HTML reference manual.
7. jQuery CSS Functions| CSS attributes | Description |
|---|---|
| ((Selector).css (name, value) | Set the style attribute value for the Matching Element |
| Detail (selector).css ({properties }) | Set multiple style attributes for matching elements |
| ((Selector).css (name) | Obtain the style attribute value of the First Matching Element. |
| $ (Selector). height (value) | Set the height of the Matching Element |
| $ (Selector). width (value) | Set the width of the matching element. |
For a complete reference manual, visit our jQuery CSS function reference manual.
8. jQuery AJAX Functions| Request | Description |
|---|---|
| $ (Selector). load (url, data, callback) | Load remote data to the selected Element |
| $. Ajax (options) | Load remote data to the XMLHttpRequest object |
| $. Get (url, data, callback, type) | Use http get to load Remote Data |
| $. Post (url, data, callback, type) | Use http post to load Remote Data |
| $. GetJSON (url, data, callback) | Use http get to load remote JSON data |
| $. GetScript (url, callback) | Load and execute remote JavaScript files |
For more information about jQuery AJAX functions, visit our jQuery AJAX reference manual.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
