What is JQuery ?
Jquery is a framework built for Javascript from Javascript libraries.
Javascript common task/codes are combined into jquery methods can be called whenever needed.
Jquery is used to simplify complicated codes from javascript like AJAX calls and DOM manipulation.
Jquery provides many built-in functions using which you can accomplish various tasks easily and quickly.
What should be known before learning jquery?
Before you start learning jQuery, we should have some basic knowledge in :
1. HTML
2. CSS
3. JavaScript
Why should we learn jquery?
- JQuery is very fast and extensible.
2. It facilitates the user to write codes in minimum possible lines unlike Javascript.
3. JQuery is highly improves the performance of an application.
4. It allows the developer to develop browser compatible web applications.
5. JQuery uses mostly new features of new browsers.
6. JQuery is the most popular framework used all over the world.
7. One big reason for why we should learn JQuery is, some of the big companies like Microsoft,Google,IBM and Netflix are using JQuery.
Jquery tutorial for beginners !!!
Click to Learn More about – online learn jquery
What is the difference between jquery and javascript?
Javascript :
- JS is a weakly typed dynamic programming language
2. JS is mainly used for interface interactions and handling document content.
3. JS is an interpreted language
4. JS requires more lines of codes which may take time to write.
5. JS multi-browser compatibility should be handled by developers by writing their own code.
6. JS makes the developers unhappy by throwing many common browser-related errors.
7. JS requires nothing to be included anything in the header section to work in browsers.
8. JS requires more lines of code to achieve simple tasks.
9. JS is faster in accessing DOM elements.
JQuery :
- JQuery is fast and concise JavaScript Library
2. JQuery framework is used mainly for event handling, animating, and Ajax interactions.
3. JQuery always uses resources given by JavaScript to make things easier.
4. JQuery allows user to write less lines of codes because its already written in JQuery library files.
5. JQuery handles multi-browser compatibility which reduces the work of developers during deployment.
6. JQuery handles browser compatibility issues so developers dont have to worry.
7. JQuery library URL needs to be included in the header of the page.
8. JQuery requires only fewer lines of code.
9. JQuery allows user to do complex operations in development with fewer lines of codes.
How to install jquery ?
Before installing jquery we have to download the jquery files.
This can be done in two ways.
1. Download locally
2. Content Delivery Network (CDN)
1. Download Locally :
The jquery files can be downloaded locally using the link
Once after downloading the file in the local server we can access the file directly from the path.
<html>
<head>
<title>Our Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
Our code begins...
</body>
</html>
Note :
Since Javascript is considered as the default scripting language
We don’t have to mention the type attribute in script tag like type=”text/javascript” in HTML5.
For HTML4 we have to mention the type attribute inside the script tag.
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
Thus JQuery libraries are accessed from the locally downloaded file.
2. Content Delivery Network (CDN)
CDN version means the jQuery runs in some other universal accessible server, and we have to make reference of it in our code.
Big companies like Google and Microsoft have hosted this JQuery files.
Google CDN URL :
<html>
<head>
<title>Our Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
Our code begins...
</body>
</html>
Microsoft CDN URL:
<html>
<head>
<title>Our Title</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
Our code begins...
</body>
</html>
What is the syntax of jquery?
The basic syntax of JQuery is comprised of two things.
1. Selecting the HTML elements.
2. Performing some actions to the selected HTML elements.
Syntax :
$(selector).action();
Explanation :
$ – sign is for defining / accessing jquery.
(selector) – defines the query element to find the HTML elements.
action() – defines the action to be performed on that HTML elements.
Example :
$(this).show() – shows the current element.
$(this).hide() – hides the current element.
$(“p”).show() – shows all <p> elements.
$(“p”).hide() – hides all <p> elements.
$(“.myclass”).show() – shows all elements with class=”myclass”.
$(“.myclass”).hide() – hides all elements with class=”myclass”.
$(“#myid”).show() – shows the element with id=”myid”.
$(“#myid”).hide() – hides the element with id=”myid”.
What is document ready event?
This event is to prevent the JQuery code from running before the document is loaded fully (is ready).
document.ready(function(){});
So it is good practice to wait until the document to be fully loaded.
So most implementation of the jquery code will be inside the document ready function.
$(document).ready(function(){
// our jquery methods go here...
});
What happens if the query code is executed before document ready event?
It possibly throws error in some cases like.
1. If we try to hide an element that is not created yet
2. If we try to get the size of an image that is not loaded yet
Advantages of JQuery
1. There is a wide range of plug-ins available in JQuery library.
2. It allows developers to create their own plug-ins on top of the JavaScript library.
3. There is a big development community for jquery in the world allows us to expand our knowledge and clarify the doubts.
4. Jquery documentation is excellent and easy to learn.
5. It makes more easy to use other javascript libraries.
6. It allows Ajax interface where actions can be performed on pages without requiring the entire page to be reloaded.
Disadvantages of JQuery
1. JQuery functionality is limited which leads us to use raw javascript maybe inevitable in some cases.
2. The JQuery file is required to run JQuery commands, it should be present either in the local machine or the external link should be active always.