JQuery Interview Q&A...!!!
Q1). What is Jquery?
Solution: jquery is javascript library which required a jquery.js
file. After that you can write the jquery as fallows. It uses "$"
as the short hand to write jquery code.
Simple Syntax is
$(document).ready(function () {
//function body
});
Q2).When Jquery founded and by whom?
Solution: It was released in January 2006 at BarCamp NYC by John Resig(Jquery founder).
Q3).What scripting language is jQuery written in?
Solution: JavaScript
Q4).Write a basic code for add jquery library to pages?
Solution:
<html>
<head>
<script
src="jquery.js"></script>
<script >
// You can write the code here
</script>
</head>
<body>
<a href="http://www.osingh.weebly.com/">Jquery Q&A</a>
</body>
</html>
Q5).What is jQuery Selectors? Give some examples.
Solution:
Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.
Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id=lastname
.class $(".intro") All elements with class="intro"
element $("p") All p elements
For more click here http://www.w3schools.com/jquery/jquery_r...ectors.asp
Q6).What $("div.tutoriz") will select?
Solution: All the div element with tutoriz class.
Q-7).JQuery uses CSS selectors and XPath expressions to
select elements true or false?
Solution:- True
Q8).What are the fastest selectors in Jquery?
Solution: ID and element selectors are the fastest selectors
Q-9).What are the slower selecoters in Jquery?
Solution: Class selectors are slower
Q10).Which one is faster Jquery ID selector or JavaScript getElementById() ?
(Jquery ID selector vs JavaScript getElementById())
Solution :
JavaScript getElementById() is faster than Jquery Id ($("#elementID")) selector
Q-11).Where Jquery code execute? On client browser or server browser?
Ans: On client browser
Q12).Write the code for selecting the 1st div element,
4th div element
last div, and for even and odd div elemets also. one by one?
apply the red color on the above div.
Solution:
<div >
<div > Question</div>
<div > Question</div>
<div > Question</div>
<div > Question</div>
<div > Question</div>
<div > Question</div>
</div>
Code for first div : $("div.questions > div:first").css("color", "red");
Code for 4th div : $("div.questions > div:nthchild(4)").css("color", "red");
Code for last div : $("div.questions > div:last").css("color", "red");
Code for even div : $("div.questions > div:even").css("color", "red");
Code for odd div : $("div.questions > div:odd").css("color", "red");
Q13).Write the code for select second last div element?
Solution:
Code for second last div : $("div.questions > div::nth‐last‐child(2)").css("color", "red");
<!-- Introduced in CSS3 -->
Q14).What are the advantages of using jQuery over JavaScript in ASP.NET web application ?
Solution:
Below are the advatages of using jQery over JavaScript
a).Jquery is well written optimised javascript code so
it will be faster in execution unless we write same standard
optimised javascript code.
b).Jquery is concise java script code ,means minimal
ammount of code
is to be written for the same functionality than the
javascript.
c).Javascript related Development is fast using Jquery
because most of the
functionality is already written in the library and we just
need to use that.
d).Jquery has cross browser support ,so we save time for
supporting all the browsers.
Q15).What is Chaining in jQuery?
Solution: In jQuery, Chaining means to connect multiple
functions, events on selectors. look at Sample Code 1 and 2.
Sample Code 1
$(document).ready(function(){
$('#dvContent').addClass('dummy');
$('#dvContent').css('color', 'red');
$('#dvContent').fadeIn('slow');
});
Sample Code 2
$(document).ready(function(){
$('#dvContent').addClass('dummy')
.css('color', 'red')
.fadeIn('slow');
});
Both the sample codes above will perform the exact same thing but the only difference is that Sample code 2 is using Chaining. But Code 2 is faster and shorter then Code 1. The problem with the Sample Code 1 is that for every statement, jQuery has to search the entire DOM and find the element and after that executes the attached function on it.
But when chaining is used, then jQuery has to find the element only once and it will execute all the attached functions one by one. This is the advantage of Chaining.
Q16).Is jQuery a library for client scripting or server scripting?
Solution: Client Script
Q17).What is jQuery & its significance? Why it is so popular?...
Solution:-
Q18).What are features of JQuery ?
or
What can be done using JQuery?
Solution: Features of Jquery
1. One can easily provide effects and can do animations.
2. Applying / Changing CSS.
3. Cool plugins.
4. Ajax support
5. DOM selection events
6. Event Handling
Q19).How to check Jquery UI loaded or not?
Solution:
// Checking if jQuery UI is loaded or not
if ($.ui) {
// jQuery UI is loaded
} else {
// jQuery UI is not loaded
}
Q20).How check currently loaded jQuery UI version on the page?
Solution:
// Returns jQuery UI version (ex: 1.8.2) or undefined
$.ui.version
Q21).Write the code for setting datetimepicker on textbox click.
If below is our textbox
<input type="text" id="Text1"
name=%26quot%3Bacc%26quot%3B value="Select Date"/>
then Jquery code will be
$("#abc").datepicker();
Q22).If you have a table, how you will apply the two differt color on alternate rows using Jquery?
<table border="1">
<tr><td>Kiran Chandshekhran</td></tr>
<tr><td>Rijo George</td></tr>
<tr><td>Saurav Kumar</td></tr>
<tr><td>Rohit Singh</td></tr>
</table>
Solution:
<script>
$(document).ready(function () {
$("tr:even").css("background‐color",
"#f4f4f8");
$("tr:odd").css("background‐color",
"#ffffff");
});
</script>
Q23).Name the Jquery method which is used to hide selected elements?
Solution: .hide()
Q24).Name the Jquery methods which are used for apply css class?
Solution:
$("#Id1").addClass('YourClassName'); // for
apply class
$("#Id1").removeClass('YourClassName'); // for
remove class
Q25).What is the use of attr() method in Jquery?
The attr() method sets or returns attributes and values of the selected elements.
When this method is used to return the attribute value, it returns the value of the first matched element.
When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.
$(selector).attr(attribute) //it will return the value of an attribute
$(selector).attr(attribute,value) //it will set the value of an attribute
$(selector).attr({attribute:value, attribute:value,...}) //for set multiple attribute
Q26).Can we use both jQuery and AJAX together?
Solution: yes
Q27).Tell the name of jQuery method which is used to perform an asynchronous HTTP request?
Solution: jQuery.ajax()
Q28).What is the use of jquery load() method?
The jQuery load() method is a powerful AJAX method.
The load() method loads data from a server and puts the
returned data into the selected element without reload the
complete page.
Ex:The following example loads the content of the file
"demo_test.txt" into a specific <div> element
$("#div1").load("demo_test.txt");
Q29).Can we use our own specific charactor in the place of $ sigh in Jquery?
Solution: Yes
You can also create your own shortcut very easily. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use. Here is an example
var roshan= $.noConflict();
roshan(document).ready(function () {
roshan("button").click(function () {
roshan("p").text("jQuery is still working!");
});
});
Q30).Name the 5 Jquery events?
Solution:-
jQuery Events
jQuery click() event.
jQuery dblclick() event.
jQuery mouseenter() event.
jQuery mouseleave() event.
jQuery mousedown() event.
jQuery mouseup() event.
jQuery hover() event.
jQuery focus() and blur() events.
Q31).What is difference between jQuery's ready and holdReady?
jQuery's ready is an event which gets triggered automatically when DOM is ready while holdReady is a signal/flag to hold this triggering. holdReady was included
in 1.6 version and it works only if used before the execution/triggering of ready event. Once ready event is fired, it has nothing to do. It is useful in dynamically loading
scripts before the ready starts. It release ready event execution when used with a true parameter.
Q-32).What is Jquery $.ajax() method?
The Jquery ajax() method is used to perform an AJAX
(asynchronous HTTP) request.
Q33).Name any four paremeter of Jquery ajax method?
url : Specifies the URL to send the request to. Default is the current page
type : Specifies the type of request. (GET or POST)
data : Specifies data to be sent to the server
cache: A Boolean value indicating whether the browser
should cache the requested pages. Default is true
beforeSend(xhr): A function to run before the request is sent
Q34).When can you use jQuery?
JQuery can be used to perform
1.Call methods on specific events
2.Traverse the documents
3.For apply CSS
4.Manipulation purpose and
5.To add effects too.
6.For apply animations
7.For give atractive look (dialogbox etc)
8.For asynchronous calls ($.ajax())
Q36).How to select combobox selecte value and text using Jquery?
Example:
var StateID = $("#StateCbx").val(); // Or you can use it
$("#iStateID").val();
var StateName = $("#StateCbx option:selected").text();
alert("Selected combobox text is= " + StateName + " and value is= " + StateID);
Q37).JQuery html() method works for both HTML and XML documents?
No, It only works for HTML
Q38).Can you call C# codebehind method using Jquery?
Yes
Q39).How can you call a method inside code-behind using jQuery ?
By $.ajax and by declaring method a WebMethod
Q40).What is the use of jQuery.data() ?
jQuery’s data method gives us the ability to associate arbitrary data with DOM nodes and JavaScript objects. This makes our code more concise and clean.
Q41).Is jQuery a W3C standard ?
No
Q42).What is the use of jquery .each() function?
Basically, the jQuery .each() function is used to loop through each element of the target jQuery object. Very useful for multi element DOM manipulation, looping arrays
and object properties.
Q43).If you have a server control(asp.net server control, Button) and on the click of button you want to call a jquery function, So how you will call a jquery function without postback?
ASP.NET provides the OnClientClick property to handle button clicks. You can use this property on Button, LinkButton and ImageButton. The same OnClientClick
property also allows you to cancel a postback.
So I can use OnClientClick property and Jquery function
will return false.
Example
<script >
function callMe() {
alert('Hello');
return false;
}
</script>
<asp:Button ID="Button1" runat="server"
OnClientClick="return callMe();" Text="Button"
/>
Q44).What is the use of .Size() method in Jquery?
Jquery's .size() method returns number of element in the
object. That means that you can count the number of
elements within an object.
Q45).What is the difference between jquery.size() and jquery.length?
Jquery.size() and jquery.length both returns the number of element found in the object. But, jquery.length is faster than jquery.size() because size() is a method but length is a property.
Q46).How you can debug Jquery code/What are the technique to debug jquery?
Add the keyword "debugger;" to the line from where we want to start the debugging and then run the Visual Studio in Debug mode by pressing F5 or using the Debug button.
Q47).Difference between jQuery-x.x.x.js and jQuery.x.x.x min.js?
jQuery-x.x.x.js = Pretty and easy to read Smile Read this one.
jQuery.x.x.x min.js = Looks like jibberish! But has a smaller file size. Put this one on your site for fast loading and less size.
Q48).How to get the server response from an AJAX request using Jquery?
When invoking functions that have asynchronous behavior We must provide a callback function to capture the desired result. This is especially important with AJAX in the browser because when a remote request is made, it is indeterminate when the response will be received.
Below an example of making an AJAX call and alerting the response (or error):
$.ajax({
url: 'pcdsEmpRecords.php',
success: function (response) {
alert(response);
},
error: function (xhr) {
alert('Error! Status = ' +
xhr.status);
}
});
Q49).Do we need to add the JQuery file both at the Master page and Content page as well?
No, if the Jquery file has been added to the master page
then we can access the content page directly without
adding any reference to it.
This can be done using this simple example
<script src="jQuery‐1.4.1‐min.js"></script>
Q50).Difference between onload() and document.ready() function used in jQuery?
We can add more than one document.ready() function in a page.
we can have only one onload function.
Document.ready() function is called as soon as DOM is loaded.
body.onload() function is called when everything (DOM, images)gets loaded on the page.
Solution: jquery is javascript library which required a jquery.js
file. After that you can write the jquery as fallows. It uses "$"
as the short hand to write jquery code.
Simple Syntax is
$(document).ready(function () {
//function body
});
Q2).When Jquery founded and by whom?
Solution: It was released in January 2006 at BarCamp NYC by John Resig(Jquery founder).
Q3).What scripting language is jQuery written in?
Solution: JavaScript
Q4).Write a basic code for add jquery library to pages?
Solution:
<html>
<head>
<script
src="jquery.js"></script>
<script >
// You can write the code here
</script>
</head>
<body>
<a href="http://www.osingh.weebly.com/">Jquery Q&A</a>
</body>
</html>
Q5).What is jQuery Selectors? Give some examples.
Solution:
Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.
Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id=lastname
.class $(".intro") All elements with class="intro"
element $("p") All p elements
For more click here http://www.w3schools.com/jquery/jquery_r...ectors.asp
Q6).What $("div.tutoriz") will select?
Solution: All the div element with tutoriz class.
Q-7).JQuery uses CSS selectors and XPath expressions to
select elements true or false?
Solution:- True
Q8).What are the fastest selectors in Jquery?
Solution: ID and element selectors are the fastest selectors
Q-9).What are the slower selecoters in Jquery?
Solution: Class selectors are slower
Q10).Which one is faster Jquery ID selector or JavaScript getElementById() ?
(Jquery ID selector vs JavaScript getElementById())
Solution :
JavaScript getElementById() is faster than Jquery Id ($("#elementID")) selector
Q-11).Where Jquery code execute? On client browser or server browser?
Ans: On client browser
Q12).Write the code for selecting the 1st div element,
4th div element
last div, and for even and odd div elemets also. one by one?
apply the red color on the above div.
Solution:
<div >
<div > Question</div>
<div > Question</div>
<div > Question</div>
<div > Question</div>
<div > Question</div>
<div > Question</div>
</div>
Code for first div : $("div.questions > div:first").css("color", "red");
Code for 4th div : $("div.questions > div:nthchild(4)").css("color", "red");
Code for last div : $("div.questions > div:last").css("color", "red");
Code for even div : $("div.questions > div:even").css("color", "red");
Code for odd div : $("div.questions > div:odd").css("color", "red");
Q13).Write the code for select second last div element?
Solution:
Code for second last div : $("div.questions > div::nth‐last‐child(2)").css("color", "red");
<!-- Introduced in CSS3 -->
Q14).What are the advantages of using jQuery over JavaScript in ASP.NET web application ?
Solution:
Below are the advatages of using jQery over JavaScript
a).Jquery is well written optimised javascript code so
it will be faster in execution unless we write same standard
optimised javascript code.
b).Jquery is concise java script code ,means minimal
ammount of code
is to be written for the same functionality than the
javascript.
c).Javascript related Development is fast using Jquery
because most of the
functionality is already written in the library and we just
need to use that.
d).Jquery has cross browser support ,so we save time for
supporting all the browsers.
Q15).What is Chaining in jQuery?
Solution: In jQuery, Chaining means to connect multiple
functions, events on selectors. look at Sample Code 1 and 2.
Sample Code 1
$(document).ready(function(){
$('#dvContent').addClass('dummy');
$('#dvContent').css('color', 'red');
$('#dvContent').fadeIn('slow');
});
Sample Code 2
$(document).ready(function(){
$('#dvContent').addClass('dummy')
.css('color', 'red')
.fadeIn('slow');
});
Both the sample codes above will perform the exact same thing but the only difference is that Sample code 2 is using Chaining. But Code 2 is faster and shorter then Code 1. The problem with the Sample Code 1 is that for every statement, jQuery has to search the entire DOM and find the element and after that executes the attached function on it.
But when chaining is used, then jQuery has to find the element only once and it will execute all the attached functions one by one. This is the advantage of Chaining.
Q16).Is jQuery a library for client scripting or server scripting?
Solution: Client Script
Q17).What is jQuery & its significance? Why it is so popular?...
Solution:-
Q18).What are features of JQuery ?
or
What can be done using JQuery?
Solution: Features of Jquery
1. One can easily provide effects and can do animations.
2. Applying / Changing CSS.
3. Cool plugins.
4. Ajax support
5. DOM selection events
6. Event Handling
Q19).How to check Jquery UI loaded or not?
Solution:
// Checking if jQuery UI is loaded or not
if ($.ui) {
// jQuery UI is loaded
} else {
// jQuery UI is not loaded
}
Q20).How check currently loaded jQuery UI version on the page?
Solution:
// Returns jQuery UI version (ex: 1.8.2) or undefined
$.ui.version
Q21).Write the code for setting datetimepicker on textbox click.
If below is our textbox
<input type="text" id="Text1"
name=%26quot%3Bacc%26quot%3B value="Select Date"/>
then Jquery code will be
$("#abc").datepicker();
Q22).If you have a table, how you will apply the two differt color on alternate rows using Jquery?
<table border="1">
<tr><td>Kiran Chandshekhran</td></tr>
<tr><td>Rijo George</td></tr>
<tr><td>Saurav Kumar</td></tr>
<tr><td>Rohit Singh</td></tr>
</table>
Solution:
<script>
$(document).ready(function () {
$("tr:even").css("background‐color",
"#f4f4f8");
$("tr:odd").css("background‐color",
"#ffffff");
});
</script>
Q23).Name the Jquery method which is used to hide selected elements?
Solution: .hide()
Q24).Name the Jquery methods which are used for apply css class?
Solution:
$("#Id1").addClass('YourClassName'); // for
apply class
$("#Id1").removeClass('YourClassName'); // for
remove class
Q25).What is the use of attr() method in Jquery?
The attr() method sets or returns attributes and values of the selected elements.
When this method is used to return the attribute value, it returns the value of the first matched element.
When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.
$(selector).attr(attribute) //it will return the value of an attribute
$(selector).attr(attribute,value) //it will set the value of an attribute
$(selector).attr({attribute:value, attribute:value,...}) //for set multiple attribute
Q26).Can we use both jQuery and AJAX together?
Solution: yes
Q27).Tell the name of jQuery method which is used to perform an asynchronous HTTP request?
Solution: jQuery.ajax()
Q28).What is the use of jquery load() method?
The jQuery load() method is a powerful AJAX method.
The load() method loads data from a server and puts the
returned data into the selected element without reload the
complete page.
Ex:The following example loads the content of the file
"demo_test.txt" into a specific <div> element
$("#div1").load("demo_test.txt");
Q29).Can we use our own specific charactor in the place of $ sigh in Jquery?
Solution: Yes
You can also create your own shortcut very easily. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use. Here is an example
var roshan= $.noConflict();
roshan(document).ready(function () {
roshan("button").click(function () {
roshan("p").text("jQuery is still working!");
});
});
Q30).Name the 5 Jquery events?
Solution:-
jQuery Events
jQuery click() event.
jQuery dblclick() event.
jQuery mouseenter() event.
jQuery mouseleave() event.
jQuery mousedown() event.
jQuery mouseup() event.
jQuery hover() event.
jQuery focus() and blur() events.
Q31).What is difference between jQuery's ready and holdReady?
jQuery's ready is an event which gets triggered automatically when DOM is ready while holdReady is a signal/flag to hold this triggering. holdReady was included
in 1.6 version and it works only if used before the execution/triggering of ready event. Once ready event is fired, it has nothing to do. It is useful in dynamically loading
scripts before the ready starts. It release ready event execution when used with a true parameter.
Q-32).What is Jquery $.ajax() method?
The Jquery ajax() method is used to perform an AJAX
(asynchronous HTTP) request.
Q33).Name any four paremeter of Jquery ajax method?
url : Specifies the URL to send the request to. Default is the current page
type : Specifies the type of request. (GET or POST)
data : Specifies data to be sent to the server
cache: A Boolean value indicating whether the browser
should cache the requested pages. Default is true
beforeSend(xhr): A function to run before the request is sent
Q34).When can you use jQuery?
JQuery can be used to perform
1.Call methods on specific events
2.Traverse the documents
3.For apply CSS
4.Manipulation purpose and
5.To add effects too.
6.For apply animations
7.For give atractive look (dialogbox etc)
8.For asynchronous calls ($.ajax())
Q36).How to select combobox selecte value and text using Jquery?
Example:
var StateID = $("#StateCbx").val(); // Or you can use it
$("#iStateID").val();
var StateName = $("#StateCbx option:selected").text();
alert("Selected combobox text is= " + StateName + " and value is= " + StateID);
Q37).JQuery html() method works for both HTML and XML documents?
No, It only works for HTML
Q38).Can you call C# codebehind method using Jquery?
Yes
Q39).How can you call a method inside code-behind using jQuery ?
By $.ajax and by declaring method a WebMethod
Q40).What is the use of jQuery.data() ?
jQuery’s data method gives us the ability to associate arbitrary data with DOM nodes and JavaScript objects. This makes our code more concise and clean.
Q41).Is jQuery a W3C standard ?
No
Q42).What is the use of jquery .each() function?
Basically, the jQuery .each() function is used to loop through each element of the target jQuery object. Very useful for multi element DOM manipulation, looping arrays
and object properties.
Q43).If you have a server control(asp.net server control, Button) and on the click of button you want to call a jquery function, So how you will call a jquery function without postback?
ASP.NET provides the OnClientClick property to handle button clicks. You can use this property on Button, LinkButton and ImageButton. The same OnClientClick
property also allows you to cancel a postback.
So I can use OnClientClick property and Jquery function
will return false.
Example
<script >
function callMe() {
alert('Hello');
return false;
}
</script>
<asp:Button ID="Button1" runat="server"
OnClientClick="return callMe();" Text="Button"
/>
Q44).What is the use of .Size() method in Jquery?
Jquery's .size() method returns number of element in the
object. That means that you can count the number of
elements within an object.
Q45).What is the difference between jquery.size() and jquery.length?
Jquery.size() and jquery.length both returns the number of element found in the object. But, jquery.length is faster than jquery.size() because size() is a method but length is a property.
Q46).How you can debug Jquery code/What are the technique to debug jquery?
Add the keyword "debugger;" to the line from where we want to start the debugging and then run the Visual Studio in Debug mode by pressing F5 or using the Debug button.
Q47).Difference between jQuery-x.x.x.js and jQuery.x.x.x min.js?
jQuery-x.x.x.js = Pretty and easy to read Smile Read this one.
jQuery.x.x.x min.js = Looks like jibberish! But has a smaller file size. Put this one on your site for fast loading and less size.
Q48).How to get the server response from an AJAX request using Jquery?
When invoking functions that have asynchronous behavior We must provide a callback function to capture the desired result. This is especially important with AJAX in the browser because when a remote request is made, it is indeterminate when the response will be received.
Below an example of making an AJAX call and alerting the response (or error):
$.ajax({
url: 'pcdsEmpRecords.php',
success: function (response) {
alert(response);
},
error: function (xhr) {
alert('Error! Status = ' +
xhr.status);
}
});
Q49).Do we need to add the JQuery file both at the Master page and Content page as well?
No, if the Jquery file has been added to the master page
then we can access the content page directly without
adding any reference to it.
This can be done using this simple example
<script src="jQuery‐1.4.1‐min.js"></script>
Q50).Difference between onload() and document.ready() function used in jQuery?
We can add more than one document.ready() function in a page.
we can have only one onload function.
Document.ready() function is called as soon as DOM is loaded.
body.onload() function is called when everything (DOM, images)gets loaded on the page.