This article is a brief about some of things I tried out while playing around with JQuery when I started learning it.
JQuery is nothing but Javascript. As it is said here: http://jquery.com/ "write less,do more". Rather than using multiple lines of javascript code, JQuery reduces the code size to a great extent and makes accessing and operating on the HTML elements easy. It also provides a whole lot of functions to make the user interface appealing and adding animations and effects with ease.
The JQuery file is stored with the extension ".js", similar to the javascript file.
Getting started:
Before writing JQuery code in your HTML file, the reference to the JQuery library must be added. So, open a simple notepad file, write <html> <head> tags etc to make a basic HTML page you can test your code on.
There are two ways to refer JQuery library
- Refer to online library :
The JQuery library is referenced from the script tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
The "src" attribute specifies the URL of the jquery library
- Download the library, store it over the disk and add a reference :
You can also download the JQuery library file from http://jquery.com/ and place it in your project folder.
<script type="text/javascript" src="FILE_NAME.js"></script>
This is what the basic HTML markup would look like when we have online reference of JQuery set in our code.
<html>
<head>
<title>jQuery demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<html>
Now we are ready to write JQuery !!
Operating on HTML Elements from JQuery:
Following is the HTML markup I am going to use throughout the article to access and modify the HTML elements
<html>
<head>
<title>jQuery demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p id="paragraph1">This is first paragraph</p>
<p id="paragraph2">This is second paragraph</p>
</body>
</html>
Which shows two paragraphs
- Accessing "paragraph1" from JQuery:
$("#paragraph1")
$("#paragraph1") this part of the code selects the HTML element which has ID 'paragraph1'.
- Operating on the "paragraph1" element
$("#paragraph1").OPERATION();
where OPERATION is the function name. eg : $("#paragraph1").hide(); will hide the paragraph1 HTML element
Complete code:
<html>
<head>
<title>jQuery demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#paragraph1").hide(); // JQuery code snippet to hide 'paragraph1'
});
</script>
</head>
<body>
<p id="paragraph1">This is first paragraph</p>
<p id="paragraph2">This is second paragraph</p>
</body>
</html>
Here,
$(document).ready(function(){
// Write the javascript/jquery code to be executed on load
});
and
$("#paragraph1").hide(); : Hides the paragraph1 when the page loads
There are a lot of permutations and combinations to access the HTML elements from JQuery which would be discussed in the next article.
Till then. Happy Coding.