What is jQuery?
Like other libraries out there, jQuery is a JavaScript library that enables you to control events, animating HTML elements, and AJAX interactions on your web page. It is free, open source, and works across all browser platforms. The library is packed with loads of functions with that lets you perform incredible things. The jQuery syntax makes your JavaScript code easy to read, with fewer lines, and enables developers to create plug-ins such as image sliders, accordion, etc. jQuery has become the basis of creating dynamic web applications.
Demonstrations
Visit the links below for a showcase of what jQuery can do:
Paul Noble - Interactive Designer
World of merixstudio
Appear.dk
Siebennull - Great parallax site
Angry Birds Space - Great parallax site
Time to get your hands dirty
Right, Now that you have an idea and saw of what jQuery can do, it's time you get acquainted with this great library. To get started you have to first download the latest version of jQuery here. Open up your favorite HTML IDE (e.g Dreamweaver, PHP Designer, HTML-Kit, etc) and follow the following steps:
Step 1. Create a new .html file and load jQuery scripts
Once you've downloaded jQuery, create new folder where you will save your work. Copy the jQuery script into your folder (Your jQuery script can be labelled jquery-1.8.2.min.js or a later version) , create an html file and save it as index.html. It should look somewhat like this:
myFolder |_ jquery-1.8.2.min.js |_ index.html
Now within index.html file, load the jQuery script like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="/jquery-1.8.2.min.js"></script> <title>jQuery Demo</title> </head> <body> </body> </html>
Step 2. Make sure the page is ready for jQuery execution
Now that you have included the library to your page you are now able to use jQuery to manipulate your document. Now include the highlighted lines in your document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
<title>jQuery Demo</title>
</head>
<body>
</body>
</html>
Whenever you want to execute jQuery code, you always need to first check whether the document has 'fully-loaded' because only then does jQuery execute. So the highlighted lines above do exactly that. All your code will be placed inside the function() block. So to test this we will just alert something. Try the following code out:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("This is a jQuery demonstration");
});
</script>
<title>jQuery Demo</title>
</head>
<body>
</body>
</html> Step 3. Manipulating HTML elements
Okay so we have successfully loaded jQuery and tested it out. Now lets get to the fun part and start playing around with HTML elements such as a <div> , <p> , or any HTML element you can think of. In the following demonstrations we will just retrieve attribute values from these elements. Try the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var divClass = $("#parentDiv").attr("class");
var divTitle = $("#parentDiv").attr("title");
var divAlign = $("#parentDiv").attr("align");
var divId = $("#parentDiv").attr("id");
alert( "The class of div is: " + divClass );
alert( "The title of the div is: " + divTitle );
alert( "The alignment of the div is: " + divAlign );
alert( "The div id is: " + divId );
});
</script>
<title>jQuery Demo</title>
</head>
<body>
<div id="parentDiv" class="mainDiv" title="This is a title" align="left"></div>
</body>
</html>
Take a look at line 11 for instance. Here we use jQuery to grab the div element with the id 'parentDiv' using $("#parentDiv") which equivalent to document.getElementById("parentDiv"). And we use the attr() function to get attribute values of the div.
at line 11 we get the div's class value and stored it in a variable (Which is 'mainDiv')
at line 12 we get the div's title value and stored it in a variable (Which is 'This is a title')
.....and so on
We can retrieve anything we want from an HTML element. Here is another example where we retrieve and alert text from a paragraph tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var paragraph = $("#lorem").text();
alert( paragraph );
});
</script>
<title>jQuery Demo</title>
</head>
<body>
<p id="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum</p>
</body>
</html>
You don't necessarily have to give an element an id if you want to grab it with jQuery. You can also use the tag itself (without the < and > surrounding it). Take a look at this example. We are going to alert the same paragraph text but this time using the paragraph tag inside the $():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var paragraph = $("p").text();
alert( paragraph );
});
</script>
<title>jQuery Demo</title>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum</p>
</body>
</html>
Conclusion
In this tutorial you have learned what jQuery is and what it can do. If you have followed the tutorial very closely I am hoping you have got the basics right. In the next tutorial we are going to be playing around with animations and events Happy Coding!!!!
Comments