What is it all about?
jQuery is a tiny JavaScript library with cross-browser API. Which aims to facilitate client side scripting of HTML. includes user interface system which designed to make responsive web sites and apps.
Key Features
* Simplify the possibilities for navigating within a document, selecting DOM elements particularly effective manner, creating animations, event handling and Ajax-based applications. * Allows creating of plug-ins over the JavaScript library which allows developers to create an abstraction for interactions, animations low level, effects and widgets levels. * JQuery's modular approach enables the creation of dynamic Web pages and powerful web applications easily.
Resources
Resource Type |
Link |
|---|---|
| https://learn.jquery.com/about-jquery/how-jquery-works/ |
Pricing
Yearly
Monthly
Lifetime
Free
Freemium
Trial With Card
Trial No Card
By Quote
Description
Free - See Site
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
Product Analysis
JavaScript
Javascript frameworks and libraries
jQuery is a free, open-source, cross-platform, fast and lightweight JavaScript library designed to simplify the client-side scripting of HTML and to make JavaScript easier to use on websites. It was originally released in January 2006 at BarCamp NYC by John Resig. As of April 2016, jQuery version 2.2 is the latest version. jQuery has a “Write less, do more” philosophy.
This philosophy can be further broken down into three concepts:
- Finding some elements (via CSS selectors) and doing something with them (via jQuery methods)
- Chaining multiple jQuery methods on a set of elements
- Using the jQuery wrapper and implicit iteration
JavaScript requires many lines of a code to accomplish a lot of common tasks, but jQuery makes it simpler and easier by just wrapping the JavaScript code into a method that can be called in just a single line of code. jQuery simplifies a lot of complicated things in JavaScript such as AJAX calls and DOM manipulation.
The jQuery library includes the following features:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
Please take note and bear in mind that jQuery does not replace JavaScript. Even though it offers some syntactical shortcuts, the code you write when you use jQuery is still JavaScript codes.
What it is good for?
There are lots of other JavaScript frameworks out there, but why use jQuery? It is because jQuery is the most popular, and also the most extendable.
jQuery is helpful in building and creating powerful dynamic web pages and web applications. The syntax of jQuery is designed to make it easier to navigate a document, create animations, select DOM elements, handle events, and develop Ajax applications. jQuery also provide capabilities for developers to create plug-ins on top of JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, themeable widget.
Here are some advantages of using jQuery:
- Separation of JavaScript and HTML markup:
- No need to add HTML event attributes to call JavaScript functions.
- jQuery library already provide a method for adding event handlers to the DOM using JavaScript
- Promotes Brevity and clarity:
- This can be manifested in features of jQuery like chainable functions and shorthand function names.
- No more cross-browser incompatibilities:
- jQuery handles cross-browser inconsistencies and provides a consistent interface that works across different browsers.
- Extensible:
- New events, elements, and methods can be easily added and then reused as a plugin.
Some examples and code snippets
To install jQuery locally:
- Go to the https://jquery.com/download/ to download the latest version available.
- Now put downloaded jquery-2.1.3.min.js file in a directory of your website, e.g. /jquery.
Include jquery library in the HTML file. It would like the code below;
<html>
<head>
<title>jQuery Locally Installed</title>
<script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>You could also include the jQuery library in your HTML code using the CDN based version.
Using jQuery library from Google CDN, the HTML file would like the example below
<html>
<head>
<title>jQuery CDN Library</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
In order for an event to work on the web page, we should call it inside the $(document).ready() function. As soon as the DOM is loaded, everything inside the $(document).ready() function will load, before the content of the page is loaded.
Example:
$(document).ready(function() {
// do stuff when DOM is ready
});Example of calling jQuery library function, using HTML script tags
<html>
<head>
<title>Call jQuery Function using HTML scripts</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div id = "mydiv">
Click this to show a popup.
</div>
</body>
</html>Let us take a brief look at how jQuery uses DOM traversal and manipulation, event handling, and Ajax.
DOM Traversal and Manipulation Example:
$("button.btn-continue").html("Read more...")When the <button> element with the class ‘btn-continue' is clicked, it will change its HTML to 'Read more...'
Event Handling Example:
var hiddenBox = $("#banner-message");
$("#button-container button").on("click", function(event) {
hiddenBox.show();
});When button with #button-container id is clicked, it will show the #banner-message element that is hidden with the display:none in its CSS.
Ajax Example:
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 6000
},
success: function(result) {
$("#weather-temp").html("<strong>" + result + "</strong> degrees");
}
});Calling a local script on the server /api/getWeather with the query parameter zipcode=6000 and replace the element #weather-temp's html with the returned text.
CONCLUSION
It is not a requirement to be a JavaScript expert in order to use jQuery. In fact, jQuery simplifies a lot of complicated things from JavaScript. So it is not a problem to use jQuery, with just a little knowledge about JavaScript. In addition, jQuery seems to be more popular than other JavaScript frameworks, which is shown by the fact that you can find jQuery plugins for almost every task out there. The wide range of plugins and the beautiful syntax is what makes jQuery such a great framework.
Top DiscoverSDK Experts
Meir Rabinovich
Real time and embedded developer
Hardware and RT | General Libraries and 5 more
View Profile
Interested in becoming a DiscoverSDK Expert? Learn more
X
Compare Products
Select up to three two products to compare by clicking on the compare icon () of each product.
{{compareToolModel.Error}}Now comparing:
{{product.ProductName | createSubstring:25}} X
{{CommentsModel.TotalCount}} Comments
Your Comment