Q1. What is jQuery?
Q2. Why do we use
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?
Q4. Is jQuery
replacement of Java Script?
Q5. Is jQuery a
library for client scripting or server scripting?
Q6. Is jQuery a W3C
standard?
Q7. What is the
basic need to start with jQuery?
Q8. Which is the
starting point of code execution in jQuery?
Q9. What does
dollar sign ($) means in jQuery?
Ans: Dollar Sign is nothing
but it's an alias for JQuery. Take a look at below jQuery code.
Collapse | Copy Code
$(document).ready(function(){
});
Over here $ sign can be
replaced with "jQuery" keyword.
Collapse | Copy Code
jQuery(document).ready(function(){
});
Q10. Can we have
multiple document.ready() function on the same page?
Q11. Can we use our
own specific character in the place of $ sign in jQuery?
Q12. Is it possible
to use other client side libraries like MooTools, Prototype along with jQuery?
Q13. What is
jQuery.noConflict?
Ans: As other client side
libraries like MooTools, Prototype can be used with jQuery and they also use
$() as their global function and to define variables. This situation creates
conflict as $() is used by jQuery and other library as
their global function. To overcome from such situations, jQuery has introduced jQuery.noConflict().
Collapse | Copy Code
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
You can also use your own
specific character in the place of $ sign in jQuery.
Collapse | Copy Code
var $j =
jQuery.noConflict();
// Use jQuery via jQuery(...)
$j(document).ready(function(){
$j("div").hide();
});
Q14. Is there any
difference between body onload() and document.ready() function?
We can have more than one document.ready() function in
a page where we can have only one body onloadfunction.
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?
Q16. Why there are
two different version of jQuery library?
Production
Deployment
Q17. What is a CDN?
Q18. Which are the
popular jQuery CDN? and what is the advantage of using CDN?
1. Google.
2. Microsoft
3. jQuery.
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?
Collapse | Copy Code
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Code to load jQuery Framework
from Microsoft CDN
Collapse | Copy Code
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>
Code to load jQuery Framework
from jQuery Site(EdgeCast CDN)
Collapse | Copy Code
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
Q20. How to load
jQuery locally when CDN fails?
Collapse | Copy Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof
jQuery == 'undefined')
{
document.write(unescape("%3Cscript
src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
Q21. What are
selectors in jQuery and how many types of selectors are there?
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?
Ans: To select element use ID
selector. We need to prefix the id with "#" (hash symbol). For
example, to select element with ID "txtName", then syntax would be,
Collapse | Copy Code
$('#txtName')
Q23. What does
$("div") will select?
Q24. How to select
element having a particular class (".selected")?
Q25. What does
$("div.parent") will select?
Q26. What are the
fastest selectors in jQuery?
Q27. What are the
slow selectors in jQuery?
Q28. How jQuery
selectors are executed?
Ans: Your last selectors is
always executed first. For example, in below jQuery code, jQuery will first
find all the elements with class ".myCssClass" and after that it will reject all the
other elements which are not in "p#elmID".
Collapse | Copy Code
$("p#elmID .myCssClass");
Q29. Which is fast
document.getElementByID('txtName') or $('#txtName').?
Q30. Difference
between $(this) and 'this' in jQuery?
Ans: this and $(this) refers to the same element. The only difference is the
way they are used. 'this' is used in traditional sense, when 'this' is wrapped
in $() then it becomes a jQuery object and you are able to use
the power of jQuery.
Collapse | Copy Code
$(document).ready(function(){
$('#spnValue').mouseover(function(){
alert($(this).text());
});
});
In below example, this is an
object but since it is not wrapped in $(), we can't use jQuery method and use the native
JavaScript to get the value of span element.
Collapse | Copy Code
$(document).ready(function(){
$('#spnValue').mouseover(function(){
alert(this.innerText);
});
});
Q31. How do you
check if an element is empty?
Ans: There are 2 ways to
check if element is empty or not. We can check using ":empty"
selector.
Collapse | Copy Code
$(document).ready(function(){
if ($('#element').is(':empty')){
//Element is empty
}
});
And the second way is using
the "$.trim()" method.
Collapse | Copy Code
$(document).ready(function(){
if($.trim($('#element').html())=='') {
//Element is empty
}
});
Q32. How do you
check if an element exists or not in jQuery?
Ans: Using jQuery length
property, we can ensure whether element exists or not.
Collapse | Copy Code
$(document).ready(function(){
if ($('#element').length > 0){
//Element exists
});
});
Q33. What is the
use of jquery .each() function?
Q34. What is the
difference between jquery.size() and jquery.length?
Q35. What is the
difference between $('div') and $('<div/>') in jQuery?
Q36. What is the
difference between parent() and parents() methods in jQuery?
Q37. What is the
difference between eq() and get() methods in jQuery?
Q38. How do you
implement animation functionality?
Collapse | Copy Code
(selector).animate({styles},speed,easing,callback)
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,
Collapse | Copy Code
$("btnClick").click(function(){
$("#dvBox").animate({height:"100px"});
});
Q39. How to disable
jQuery animation?
Q40. How do you
stop the currently-running animation?
Q41. What is the
difference between .empty(), .remove() and .detach() methods in jQuery?
Q42. Explain
.bind() vs .live() vs .delegate() vs .on()
Q43. What is wrong
with this code line "$('#myid.3').text('blah blah!!!');"
Collapse | Copy Code
$('#myid\\.3').text('blah
blah!!!');
Q44. How to create
clone of any object using jQuery?
Ans: jQuery provides clone() method which performs a deep copy of the set of matched
elements, meaning that it copies the matched elements as well as all of their
descendant elements and text nodes.
Collapse | Copy Code
$(document).ready(function(){
$('#btnClone').click(function(){
$('#dvText').clone().appendTo('body');
return false;
});
});
Q45. Does events
are also copied when you clone any element in jQuery?
Ans: As explained in previous
question, using clone() method, we can create clone of any
element but the default implementation of the clone() method doesn't copy events unless you tell the clone() method to copy the events. The clone() method takes a parameter, if you pass true then it will
copy the events as well.
Collapse | Copy Code
$(document).ready(function(){
$("#btnClone").bind('click', function(){
$('#dvClickme').clone(true).appendTo('body');
});
Q46. What is
difference between prop and attr?
Q47. What is
event.PreventDefault?
Q48. What is the
difference between event.PreventDefault and event.stopPropagation?
Q49. What is the
difference between event.PreventDefault and "return false"?
Q50. What is the
difference between event.stopPropagation and event.stopImmediatePropagation?
Ans: event.stopPropagation() allows other handlers on the same element
to be executed, whileevent.stopImmediatePropagation() prevents every event from running. For
example, see below jQuery code block.
Collapse | Copy Code
$("p").click(function(event){
event.stopImmediatePropagation();
});
$("p").click(function(event){
// This function won't be executed
$(this).css("background-color", "#f00");
});
Q51. How to check
if number is numeric while using jQuery 1.7+?
Q52. How to check
data type of any variable in jQuery?
Q53. How do you
attach a event to element which should be executed only once?
Ans: Using jQuery one() method. This attaches a handler to an event for the
element. The handler is executed at most once per element. In simple terms, the
attached function will be called only once.
Collapse | Copy Code
$(document).ready(function()
{
$("#btnDummy").one("click", function() {
alert("This will be displayed only once.");
});
});
Q54. Can you
include multiple version of jQuery? If yes, then how they are executed?
Q55. In what
situation you would use multiple version of jQuery and how would you include
them?
Collapse | Copy Code
<script type='text/javascript'
src='js/jquery_1.9.1.min.js'></script>
<script type='text/javascript'>
var
$jq = jQuery.noConflict();
</script>
<script type='text/javascript'
src='js/jquery_1.7.2.min.js'></script>
Q56. Is it possible
to hold or delay document.ready execution for sometime?
Ans: Yes, its possible. With
Release of jQuery 1.6, a new method "jQuery.holdReady(hold)" was introduced. This method allows to
delay the execution of document.ready() event. document.ready() event is called as soon as your DOM is ready but
sometimes there is a situation when you want to load additional JavaScript or
some plugins which you have referenced.
Collapse | Copy Code
$.holdReady(true);
$.getScript("myplugin.js", function() {
$.holdReady(false);
});
Q57. What is
chaining in jQuery?
Ans: Chaining is one of the
most powerful feature of jQuery. In jQuery, Chaining means to connect multiple
functions, events on selectors. It makes your code short and easy to manage and
it gives better performance. The chain starts from left to right. So left most
will be called first and so on.
Collapse | Copy Code
$(document).ready(function(){
$('#dvContent').addClass('dummy');
$('#dvContent').css('color', 'red');
$('#dvContent').fadeIn('slow');
});
The above jQuery code sample
can be re-written using chaining. See below.
Collapse | Copy Code
$(document).ready(function(){
$('#dvContent').addClass('dummy')
.css('color', 'red')
.fadeIn('slow');
});
Q58. How does
caching helps and how to use caching in jQuery?
Ans: Caching is an area which
can give you awesome performance, if used properly and at the right place.
While using jQuery, you should also think about caching. For example, if you
are using any element in jQuery more than one time, then you must cache it. See
below code.
Collapse | Copy Code
$("#myID").css("color",
"red");
//Doing some other stuff......
$("#myID").text("Error occurred!");
Now in above jQuery code, the
element with #myID is used twice but without caching. So
both the times jQuery had to traverse through DOM and get the element. But if
you have saved this in a variable then you just need to reference the variable.
So the better way would be,
Collapse | Copy Code
var $myElement = $("#myID").css("color",
"red");
//Doing some other stuff......
$myElement.text("Error occurred!");
Q59. You get
"jquery is not defined" or "$ is not defined" error. What
could be the reason?
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?
Q61. Can we use
jQuery to make ajax request?
Q62. What are
various methods to make ajax request in 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()?
Q64. What are
deferred and promise object in jQuery?
Q65. Can we
execute/run multiple Ajax request simultaneously in jQuery? If yes, then how?
Q66. Can you call
C# code-behind method using jQuery? If yes,then how?
Q67. Which is the
latest version of jQuery library?
Q68. Does jQuery
2.0 supports IE?
Q69. What are
source maps in jQuery?
Q70. How to use
migrate jQuery plugin?
Q71. Is it possible
to get value of multiple CSS properties in single statement?
Ans: Well, before jQuery 1.9
release it was not possible but one of the new feature of jQuery 1.9 was .css() multi-property getter.
Collapse | Copy Code
var propCollection = $("#dvBox").css([ "width",
"height", "backgroundColor" ]);
In this case, the propCollection will be an array and it will look something like this.
Collapse | Copy Code
{
width: "100px",
height: "200px",
backgroundColor: "#FF00FF"
}
Q72. How do you
stop the currently-running animation, remove all queued animations, and
complete all animations for the matched elements?
Q73. What is finish
method in jQuery?
Q74. What is the
difference between calling stop(true,true) and finish method?
Q75. Consider a
scenario where things can be done easily with javascript, would you still
prefer jQuery?
Q76. Can we use
protocol less URL while referencing jQuery from CDNs?
Ans: Yes. Below code is
completely valid.
Collapse | Copy Code
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Q77. What is the
advantage of using protocol less URL while referencing jQuery from CDNs?
Q78. What is jQuery
plugin and what is the advantage of using plugin?
Q79. What is jQuery
UI?
Q80. What is the
difference between jQuery and jQuery UI?
Popular posts from this blog
Hansika Motwani Photos From Velayutham Tamil Movie
Download Visakhapatnam Tirupati AC Double Decker Express Act
Drive the VSKP TPTY Double Decker Express from New Guntur to Ongole with BZA WAP4 DD Express Ready to depart from New Guntur,drive it till Ongole." Thanks to Mr.Shaik Abdul for Route. Thanks to Mr.Vinay Datta, Mr.Gaurav Virdi, Mr.Amarjeet Singh Flora, Mr.Rajesh Varadarajan for their Models . How to add Missing Locos & Coaches in Consists File https://youtu.be/ZvQzFr4gEpI Subscribe My Channel For More Videos : https://www.youtube.com/c/TechChaitu Download Act
Comments
Post a Comment