jquery guide/getting started_jquery

Guide/Basics

This is a basic guide designed to help you get started with jquery. jquery gives you solutions to common problems. If you haven't created your test page yet, I recommend you create an HTML page with the following content: Program code

Copy code The code is as follows: src="link/to/jquery. js"> // Your code goes here jQuery Modify the src attribute of the script tag to point to your jquery.js. For example, if your jQuery.js is in the same directory as your HTML file, you can do this: Program code Run code when document loads First, most JavaScript programmers will use code similar to: Program code window.onload = function(){ ... } .

To access elements of an HTML document, the Document Object Model (DOM) must be loaded first. When the window.onload function is executed, it means that everything has been loaded, including images and banners, etc. You should know that the download speed of larger images will be slower, so users must wait for the large images to be downloaded before they can see the code effect of window.onload() execution, which takes a long time to wait, which is not what we want.

For this, jquery provides a "ready" event, you can use the following code snippet: Program code $(document).ready(function(){ // Your code }); $(document) means to get the document object (similar to window.document), $(document).ready means to get the document object when it is ready. The meaning of the above code is to check the document object until it is allowed to be operated (Translator's Note: This is much faster than the window.onload() function, because as long as the document object is loaded, the code can be executed , without waiting for the image download on the page to be completed) --- this is what we want. So paste the above code snippet into the script area of your test page!

Triggering when the mouse clicks First, we try to trigger certain behaviors when the mouse clicks on the 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 and a warning dialog box will pop up on the page.

Add CSS Class Another thing is, a common task: add or remove the css class of an element, for example: Program code $("a").addClass( "test"); $("a").removeClass("test");

If you have added it at the head of the page: Program code a{text-weight:bolder} Then when you call the addClass function, the fonts of all hyperlinks will become bold.

Special Effects Effects Module provides a series of useful special effects.

Add the following code: Program code $("a").click(function(){ $(this).hide("slow"); return false; }); Now, as long as you click on the hyperlink, the hyperlink will slowly disappear. "return false" means to retain the default behavior, so the page will not jump.

Callback

The so-called callback is a function that can be passed as a return value to another function after the execution of the parent function is completed. What's special about the callback function is that the function that appears after the "parent function" can be executed before the callback function is executed. Another important point is to know how to use callbacks correctly. I often forget the correct syntax.

A callback without parameters should be written like this: Program code $.get('myhtmlpage.html', myCallBack); Note that the second parameter is a simple function Name (it is not a character and does not have parentheses)

So how to write a callback with parameters? Wrong way of writing, the following will not work (or will not be executed): Program code $.get('myhtmlpage.html', myCallBack(param1,param2)); Correct How to write: Program code $.get('myhtmlpage.html', function(){ myCallBack(param1,param2); }); In this way, a callback is implemented Functions with parameters. Postscript At this point, maybe you should check out the rest of the documents . It includes more guides - it is comprehensive and covers all aspects of jquery.If you have any questions, please feel free to send me an email. Of course, you can also take a look at various DEMO using jQuery.