This is a basic guide to help you get started with jquery. Jquery provides you with solutions to common problems. If you have not created your test page, we recommend that you create an HTML page containing the following content:
ProgramCode Copy codeThe Code is as follows: <HTML>
<Head>
<SCRIPT type = "text/JavaScript"
Src = "link/to/jquery. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
// Your code goes here
</SCRIPT>
</Head>
<Body>
<A href = "http://jquery.com/"> jquery </a>
</Body>
</Html>
Modify the src attribute of the script tag to point to your jquery. js. For example, if your jquery. js file is in the same directory as your HTML file, you can do this:
Program code
<SCRIPT type = "text/JavaScript" src = "jquery. js"> </SCRIPT>
Run the code when the document is loaded.
First, most JavaScript programmers use similar code:
Program code
Window. onload = function (){...}.
To access HTML documents, you must first load the Document Object Model (DOM ). When the window. onload function is executed, it indicates that everything has been loaded, including images and banners. You need to know that the download speed of a large image is relatively slow. Therefore, you must wait until the download of the large image is complete before you can see the window. it takes a long wait time for the code executed by onload (), which is not what we want.
Jquery provides a "ready" event. You can use the following code snippet:
Program code
$ (Document). Ready (function (){
// Your code
});
Document (documentw. Doc ument), $ (document). Ready means that when the document object is ready.
The above code indicates checking the Document Object until it can be operated. the onload () function is much faster, because the code can be executed as long as the file object is loaded, without waiting for the image download on the page to complete.) --- this is what we want. Therefore, paste the above code snippet to the script area on your test page!
Trigger when the mouse clicks
First, some actions are triggered when you try to click a hyperlink. Add the following code to the ready function:
Program code
$ ("A"). Click (function (){
Alert ("thank you for coming! ");
});
Save the HTML file and refresh the page. Click a hyperlink. A warning dialog box is displayed.
Add CSS class
Another thing is that a common task is to add or remove the CSS class of elements, for example:
Program code
$ ("A"). addclass ("test ");
$ ("A"). removeclass ("test ");
If you have already added the following content to the page header:
Program code
<Style> A {text-weight: bolder} </style>
After you call the addclass function, the font of all hyperlinks becomes bold.
Special effects
The effects module provides a series of useful effects.
Add the following code:
Program code
$ ("A"). Click (function (){
$ (This). Hide ("slow ");
Return false;
});
Now, as long as you click the hyperlink, the hyperlink will gradually disappear. "Return false" indicates that the default behavior is retained, so the page will not jump.
Callback
A callback is a function that can be passed to another function as a return value after the parent function is executed. The special feature of the callback function is that the function after the "parent function" can be executed before the callback function is executed.
I often forget the correct syntax to know how to correctly use callback.
A callback without parameters should be written as follows:
Program code
Pai.get('myhtmlpage.html ', mycallback );
Note that the second parameter is a simple function name (it is neither a character nor a bracket)
How do I write callback with parameters?
incorrect syntax. The following Code cannot be written (or executed):
program code
pai.get('myhtmlpage.html ', mycallback (param1, param2 ));
correct syntax:
program code
pai.get('myhtmlpage.html ', function () {
mycallback (param1, param2);
});
in this way, a function with parameters is called back.
postscript
here, maybe you should check the other documents. It includes more guidance-it is comprehensive and covers all aspects of jquery. If you have any questions, please feel free to email me.
Of course, you can also look at a variety of demos using jquery.
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
