Q1.
What is jQuery?
- Easy to use and learn.
- Easily expandable.
- Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+,
Opera 9.0+)
- Easy to use for DOM manipulation and traversal.
- Large pool of built in methods.
- AJAX Capabilities.
- Methods for changing or applying CSS, creating
animations.
- Event detection and handling.
- Tons of plug-ins for all kind of needs.
Q3.
How JavaScript and jQuery are different?
- We can have more than one document.ready() function in a page where we can have only one body onload function.
- document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the
page that includes DOM, images and all associated resources of the page.
Q15.
What is the difference between .js and .min.js?
- Production
- Deployment
The production version is quite useful at development time
as jQuery is open source and if you want to change something then you can make
those changes in production version. But the deployment version is minified
version or compressed version so it is impossible to make changes in it.
Because it is compressed, so its size is very less than the production version
which affects the page load time.
- 1. Google.
- 2. Microsoft
- 3. jQuery.
Advantage of using CDN.
- It reduces the load from your server.
- It saves bandwidth. jQuery framework will load faster
from these CDN.
- The most important benefit is it will be cached, if the
user has visited any site which is using jQuery framework from any of
these CDN
Q19.
How to load jQuery from CDN?
Code to load jQuery Framework from Google CDN
Below given jQuery code checks whether jQuery is loaded from Google CDN or not,
if not then it references the jQuery.js file from your folder.
- Name: Selects all elements which match with the given
element Name.
- #ID: Selects a single element which matches with the
given ID
- .Class: Selects all elements which match with the given
Class.
- Universal (*): Selects all elements available in a DOM.
- Multiple Elements E, F, G: Selects the combined results
of all the specified selectors E, F or G.
- Attribute Selector: Select elements based on its
attribute value.
Q22.
How do you select element by ID in jQuery?
$('div') : This selects all the div element present on the page.
get() return a DOM element. The method retrieve the DOM elements
matched by the jQuery object. But as it is a DOM element and it is not a
jQuery-wrapped object. So jQuery functions can't be used.
Syntax is:
- styles: Specifies one or more CSS properties/values to
animate.
- duration: Optional. Specifies the speed of the
animation.
- easing: Optional. Specifies the speed of the element in
different points of the animation. Default value is "swing".
- callback: Optional. A function to be executed after the
animation completes.
Simple use of animate function is,
.empty(): This method removes all the child element of the matched
element where remove() method removes set of matched elements from DOM.
.remove(): Use .remove() when you want to remove the element itself, as well as
everything inside it. In addition to the elements themselves, all bound events
and jQuery data associated with the elements are removed.
.detach(): This method is the same as .remove(), except
that .detach() keeps all jQuery data associated with the removed elements.
This method is useful when removed elements are to be reinserted into the DOM
at a later time.
.bind():
This is the easiest and quick method to bind events. But the issue with bind()
is that it doesn't work for elements added dynamically that matches the same
selector. bind() only attach events to the current elements not future
element. Above that it also has performance issues when dealing with a large
selection.
.live():
This method overcomes the disadvantage of bind(). It works for dynamically added
elements or future elements. Because of its poor performance on large pages,
this method is deprecated as of jQuery 1.7 and you should stop using it.
Chaining is not properly supported using this method.
.delegate():
The .delegate() method behaves in a similar fashion to the .live() method, but
instead of attaching the selector/event information to the document, you can
choose where it is anchored and it also supports chaining.
.on(): Since live was deprecated with 1.7, so new method was introduced
named ".on()". This method provides all the goodness of previous 3
methods and it brings uniformity for attaching event handlers.
So the correct syntax is,
Q44.
How to create clone of any object using jQuery?
Attributes carry additional information about an HTML element and come in
name="value" pairs. Where Property is a representation of an
attribute in the HTML DOM tree. once the browser parse your HTML code
,corresponding DOM node will be created which is an object thus having
properties.
attr() gives you the value of element as it was defines in the
html on page load. It is always recommended to use prop()
to get values of elements which is modified via javascript/jquery , as it gives
you the original value of an element's current state.
event.stopPropagation(): Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event. For example,
if there is a link with a click method attached inside of a DIV or FORM that
also has a click method attached, it will prevent the DIV or FORM click method
from firing.
Collapse | Copy Code
Below code shows how to include multiple version of jQuery.
<script
type='text/javascript' src='js/jquery_1.9.1.min.js'></script>
<script
type='text/javascript'>
<script
type='text/javascript' src='js/jquery_1.7.2.min.js'></script>
- You have forgot to include the reference of jQuery
library and trying to access jQuery.
- You have include the reference of the jQuery file, but
it is after your jQuery code.
- The order of the scripts is not correct. For example,
if you are using any jQuery plugin and you have placed the reference of
the plugin js before the jQuery library then you will face this error.
Q60.
How to write browser specific code using jQuery?
- load() : Load a piece of html into a container DOM
- $.getJSON(): Load JSON with GET method.
- $.getScript(): Load a JavaScript file.
- $.get(): Use to make a GET call and play extensively with the
response.
- $.post(): Use to make a POST call and don't want to load the
response to some container DOM.
- $.ajax(): Use this to do something on XHR failures, or to
specify ajax options (e.g. cache: true) on the fly.
Q63.
Is there any advantage of using $.ajax() for ajax call against $.get() or
$.post()?
Where jQuery.ajax() is jQuery's low-level AJAX implementation. $.get
and $.post are higher-level abstractions that are often easier to
understand and use, but don't offer as much functionality (such as error
callbacks).
Using jQuery .when() method which provides a way to execute callback functions
based on one or more objects, usually Deferred objects that represent
asynchronous events.
So to use old/deprecated features, all you need to do is to provide reference
of jQuery Migrate Plugin.
"protocol-less" URL is the best way to reference third party content
that’s available via both HTTP and HTTPS. When a URL’s protocol is omitted, the
browser uses the underlying document’s protocol instead.
Code to load jQuery Framework from Google CDN
Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.
$('div') : This selects all the div element present on the page.
get() return a DOM element. The method retrieve the DOM elements matched by the jQuery object. But as it is a DOM element and it is not a jQuery-wrapped object. So jQuery functions can't be used.
Syntax is:
.empty(): This method removes all the child element of the matched element where remove() method removes set of matched elements from DOM.
.remove(): Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.
.detach(): This method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
.bind(): This is the easiest and quick method to bind events. But the issue with bind() is that it doesn't work for elements added dynamically that matches the same selector. bind() only attach events to the current elements not future element. Above that it also has performance issues when dealing with a large selection.
.live(): This method overcomes the disadvantage of bind(). It works for dynamically added elements or future elements. Because of its poor performance on large pages, this method is deprecated as of jQuery 1.7 and you should stop using it. Chaining is not properly supported using this method.
.delegate(): The .delegate() method behaves in a similar fashion to the .live() method, but instead of attaching the selector/event information to the document, you can choose where it is anchored and it also supports chaining.
.on(): Since live was deprecated with 1.7, so new method was introduced named ".on()". This method provides all the goodness of previous 3 methods and it brings uniformity for attaching event handlers.
So the correct syntax is,
Attributes carry additional information about an HTML element and come in name="value" pairs. Where Property is a representation of an attribute in the HTML DOM tree. once the browser parse your HTML code ,corresponding DOM node will be created which is an object thus having properties.
attr() gives you the value of element as it was defines in the html on page load. It is always recommended to use prop() to get values of elements which is modified via javascript/jquery , as it gives you the original value of an element's current state.
event.stopPropagation(): Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. For example, if there is a link with a click method attached inside of a DIV or FORM that also has a click method attached, it will prevent the DIV or FORM click method from firing.
Collapse | Copy CodeBelow code shows how to include multiple version of jQuery.
Where jQuery.ajax() is jQuery's low-level AJAX implementation. $.get and $.post are higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks).
Using jQuery .when() method which provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
So to use old/deprecated features, all you need to do is to provide reference of jQuery Migrate Plugin.
"protocol-less" URL is the best way to reference third party content that’s available via both HTTP and HTTPS. When a URL’s protocol is omitted, the browser uses the underlying document’s protocol instead.
