Description
jQuery is a powerful, easiest, popular and an open source JavaScript API released in 2006 and it is a JavaScript based library that makes use of JavaScript much easier for web development based applications. Following are some features of jQuery.
Lightweight library means
- Light Weight Library Files
- HTML DOM Manipulation
- CSS Manipulation
- Event Handling
- Effects And Animations
“write less code and do more“, with this object of jQuery more feature using jQuery library can be improved.
HTML elements of the document can be selected in different ways and are easy access to the elements to be enhanced.
HTML elements can be applied style dynamically by manipulating their CSS properties or class names.
jQuery supports to inbuilt events. Own event methods can be created to work on HTML elements and elements respond to different types events like click, mouse-over, mouse-out, change.
The jQuery supports to built-in animation effects by which animation can be applied on the HTML DOM elements like fading, sliding.
Example
jQuery Syntax is to select specific elements from HTML document and perform some action on selected elements with manipulation in Dot sign 
. .
[html]$(selector).action()[/html]
Where $ sign is used to define/access a jQuery library. jQuery library is actually declared in a variable called jQuery. selector define the Query or select a specific element from HTML document. action() define the action() to be performed on selected elements of HTML document.
The $(“p”).hide() : hide() function of jQuery hides all current elements.
[html]
<html>
<head>
<title>jQuery Syntax</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<p>This is a first paragraph</p>
<span>This is a span element</span>
</body>
</html>[/html]
[html]
$(document).ready(function()
{
$("p").hide();
}); [/html]
In this below example : $ sign defines the jQuery library, p element is the selector and it will select all p elements of HTML document, hide() function is action to hide all currently visible p elements of HTML document.
Output: Now compile the code result will be as follows.
Descrpiton
The 
jQuery.getJSON( url, [data], [callback] ) method is used to load JSON information from the server by using a GET HTTP request. The GET HTTP request method will return XMLHttpRequest object. Following is the syntax to use the GET HTTP request method.
[xml]$.getJSON( url, [data], [callback] )[/xml]
Where, The data parameter will have key, value pairs and the callback is the another parameter to represent the function to be executed. Save the following code as result.json .
[html]
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}
[/html]
Following is the HTML file to call the JSON file.
[html]
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id = "stage" style = "background-color:#cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
[/html]
The ready event happens when the DOM has been stacked. Since this event happens after the document is prepared, it is a decent place to have all other jQuery functions and events. The ready() strategy determines what happens when a ready event happens.
The click event happens when a component is clicked and click() strategy triggers the click occasion, appends a capacity to run when a click event happens. The append() technique embeds determined substance toward the end of the chose components.
The append() technique embeds determined substance toward the end of the chose components.
Output: Now compile the code result will be as follows.
Key Points
- The XMLHttpRequest object is used to modify the content without reloading the web page.
- jQuery is compatible in all browsers unlike JavaScript.
- jQuery makes the work of developers very simple in creating a simple web based applications and concise code.