This page is a basic tutorial on JQuery. To use JQuery, you should know the basics of JavaScript. For example, how to select a element, how to change its CSS property. 〔☛ JavaScript Basics Tutorial by Examples〕
jQuery (jq) is the most popular JavaScript library. 〔☛ Web Tech Stats 2010〕 It makes coding JavaScript very convenient, and you don't have to worry about different browser compatibility, because jQuery does that for you. jquery's home page is at jquery.com.
Add the following to your pages:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Because jq is very popular, so Google and Microsoft both host it. You don't need to place the jq lib on your site. Using hosted code is actually better because users probably already have it cached in browser.
Add the following to your HTML pages:
<script src="http://example.com/my_jq_code.js"></script>
The 〔my_jq_code.js〕 is your JavaScript code.
Copy the following template to play with jQuery.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jQuery test pad</title> </head> <body> <p>test page</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://example.com/my_jq_code.js"></script> </body> </html>
$(document).ready( function(){ // your own js code here // alert("hi"); } );
The above code will execute your code when the browser finished loading the HTML.
Usually, you want your code to run only after the HTML has loaded, because otherwise, your JavaScript code may start to manipulate tags but they don't exist yet.
The $(document).ready() is similar in purpose to the normal JavaScript code window.onload = ….
When using “window.onload”, the browser will start to execute you code only after the page is completed loaded, including all images or iframe. This is usually not desirable, because if a image stuck, your code won't start to run until the stuck image got timed out.
〔☛ JavaScript Execution Order; HTML5 Asynchronous JavaScript〕
Alternatively, you can place your JavaScript code at the end of your HTML, right before </body>.
This adds a “click” event handler to all link tags “a”.
$("a").click( function(event){alert("hi");} );
This means, when user clicks on a link, it'll do what you want, plus the default behavior of visiting to the link.
The following prevents the default behavior of a link.
$("a").click(function(event){ alert("hi"); event.preventDefault(); });
$("a").addClass("myClassName"); $("a").removeClass("myClassName");
If you have a link like this in your HTML:
go <a href="http://example.com/">here</a>
Now, the above JavaScript code will make it like this:
go <a class="myClassName" href="http://example.com/">here</a>
For all “<a>” tags.
This is useful because you can use CSS to define a particular style, and now you can change all elements to that style when something happens.
The following makes links disappear when clicked.
$("a").click(function(myEvent){ myEvent.preventDefault(); $(this).hide("slow"); });