JQuery is easy to learn JavaScript
Description:Â JQuery Introduction. Best Dot Net Online Course.
- JQuery is easy to learn JavaScript library which makes JavaScript programming very easy.
- 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.
- JQuery also simplifies complicated tasks like AJAX calls and DOM manipulation.
- jQuery will run exactly the same and produce same output in all major browsers
- jQuery is free and very easy to include in your projects: just download its latest version from the jQuery website, or use an online Content Delivery Network
- JQuery is continuously upgraded, maintained and documented by a dedicated community of great developers. This ensures high quality and support on the internet.
Following are the major features supported by jQuery
- Â HTML element selections
- Â HTML element / DOM manipulation
- Â CSS manipulation
- Â HTML event functions
- Â JavaScript Effects and animations
- Â HTML DOM traversal and modification
- AJAX
- Utilities
Install and Use jQuery Library
Two versions of jQuery are available for downloading:
- Minified: ideal for using in a production environment.
- Uncompressed (for debugging or reading).
Download the latest version of http://jquery.com/download/
jQuery Versions:
- jQuery 1.11.1
- jQuery 2.1.1:
Note: jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.
Referencing jQuery in HTML Page:
           <script src=”jquery-<version>.js”/>
CDN (content delivery network):
|
1 2 3 4 5 |
<script src="//code.jquery.com/jquery-<version>.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/<version>/jquery.min.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-<version>.min.js"></script> |
Un-Obstructive JavaScript:
<button type=”button” onclick=”doSomething()” >Click Me</button>
In the above example structure and behavior are mixed.
Now consider the same example written using Un-obstructive JavaScript strategy:
Script code can go in head.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script > $(function(){ $('#btnClickMe').click(function() { €¦â€¦. }); }); </script> |
Structure code now does not contain any behavior
<button type=”button” id=”btnClickMe” >Click Me</button>
First jQuery Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <script src="jquery-2.1.1.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("p").hide(); }); }); </script> </head> <body> <div> <h2>This is a My First Example</h2> <div>This is a span section.</div> <p>This is a paragraph</p> <button>Hide Paragraph</button> </div> </body> </html> |
jQuery Syntax:
The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
jQuery uses a combination of XPath and CSS selector syntax.
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 element(s)
Examples:
- $(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”
  The document ready function:
$(document).ready(function () {
// jQuery code goes here…
});
This is to prevent any jQuery code from running before the document is finished loading (is ready).
- Trying to hide an element that doesn’t exist
- Trying to get the size of an image that is not loaded
Avoid $() conflict:
“$” is the alias to jQuery functions but if “$” conflicts with other frameworks
var foo = jQuery.noConflict();
// now foo() is the jQuery main function
foo(“div”).hide();
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script > var foo=jQuery.noConflict(); foo(document).ready(function () { foo("#DemoDiv").click(function () { alert("hi"); }); }); </script> |
Almost every function returns jQuery, which provides a fluent programming interface and chainability:
$(“div”).show() .addClass(“main”) .html(“Hello jQuery”);
