Introduction:
JQuery is a fast and concise JavaScript library created by John Resig in 2006 with a nice motto: write less, do more.
JQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development.
Before start studying JQuery, you should have a basic knowledge of:
- HTML
- CSS
- JavaScript
JQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by JQuery.
-
DOM manipulation:
The JQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browse open source selector engine called Sizzle.
-
Event Handling:
The JQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
-
AJAX Support:
The JQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
-
Animations:
The JQuery comes with plenty of built-in animation effects which you can use in your websites.
-
Lightweight:
The JQuery is very lightweight library-about 19KB in size (minified and gzipped).
-
Cross Browser Support:
The JQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
-
Latest Technology:
The JQuery supports CSS3 selectors and basic XPath syntax.
The JQuery library is stored as a single JavaScript file, containing all the JQuery methods.
It can be added to a web page with the following mark-up:
<head>
<script type=”text/javascript” src=”jquery.js”> </script>
</head>
Please note that the <script> tag should be inside the pages <head> section.Basic Example of JQuery:
The following example demonstrates the JQuery hide() method, hiding all <p> elements in an HTML document.
Example:
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
</script>
</head>
<body>
<h2>this is heading</h2>
<p>this is paragraph</p>
<p>this is another paragraph</p>
<button>click me</button>
</body>
</html>
Downloading JQuery
Two versions of JQuery are available for downloading: one minified and one uncompressed(for debugging or reading). Both version can be downloaded from JQuery.com. Alternatives to downloading, if you don’t want to store the JQuery library on your own computer, you can use the hosted JQuery library from Google or Microsoft.
Google:
<head>
<script type=”type/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”>
</script>
</head>
Microsoft:
<head>
<script type=”text/javascript” src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js”></script>
</head>
Syntax of JQuery:
With jquery you select (query) HTML elements and perform “actions” on them.
The jQuery syntax is tailor made for selecting HTML elements and performs some action on the elements.
Basic syntax is: $(selector).action()
- A dollar sign to define jQuery
- A (selector) to “query(or find)” HTML elements
- A jQuery action() to be performed on the elements
Example:
$(this).hide() – hides current element$(“p”).hide() – hides all paragraphs
$(“p.test”).hide() – hides all paragraphs with class=”test”
$(“#test”).hide() – hides the element with id=”test”
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button>click me</button>
</body>
</html>
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide();
});
});
</script>
</head>
<body>
<h2>this is a heading</h2>
<p>this is a paragraph</p>
<p id=”test”>this is another paragraph</p>
<button> click me</button>
</body>
</html>
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript ”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
</script>
</head>
<body>
<h2>this is a heading</h2>
<p>this is a paragraph</p>
<p>this is another paragraph</p>
<button> click me</button>
</body>
</html>
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript ”>
$(document).ready(function(){
$(“button”).click(function(){
$(“.test”).hide();
});
});
</script>
</head>
<body>
<h2 class=”test”>this is a heading</h2>
<p class=”test”>this is a paragraph</p>
<p>this is another paragraph</p>
<button> click me</button>
</body>
</html>
Note: jQuery uses a combination of XML path language(Xpath) and CSS selector syntax.
Comments/Suggestions are invited. Happy coding......!
Comments Post a Comment