{"id":565,"date":"2014-02-19T18:08:50","date_gmt":"2014-02-19T18:08:50","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=565"},"modified":"2014-02-19T18:08:50","modified_gmt":"2014-02-19T18:08:50","slug":"how-jquery-works","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/how-jquery-works\/","title":{"rendered":"How jQuery Works"},"content":{"rendered":"

jQuery: The Basics<\/h3>\n

This is a basic tutorial, designed to help you get started using jQuery. If you don’t have a test page setup yet, start by creating the following HTML page:<\/p>\n

\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n<\/td>\n
\n
\n
<!doctype html><\/code><\/div>\n<\/div>\n
\n
<html><\/code><\/div>\n<\/div>\n
\n
<head><\/code><\/div>\n<\/div>\n
\n
<meta charset=\"utf-8\" \/><\/code><\/div>\n<\/div>\n
\n
<title>Demo<\/title><\/code><\/div>\n<\/div>\n
\n
<\/head><\/code><\/div>\n<\/div>\n
\n
<body><\/code><\/div>\n<\/div>\n
\n
<a href=\"http:\/\/jquery.com\/\">jQuery<\/a><\/code><\/div>\n<\/div>\n
\n
<script src=\"jquery.js\"><\/script><\/code><\/div>\n<\/div>\n
\n
<script><\/code><\/div>\n<\/div>\n
<\/div>\n
\n
\/\/ Your code goes here.<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
<\/script><\/code><\/div>\n<\/div>\n
\n
<\/body><\/code><\/div>\n<\/div>\n
\n
<\/html><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

The\u00a0src<\/code>\u00a0attribute in the\u00a0<script><\/code>\u00a0element must point to a copy of jQuery. Download a copy of jQuery from the\u00a0Downloading jQuery<\/a>\u00a0page and store the\u00a0jquery.js<\/code>\u00a0file in the same directory as your HTML file.<\/p>\n

link<\/a>Launching Code on Document Ready<\/h3>\n

To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an\u00a0onload<\/code>\u00a0function:<\/p>\n

\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
window.onload = function() {<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
alert( \"welcome\" );<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Unfortunately, the code doesn’t run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the\u00a0ready event<\/a>:<\/p>\n

\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
$( document ).ready(function() {<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
\/\/ Your code here.<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
});<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

For example, inside the\u00a0ready<\/code>\u00a0event, you can add a click handler to the link:<\/p>\n

\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n<\/td>\n
\n
\n
$( document ).ready(function() {<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
$( \"a\" ).click(function( event ) {<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
alert( \"Thanks for visiting!\" );<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
});<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
});<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Save your HTML file and reload the test page in your browser. Clicking the link should now first display an alert pop-up, then continue with the default behavior of navigating to\u00a0http:\/\/jquery.com<\/a>.<\/p>\n

For\u00a0click<\/code>\u00a0and most other\u00a0events<\/a>, you can prevent the default behavior by calling\u00a0event.preventDefault()<\/code>\u00a0in the event handler:<\/p>\n

\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n<\/td>\n
\n
\n
$( document ).ready(function() {<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
$( \"a\" ).click(function( event ) {<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
alert( \"As you can see, the link no longer took you to jquery.com\" );<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
event.preventDefault();<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
});<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
});<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

link<\/a>Complete Example<\/h3>\n

The following example illustrates the click handling code discussed above, embedded directly in the HTML\u00a0<body><\/code>. Note that in practice, it is usually better to place your code in a separate JS file and load it on the page with a\u00a0<script><\/code>\u00a0element’s\u00a0src<\/code>attribute.<\/p>\n

\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n<\/td>\n
\n
\n
<!doctype html><\/code><\/div>\n<\/div>\n
\n
<html><\/code><\/div>\n<\/div>\n
\n
<head><\/code><\/div>\n<\/div>\n
\n
<meta charset=\"utf-8\" \/><\/code><\/div>\n<\/div>\n
\n
<title>Demo<\/title><\/code><\/div>\n<\/div>\n
\n
<\/head><\/code><\/div>\n<\/div>\n
\n
<body><\/code><\/div>\n<\/div>\n
\n
<a href=\"http:\/\/jquery.com\/\">jQuery<\/a><\/code><\/div>\n<\/div>\n
\n
<script src=\"jquery.js\"><\/script><\/code><\/div>\n<\/div>\n
\n
<script><\/code><\/div>\n<\/div>\n
<\/div>\n
\n
$( document ).ready(function() {<\/code><\/div>\n<\/div>\n
\n
$( \"a\" ).click(function( event ) {<\/code><\/div>\n<\/div>\n
\n
alert( \"The link will no longer take you to jquery.com\" );<\/code><\/div>\n<\/div>\n
\n
event.preventDefault();<\/code><\/div>\n<\/div>\n
\n
});<\/code><\/div>\n<\/div>\n
\n
});<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
<\/script><\/code><\/div>\n<\/div>\n
\n
<\/body><\/code><\/div>\n<\/div>\n
\n
<\/html><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

link<\/a>Adding and Removing an HTML Class<\/h3>\n

Important:<\/strong>\u00a0You must place the remaining jQuery examples inside the\u00a0ready<\/code>\u00a0event so that your code executes when the document is ready to be worked on.<\/em><\/p>\n

Another common task is adding or removing a class.<\/p>\n

First, add some style information into the\u00a0<head><\/code>\u00a0of the document, like this:<\/p>\n

\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
<style><\/code><\/div>\n<\/div>\n
\n
a.test {<\/code><\/div>\n<\/div>\n
\n
font-weight: bold;<\/code><\/div>\n<\/div>\n
\n
}<\/code><\/div>\n<\/div>\n
\n
<\/style><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Next, add the\u00a0.addClass()<\/a>\u00a0call to the script:<\/p>\n

\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
$( \"a\" ).addClass( \"test\" );<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

All\u00a0<a><\/code>\u00a0elements are now bold.<\/p>\n

To remove an existing class, use\u00a0.removeClass()<\/a>:<\/p>\n

\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
$( \"a\" ).removeClass( \"test\" );<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

link<\/a>Special Effects<\/h3>\n

jQuery also provides some handy\u00a0effects<\/a>\u00a0to help you make your web sites stand out. For example, if you create a click handler of:<\/p>\n

\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n<\/td>\n
\n
\n
$( \"a\" ).click(function( event ) {<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
event.preventDefault();<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
$( this ).hide( \"slow\" );<\/code><\/div>\n<\/div>\n
<\/div>\n
\n
});<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Then the link slowly disappears when clicked.<\/p>\n

link<\/a>Callbacks and Functions<\/h2>\n

Unlike many other programming languages, JavaScript enables you to freely pass functions around to be executed at a later time. A\u00a0callback<\/em>\u00a0is a function that is passed as an argument to another function and is executed after its parent function has completed. Callbacks are special because they patiently wait to execute until their parent finishes. Meanwhile, the browser can be executing other functions or doing all sorts of other work.<\/p>\n

To use callbacks, it is important to know how to pass them into their parent function.<\/p>\n

link<\/a>Callback\u00a0without<\/em>\u00a0Arguments<\/h3>\n

If a callback has no arguments, you can pass it in like this:<\/p>\n

\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
$.get( \"myhtmlpage.html\", myCallBack );<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

When\u00a0$.get()<\/a>\u00a0finishes getting the page\u00a0myhtmlpage.html<\/code>, it executes the\u00a0myCallBack()<\/code>\u00a0function.<\/p>\n