JAVASCRIPT

Introducing the jQuery JavaScript Library

Welcome to the first part of a seven-part series on the jQuery JavaScript library. In this article I will provide you with a quick overview of how to use the library, including its helpful $() function and the ready() method. The jQuery library allows you to build unobtrusive client-side applications with only minor effort, and its syntax is simple to grasp.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

August 12, 2009

TABLE OF CONTENTS:

In the course of the previous section, you learned how to use the "jQuery" library to display a trivial confirm box on the browser. Assuming that you already grasped the logic that stands behind performing this basic process, I'm going to teach you how to use a "mousedown" event to get exactly the same result.

Please take a look at the following example, which demonstrates how easy it is to intercept this type of event with the "jQuery" package. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with mousedown event</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

</style>

$(document).ready(function(){

$("a").mousedown(function(){

alert('Redirecting to Devshed.com now!');

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with mousedown event</h1>

<a href="http://www.devshed.com/">Visit Devshed.com now!</a>

</body>

</html>

As you can see, the above hands-on example uses the two familiar $() and "ready()" methods that you learned in the previous section, this time for displaying on the browser an alert box each time a user clicks on a sample link. Of course, if you try out this script on your own machine, it's possible that you perceive some significant differences between this particular example and the one that intercepts mouse clicks.

However, both of them demonstrate how to take advantage of the capabilities provided by "jQuery" for handing several mouse events.

Please feel free to use all of the code samples included in this tutorial to acquire a more solid knowledge of the "jQuery" package and start developing your own JavaScript applications. It's going to be a fun experience, trust me.

Final thoughts

In this first chapter of the series, I provided you with a quick overview of how using the "jQuery" JavaScript library, including the use of its helpful $() function and the "ready()" method as well. As you saw earlier, the library allows you to build unobtrusive client-side applications with minor effort, and its syntax is simple to grasp.

In the next article, I'm going to show you how to use the functionality of "jQuery" to handle other mouse events in a simple way. Thus, now that you've been warned about the topics that will be covered in the upcoming tutorial, you won't want to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.