JQuery is open source lightweight Javascript Library
which makes easy interaction between HTML and JavaScript.
JQuery is not a language. JavaScript is a Language.
JQuery is built over JavaScript and acts like a extendable javascript framework
to simplifies HTML document manipulation, event handling, animating, and Ajax
interactions for rapid web development.
Purpose of jQuery is to make it easy to use JavaScript on your website. JQuery also
simplifies a lot of the complicated things from JavaScript, like AJAX calls and
DOM manipulation.
If we know
HTML CSS and JavaScript then jQuery learning will not be a big problem
jQuery
takes a lot of common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that you can call with a single line of
code.
The jQuery library contains the following options (means
what JQuery can do):
- HTML and DOM operation or management
- CSS operation or management
- HTML event methods
- Animations and Effects
- AJAX
JQuery a
single JavaScript file and can be used by adding JQuery library in HTML file. (The
<script> tag should be inside the <head> section):
<head>
<script src="jquery-3.1.1.min.js"></script>
</head>
<script src="jquery-3.1.1.min.js"></script>
</head>
No ned to add type="text/javascript" inside the
<script> tags as JavaScript is the
default scripting language in HTML5 and in all modern browsers.
Common
Syntax for JQuery is
$(<Where >).<When >(<What >);
Explanation : I want to show a message when
ever document is ready or loaded completely.
Where(Selectors) : On Document.
When (Action): Document is in ready state or
loaded completely.
What(Function) : Show an alert message.
JQuery selectors are used to "find" (or select)
HTML elements based on their name, id, classes, types, attributes, values of
attributes and much more.
JQuery syntax for above requirement is
$(document).ready(alert("Hi this is for
for Dotnestspider lovers"));
Basic syntax is: $(selector).action()
- A $ sign to define/access jQuery
- A (selector) to "query (or find)" HTML
elements
- A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p>
elements.
$(".test").hide() - hides all
elements with class="test".
Complete Skeleton Example
<html>
<head>
<meta charset="utf-8" />
<title>Dotnetspider tutorial</title>
</head>
<body>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(alert("Hi"));
</script>
</body>
</html>
One special thing
in JQuery
$(document).ready(function(){
// jQuery methods are to be here
// jQuery methods are to be here
});
Why this is
required?
This
is to prevent any jQuery code from running before the document is finished
loading (is ready).
It
is nice to wait for the document to be completly loaded and ready before
working with it. This also allows you to have your JavaScript code before the
body of your document, in the head section.
When it fails fail if methods are run before
the document is fully loaded
- Trying to hide an element that is not generated yet
- Trying to get the size of an image that is not loaded
yet
The shorter
method for above document.Ready is
$(function(){
// jQuery methods are to be here
// jQuery methods are to be here
});
