In this article, I will show how to start quick development with jQuery. How to simplify your code
with jQuery. What tools are required to write, execute and run simple jQuery “hello world”.
How to call simple script function using jQuery. How to work with jQuery Selectors. How to traverse
and manipulate DOM object using jQuery. How to handle events using jQuery.
What is jQuery?
jQuery is a JavaScript library and comes with easy-to-use API that works across a multitude of browsers.
By using jQuery powerful selectors we can almost select any thing in HTML page.
It simplifies the web development by providing many easy ways for DOM traversing, event handling
(form, browser, mouse ,keyboard), animations effects and Ajax.
How to write simple “hello world example” :
Simple steps to be followed,
1) Download jQuery Library :
You can download latest version of jQuery library from jQuery (jquery-1.11.3.min.js).
2) Write simple html page :
Write simple html page called JQueryQuickStart.html and include the downloaded jQuery library
as normal JavaScript file.
JQueryQuickStart.html
<html>
<head>
<title> JQuery Quick Start Hello world example </title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#messageid").html("This is Hello World by JQuery ready function!!!");
});
</script>
In HTML Page JQuery Quick Start Hello world example !!!!
<div id="messageid"/>
</body>
</html>
The project structure is as given,
3) Run and verify the out put :
Click on JQueryQuickStart.html file,
In code, we have used $(document).ready(function() to display simple message from jQuery function.
Simple Question is here, when this function content is loaded and who will call this function and execute.
When DOM elements are ready or fully loaded, then execute the jQuery script to dynamic create a message
and append it to html tag id messageid.
Download complete source code Here,
JQueryQuickStart
How to create and call simple script function using jQuery?
Like java script functions, we can create jQuery functions.
We should put ‘$’ symbol before the function to identify as a jQuery function.
Some questions comes to mind, before writing programs using jQuery.
What does the ‘$’ sign in jQuery stand for? or
what is $ in jquery?
Simple answer is, By default, jQuery uses “$” as a shortcut for “jQuery”
So, using $(“#id”) or jQuery(“#id”) is the same.
Syntax to define a function is,
$(function <>() { // function body });
How to call this function, in jQuery we can mentioned when this function should be called.
Suppose, we want to set the content dynamically using jQuery.
$("#msgid2").html("This is from JQuery function
");
JQueryFunctionsExample.html
<html>
<head>
<title>jQuery script function example</title>
</head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#msgid1").html("This is from JQuery document.ready function<BR>");
});
$(function userfun(){
$("#msgid2").html("This is from JQuery function<BR>");
});
</script>
JQuery HTML main page
<div id="msgid1"></div>
<div id="msgid2"></div>
</body>
</html>
Out Put :
JQuery HTML main page This is from JQuery document.ready function This is from JQuery function
What is jQuery selectors?
jQuery selectors helps to select anything in web page.
Suppose to select all elements in web page, we can use $(“*”) and to select particular
elements $(“#test”).
<html> <head> <title>JQuery Sectors example </title> <script src="jquery-1.11.3.min.js"></script> </head> <body> <div>div tag </div> <span>span tag</span> <p>p tag <button>button tag</button></p> <script> var elementCount = $( "*" ).length; $( "body" ).prepend( "<h3> No of Elements Found is : " + elementCount + "</h3>" ); </script> </body> </html>
Out Put :
Download JQueryFunctionsExample.html code here,
JQueryFunctionsExample
I am just extending the same example to select specific elements,
<html> <head> <title>JQuery Sectors example </title> <script src="jquery-1.11.3.min.js"></script> </head> <body> <div id="test"> <div>div tag </div> <span>span tag</span> <p>p tag <button>button tag</button></p> </div> <script> var elementCount = $( "*" ).length; var selectedElementCount = $( "#test" ).find( "*" ).length; $( "body" ).prepend( "<h3> No of Elements Found is : " + elementCount + "</BR> No of Elements Found in specific selection is :" + selectedElementCount + "</h3>"); </script> </body> </html>
Out Put :
Download SectorsExample.html code here,
SectorsExample
How to traverse and manipulate DOM object using jQuery?
Through jQuery traversal and manipulation methods, it is easy to finding the element or elements,
and then working with those elements to achieve a desired result. This would be rather painful to achieve
using native DOM manipulation.
Before getting into the details, there are a few important vocabulary terms that you should know.
child, parent, descendant, ancestor and siblings.
div (parent)p
h2
h3
p
- li (child1) & (direct parent of span tag) span
- li (child2)
- li (child3)
1) child – The children() returns child elements of the selected element.
To get all the child’s of element unordered list <ul>, li (child1), li (child2) and li (child3).
$("ul").children()
The result of would be all list items in unordered list.
2) parent – The parent() returns child elements of the selected element.
$("p").parent()
The result would be div element.
3) descendant – The find() method returns descendant elements of the selected element,
all the way down to the last descendant.
$("ul").find()
The result of would be all list items in unordered list.
4) ancestor – Three useful jQuery methods for traversing up the DOM tree are,
parent(), parents() and parentsUntil().
$("span").parentsUntil("ul")
The result of would be only first list item in unordered list.
5) siblings – The siblings() method returns all sibling elements of the selected element.
If we want to select all the siblings of <h2>, it is simple one line code in jQuery.
$("h2").siblings()
The result of would be all 4 elements <p>, <h3> and <p> (the actual <h2> is excluded).
<html>
<head>
<title>JQuery Traversing And Manipulating Example </title>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<h1>Child, Parent, Descendant, Ancestor and Sibling Selectors example</h1>
<body>
<div>div (parent)
<p>p</p>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<ul>
<li>li (child1) & (direct parent of span tag)
<span>span</span>
</li>
<li>li (child2) </li>
<li>li (child3) </li>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$("ul").children().css({"color": "red", "border": "2px solid red"}); //child
//$("p").parent().css({"color": "red", "border": "2px solid red"}); //parent
//$("ul").find().css({"color": "red", "border": "2px solid red"}); //descendant
//$("span").parentsUntil("ul").css({"color": "red", "border": "2px solid red"}); //ancestor
//$("h2").siblings().css({"color": "red", "border": "2px solid red"}); //siblings
});
</script>
</body>
</html>
what is manipulate DOM object using jQuery?
jQuery provides simple methods to allow you to alter the DOM of your page using a syntax.
Manipulation methods return the jQuery object on which they were called, which means we can
chain them or combine them with other jQuery methods.
Normal operations are like altering elements, adding and removing classes, changing style, changing
form values,changing attributes, getting the information from the elements, re-arranging or placing
or coping or removing elements in document.
How to handle events using jQuery?
jQuery makes it easy and straightforward to set up event-driven responses on page elements.
How to define or setup the Event?
jQuery comes with simple methods like .click(), .bind(), .unbind(), blur() ..etc to define events.
Who will trigger this events?
These events are often triggered by the end user’s interaction with the page, such as when text
is entered into a form element or the mouse pointer is moved.
In some cases, such as the page load and unload events, the browser itself will trigger the event.
eventsExample.html
<html>
<head>
<title>JQuery Events Example </title>
<script src="jquery-1.11.3.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("h1").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<h1>Click on this paragraph.</h1>
</body>
</body>
</html>
*** Venkat – Happy leaning ****