Hello World with jQuery
Writing a “hello world” script using jQuery is fairly simple. This article is just a very brief introduction on writing scripts using jQuery. This article also assumes basic knowledge of JavaScript and DOM (Document Object Model). We will not be covering any practical examples here. This would be more so of a copy-paste and try it yourself guide.
Setting up jQuery on your end
We would require a fresh copy of the jQuery library, which can be downloaded from here. After downloading the jQuery library, extract the contents into a folder. Within this folder we will be creating our html and jQuery example. Setting up jQuery is this simple!
Hello World using jQuery
Using a text or html editor of your choice, create a new html document with the following code. Make sure you save the document in the same folder where you extracted the contents of the jQuery library downloaded, as stated above.
1:<html>
2:<head>
3:<script type="text/javascript" src="jquery.js"></script>
4:<script type="text/javascript">
<!-- //our javascript will come in here -->
5:</script>
6:<title>Our jQuery Hello World</title>
7:</head>
8:<body>
9: <!- - All our html here -->
10:</body>
11:</html>
If we open the above html page in a web browser. The web browser will only load the library and will not be doing anything further.
Before we move ahead, just a reminder to you guys. What ever we are going to do with jQuery, would only involve reading or manipulating the DOM. It would be sound logic, to do whatever we want to with jQuery after the DOM has loaded into the browser completely.
Here is how the above code is modified to our needs.
1:<html>
2:<head>
3:<script type="text/javascript" src="jquery.js"></script>
4:<script type="text/javascript">
5:$(document).ready(function() {
6: // do stuff when DOM is ready; in our case hello world
7: $("a").click(function() {
8: alert("Hello world!");
9: });
10:});
11:</script>
12:<title>Our jQuery Hello World</title>
13:</head>
14:<body>
15:<a href=”#”>Click Here</a>
16:</body>
17:</html>
Provided the jQuery library (jQuery.js) and the html file you created are in the same directory; the above code would throw an alert when ever any anchor tags are clicked on.
Explanation of Hello World jQuery
Line 3: Include the jQuery Library, making sure the src path is correct.
Line 5-10: We first register a ready event for the document. Once the DOM is ready all anchor tags within the document when clicked will show an alert saying “hello world”. $(“a”) is jQuery selector tool or method, which selects all “a” or all anchor elements. ‘$’ is an abbreviation or a substitute for the jQuery “class”. $() would construct a new object of the jQuery class. The call to the click() function again using the jQuery object would bind all click events of all anchor tags and would execute the provided lines of code. Simple, isn’t it.
Line15: Since this line is an <a> tag, all clicks would result in a hello world alert.
This is just one facet of jQuery. If we were trying to do the same using plain javascript, we would have manually specify the alert code in all anchor tags within the html document. With, maybe, 5 lines of code, we did that using jQuery. Makes Sense?
In our further articles we will be exploring further into jQuery. Do leave comments.
jQuery hello world Resource
jQuery Library@ http://docs.jquery.com/Downloading_jQuery
jQuery starterkit@ http://docs.jquery.com/images/c/c7/Jquery-starterkit.zip
No Responses to “Hello World with jQuery”
Leave a Reply
Subscribe TO US
You can subscribe by email to receive newsletter updates:
Subscribe through a RSS feed reader
