JQuery Interview Questions and Answers Part-1

 JQUERY INTERVIEW QUESTIONS AND ANSWERS Part-1

1).What is Jquery?
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. Jquery is a reusable javascript library which simplifies javascript coding. Simple Syntax is:

Code:

$(document).ready(function()
{
    function body
});

2).When Jquery founded and by whome?
It was released in January 2006 at BarCamp NYC by John Resig(Jquery founder).

3).What scripting language is jQuery written in?
Ans: JavaScript

4).Write a basic code for add jquery library to pages?

Code:

Jquery Interview Questions and Answers



5).What is jQuery Selectors? Give some examples.
Ans: 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.

Code:

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

6).What $("div.tutoriz") will select?
Ans: All the div element with tutoriz class.

7).jQuery uses CSS selectors and XPath expressions to select elements true or false?
Ans:- True

8).What are the fastest selectors in Jquery?
Ans: ID and element selectors are the fastest selectors

9).What are the slower selecoters in Jquery?
Ans: Class selectors are slower

10).Which one is faster Jquery ID selector or JavaScript getElementById()?
(Jquery ID selector vs JavaScript getElementById())
Ans: JavaScript getElementById() is faster than Jquery Id ($("#elementID")) selector

11).Where Jquery code execute? On client browser or server browser?
On client browser

12).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.

Code:

        

Question

    

Question

    

Question

    

Question

    

Question

    

Question

Code for first div       : $("div.questions > div:first").css("color", "red");
Code for 4th div         : $("div.questions > div:nth-child(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");

13).Write the code for select second last div element?
Code for second last div : $("div.questions > div::nth-last-child(2)").css("color", "red");

14).What are the advantages of using jQuery over JavaScript in ASP.NET web application
Ans:
Below are the advantages of using jQuery over JavaScript
a>.JQuery is well written optimized JavaScript code so
it will be faster in execution unless we write same standard optimized JavaScript code.
b>.JQuery is concise java script code, means minimal amount 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.

15).What is Chaining in jQuery?
Ans:
In jQuery, Chaining means to connect multiple functions, events on selectors. Look at Sample Code 1 and 2.

Code:

Sample Code 1
​$(document).ready(function(){
    $('#dvContent').addClass('dummy');
    $('#dvContent').css('color', 'red');
    $('#dvContent').fadeIn('slow');
});​

Sample Code 2 (using Chaining)
​$(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.
For read more click on the below link
http://jquerybyexample.blogspot.com/2012...query.html
http://tobiasahlin.com/blog/quick-guide-...in-jquery/

16).Is jQuery a library for client scripting or server scripting?
Ans: Client Script

17).What is jQuery & its significance? Why it is so popular?

18).What are features of JQuery OR What can be done using JQuery?
Features of JQuery:
1. One can easily provide effects and can do animations.
2. Applying / Changing CSS.
3. Cool plug-in.
4. Ajax support
5. DOM selection events
6. Event Handling

19).How to check JQuery UI loaded or not?
Ans: // Checking if jQuery UI is loaded or not

Code:

if($.ui){
    // jQuery UI is loaded
}else {
    // jQuery UI is not loaded
}

20).How check currently loaded jQuery UI version on the page?
Ans: // Returns jQuery UI version (ex: 1.8.2) or undefined
$.ui.version


21).Write the code for setting datetimepicker on textbox click.
If below is our textbox

then Jquery code will be
$("#abc").datepicker();


22).If you have a table, how you will apply the two differt color on alternate rows using Jquery?

Code:

  
  
  
  

Vikas Ahlawat

Edwin George

Rohit Khurana

Gyan Singh

Ans :

23).Name the Jquery method which is used to hide selected elements?
Ans: .hide()


24).Name the Jquery methods which are used for apply css class?
Ans:
$("#Id1").addClass('YourClassName'); // for apply class
$("#Id1").removeClass('YourClassName'); // for remove class


25).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.

Code:

$(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

26).Can we use both jQuery and AJAX together?
Ans: yes

27).Tell the name of jQuery method which is used to perform an asynchronous HTTP request?
Ans: jQuery.ajax()

28).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 complate page.
Ex:The following example loads the content of the file "demo_test.txt" into a specific

element
$("#div1").load("demo_test.txt");


29).Can we use our own specific charactor in the place of $ sigh in Jquery?
Ans: 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:

Code:

var vikas = $.noConflict();
vikas(document).ready(function(){
  vikas("button").click(function(){
    vikas("p").text("jQuery is still working!");
  });
});

30).Name the 5 Jquery events?
Ans:-
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.
31).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.

32).What is Jquery $.ajax() method?
The Jquery ajax() method is used to perform an AJAX (asynchronous HTTP) request.

33).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

34).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())

35).What is the use of noConflict() method in Jquery?
You can also create your own shortcut very easily using noConflict() method returns a reference to jQuery, that you can save in a variable, for later use. Here is an example:

Code:

var vikas = $.noConflict();
vikas(document).ready(function(){
  vikas("button").click(function(){
    vikas("p").text("jQuery is still working!");
  });
});

36).How to select combobox selected 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);

37).JQuery html() method works for both HTML and XML documents?
No, It only works for HTML

38).Can you call C# codebehind method using Jquery?
Yes

39).How can you call a method inside code-behind using jQuery?
By $.ajax and by declaring method a WebMethod

40).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.
For live example click here http://tutorialzine.com/2010/11/jquery-data-method/

41).Is jQuery a W3C standard?
No

42).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.
Example:-
In this example alert box will open 3 times because dom contain 3

tags

Code:

• Coffee


• Milk


• Soda

43).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

Code:

44).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.

45).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.

46).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.

47).Difference between jQuery-x.x.x.js and jQuery.x.x.x min.js?
jQuery-x.x.x.js = Pretty and easy to read 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.

48).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):

Code:

$.ajax({
url: 'pcdsEmpRecords.php',
success: function(response) {
alert(response);
},
error: function(xhr) {
alert('Error! Status = ' + xhr.status);
}
});

49).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


50).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.

51). What is AJAX ?

AJAX -- "asynchronous JavaScript and XML" — is a means of loading data from a server without requiring a page reload. It uses a browser's built-in XMLHttpRequest (XHR) functionality to make a request to the server and then handle the data that the server returns.

jQuery provides the $.ajax method — and several convenience methods — to make it easier to work with XHRs across browsers.

52). What is the DOM in jquery? The Document

The Document Object Model (DOM) is the backbone of every webpage. A web browser parses HTML and JavaScript and maintains a data model of what should be displayed to the user.

To start to understand the DOM, we will begin with the document object. This object contains a hierarchy of all the contents of the web page -- text, images, links, etc. We can access this object in JavaScript using the document keyword.