All About jQuery..

What is jQuery?
Its a'lightweight' javascript library. With jQuery we, 'write less, and do more'.  jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. jQuery run exactly the same in all major browsers, including Internet Explorer 6.


The jQuery library contains the following features:
# HTML/DOM manipulation
# CSS manipulation
# HTML event methods
# Effects and animations
# AJAX
# Utilities

Download jquery-1.12.2.min.js from jQuery.com, add the .js in your page. e.g


< head>
< script src="jquery-1.12.2.min.js">< /script>
< /head>
NOTE: type="text/javascript" is not added inside the < script>

jQuery CDN : If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery.

Google CDN:
< head>
< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">< /script>
< /head>

Microsoft CDN:
< head>
< script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js">< /script>
< /head>

jQuery Syntax
Basic syntax is: $(selector).action()
$ sign to define/access jQuery
(selector) to "query (or find)" HTML elements
jQuery action() to be performed on the element(s)

e.g:
$(this).hide() : hides the current element.
$("p").hide() : hides all elements.
$(".test").hide() : hides all elements with class="test".
$("#test").hide() : hides the element with id="test".

Document Ready Event
All jQuery methods are written inside a document ready event to prevent any jQuery code from running before the document is finished loading (is ready). Else, the method might fail, e.g:

•     Trying to hide an element that is not created yet
•     Trying to get the size of an image that is not loaded yet

$(document).ready(function(){
   // jQuery methods go here...
}); 

or use the shorter version

$(function(){
   // jQuery methods go here...
}); 

jQuery Selectors allow you to select and manipulate HTML element(s).

HTML elements are "find" (or select) based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector selects elements based on the element name.

You can select all elements on a page like this:
$("p")

e.g: This will hide paragraphs when button is click

< html >
< head>
< script language="javascript" src="javascript/jquery-1.12.4.min.js">< /script>
< script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
< /script>
< /head>
< body>
< h2>Hide The Para..< /h2>
< p>First paragraph.< /p>
< p>Second paragraph.< /p>
< button>Click me to hide paragraphs< /button>
< /body>
< /html >

The #id Selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$("#test")

e.g. This will hide 'Second Para' with 'id=test' when button is click

< html>
< head>
< script language="javascript" src="javascript/jquery-1.12.4.min.js">< /script>
< script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
< /script>
< /head>
< body>
< h2>Hide The Para..< /h2>
< p>First paragraph.< /p>
< p id="test">Second paragraph.< /p>
< button>Click me to hide paragraphs< /button>
< /body>
< /html>

The .class Selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class:
$(".testclass")

e.g:This will hide the para with 'class=testclass' when button is click
< html>
< head>
< script language="javascript" src="javascript/jquery-1.12.4.min.js">< /script>
< script>
$(document).ready(function(){
    $("button").click(function(){
        $(".testclass").hide();
    });
});
< /script>
< /head>
< body>
< h2>Hide The Para..< /h2>
< p>First paragraph.< /p>
< p class="testclass">Second paragraph.< /p>
< button>Click me to hide paragraphs< /button>
< / body>
< /html>

A few examples of jQuery Selectors

• $("*")     Selects all elements    
• $(this)     Selects the current HTML element    
• $("p.intro")     Selects all < p> elements with class="intro"    
• $("p:first")     Selects the first < p> element    
• $("ul li:first")     Selects the first < li> element of the first < ul>    
• $("ul li:first-child")     Selects the first
• element of every < ul>    
• $("[href]")     Selects all elements with an href attribute    
• $("a[target='_blank']")     Selects all < a> elements with a target attribute value equal to "_blank"    
• $("a[target!='_blank']")     Selects all < a> elements with a target attribute value NOT equal to "_blank"    
• $(":button")     Selects all < button> elements and < input> elements of type="button"    
• $("tr:even")     Selects all even < tr> elements    
• $("tr:odd")     Selects all odd < tr> elements 

JQuery Interview Questions

Whether jQuery HTML work for both HTML and XML documents?
jQuery HTML only works for HTML documents not for XML Documents.

Where jQuery code is getting executed?
jQuery code is getting executed on a client browser.

Which command will give a version of jQuery?
The command $.ui.version returns jQuery UI version.

What is the difference between size and length of jQuery?
Size and length both returns the number of element in an object. But length is faster than the size because length is a property and size is a method.

Can we add more than one ‘document.ready’ function in a page?
Yes, we can add more than one document.ready function in a page. But, body.onload can be added once in a page.

What is the difference between onload() and document.ready()?
In a page, we can have only one onload function but we can have more than one document.ready function. Document.ready function is called when DOM is loaded but onload function is called when DOM and images are loaded on the page.

What is the use of jQuery load method?
jQuery load method is a powerful AJAX method which is used to load the data from a server and assign the data into the element without loading the page.

Which sign is used as a shortcut for jQuery?
Dollar ($) sign is used as a shortcut for jQuery.

Whether our own specific characters are used in place of $ in jQuery?
Yes, We can use our own variable in place of $ by using the method called no Conflict () method.
var sample = $.noConflict()

Is jQuery is a client or server scripting?
jQuery is a client scripting.

Is jQuery is a replacement of JavaScript?
No.

Why jQuery is better than JavaScript?
jQuery is a library used for developing Ajax application and it helps to write the code clean and concise. It also handles events, animation and Ajax support applications.

What are the advantages of jQuery?

• Just a JavaScript enhancement
• Coding is simple, clear, reusable
• Removal of writing more complex conditions and loops

What is the use of jQuery each function?
It is used to loop through each and every element of the target jQuery object. It is also useful for multi element DOM, looping arrays and object properties.

Which is the fastest selector in jQuery?
ID and Element are the fastest selectors in jQuery.

What is the slowest selector in jQuery?
Class selectors are the slowest selectors in jQuery.

-K Himaanshu Shuklaa..