JQuery interview questions and answers

Views: 584
Created Date: 02-Oct-2016

What is JQuery?

JQuery is a client-side library built using javascript. It uses "$" as the short hand to write JQuery code.

$(document).ready(function()

{

//function body goes here

//This code is equivalent to javascript window onload

});

 

When JQuery founded and by whom?

It was released in January 2006 at BarCamp NYC by John Resig (JQuery founder).

 

What scripting language is JQuery written in?

JavaScript

 

Write a basic code for add JQuery library to pages? 

<html>

<head>

<script type="text/javascript" src="JQuery.js"></script>

<script type="text/javascript">

// Your code here

</script>

</head>

<body>

<a href="http://www.logicsmeet.com/Interview/Jquery">JQuery Interview Questions and Answers</a>

</body>

</html>

 

What is JQuery Selectors? Give some examples.

Selectors are used in JQuery to filter DOM elements. Selectors can filter elements using ID, CSS class, Element name and hierarchical position of an 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

 

What $("div.product") will selector?

All the div element with product class.

 

JQuery uses CSS selectors and XPath expressions to select elements true or false?

True

 

What are the fastest selectors in JQuery?

ID and element selectors are the fastest selectors in JQuery

 

What are the slower selecoters in JQuery?

Class selectors are slower since they might be multiple elements using the same class. 

 

Which one is faster JQuery ID selector or JavaScript getElementById()? (JQuery ID selector vs JavaScript getElementById())

JavaScript getElementById() is faster than JQuery Id ($("#elementID")) selector

 

Where JQuery code execute? On client browser or server?

JQuery code executes on client browser

 

Write the code for selecting the 1st div element, 4th div element, last div, and even & odd elements.

<div class="Catalog">

<div class="product">Product-1</div>

<div class="product">Product-2</div>

<div class="product">Product-3</div>

<div class="product">Product-4</div>

<div class="product">Product-5</div>

<div class="product">Product-6</div>

</div>

To Select First div: 

$("div.Catalog > div:first").css("color", "red");

To Select 4th div: 

$("div.Catalog > div:nth-child(4)").css("color", "red");

To Select last div: 

$("div.Catalog > div:last").css("color", "red");

To Select even div's: 

$("div.Catalog > div:even").css("color", "red");

To Select odd div's: 

$("div.Catalog > div:odd").css("color", "red");

 

Write code for select second last div element?

To Select Second last div : 

$("div.questions > div::nth-last-child(2)").css("color", "red"); 

Note: This feature was introduced in CSS3

 

What are the advantages of using JQuery over JavaScript in ASP.NET web application?

 

  1. JQuery is well written optimised javascript code so it will be faster in execution unless we write same standard optimised javascript code.
  2. JQuery is concise JavaScript code, means minimal ammount of code is to be written for the same functionality than the javascript.
  3. 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.
  4. JQuery has cross browser support ,so we save time for supporting all the browsers. 

 

 

What are the 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

 

How to check JQuery UI loaded or not?

The following code is used to check if JQuery UI is loaded

if($.ui){

    // JQuery UI is loaded

}else {

    // JQuery UI is not loaded

}

 

How check currently loaded JQuery UI version on the page?

The following code shows the currently JQuery UI version:

// Returns JQuery UI version (ex: 1.8.2) or undefined

$.ui.version

 

Write the code for setting datetimepicker on textbox click

<input type="text" id="txtDate" value="Select Date" />
//JQuery code
$("#txtDate").datepicker();

 

How to show two differt color for alternate rows of a table using JQuery?

<table border="1">
<tr><td>Hariharan T G</td></tr>
<tr><td>Vaishnavi K S</td></tr>
<tr><td>Balaji T G</td></tr>
<tr><td>Gopinath T V</td></tr>
<tr><td>Jegadeswari T G</td></tr>
</table>




<script src="JQuery.js"></script>

<script>

$(document).ready(function()

{

$("tr:even").css("background-color", "Red");

$("tr:odd").css("background-color", "Blue");

});

</script>

 

Name the JQuery method which is used to hide selected elements?

.hide()

 

Name the JQuery methods which are used to apply / remove css class

$("#elementId").addClass('ClassName'); // to add css class

$("#elementId").removeClass('ClassName'); // to remove css class

 

What is the use of attr() method in JQuery?

 

  1. The attr() method sets or returns attributes and values of the selected elements.
  2. When this method is used to return the attribute value, it returns the value of the first matched element.
  3. 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,...}) //to set multiple attribute values

 

Can we use both JQuery and AJAX together?

yes

 

What is the name of JQuery method which is used to perform an asynchronous HTTP request?

JQuery.ajax();

 

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.

Example: The following example loads the content of the file "Content.txt" into a specific <div> element

$("#divContent").load("Content.txt");

 

Can we use our own specific charactor in the place of $ sigh in JQuery?

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 shortcut = $.noConflict();

shortcut(document).ready(function(){

shortcut("button").click(function(){

shortcut("p").text("JQuery is still working!");

});

});

 

How many events are present in JQuery? Name few of them.

 

  • 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.

 

 

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. 

 

What is JQuery $.ajax() method?

The JQuery ajax() method is used to perform an AJAX (asynchronous HTTP) request.

 

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

 

When JQuery can be used?

JQuery can be used as follows:

 

  • Call methods on specific events
  • Traverse the documents
  • For apply CSS
  • Manipulation purpose & to add transition effects
  • To apply animations
  • To give User Friendly UI (dialogbox etc)
  • To make asynchronous calls ($.ajax())

 

 

How to get the selected drop-down list value and text using JQuery?

var ProductID = $("#ProductCbx").val(); 

var ProductName = $("#ProductCbx option:selected").text();

alert("Selected drop-down text is= " + ProductName + " and value is= " + ProductID);

 

Does JQuery html() method works for both HTML and XML documents?

No, It only works for HTML

 

Can you call C# codebehind method using JQuery?

Yes

 

How can you call a code-behind method using JQuery?

By $.ajax and by declaring method a WebMethod

 

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.

 

Is JQuery a W3C standard?

No

 

What is the use of JQuery .each() function?

Basically, the JQuery .each() function is used to iterate through each element of the target JQuery object. Very useful for multi element DOM manipulation, looping arrays and object properties.

Example:

The below code will show the alert box 5 times as there are 5 list items <li>

<script>

$(document).ready(function(){

$("button").click(function(){

$("li").each(function(){

alert($(this).text())

});

});

});

</script>




<ul>

<li>Coffee</li>

<li>Milk</li>

<li>Tea</li>

<li>Lime Juice</li>

<li>Soda</li>

</ul>

 

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 type="text/javascript">

function callMe()

{

alert('Hello');

return false;

}

</script>

<asp:Button ID="Button1" runat="server" OnClientClick="return callMe();" Text="Button" />

 

What is the use of .size() method in JQuery?

JQuery's .size() method returns number of elements in the object. 

 

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.

 

What is the technique to debug JQuery code?

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.

 

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.

 

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

<script type="text/javascript">

$.ajax({ 

url: 'getResponse.ashx', 

success: function(response) { 

alert(response); 

}, 

error: function(xhr) { 

alert('Error! Status = ' + xhr.status); 



});

</script>

 

Do we need to add the JQuery file both at the Master page and Content page as well in ASP.Net?

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 similar this below example in the master page.

<script type="text/javascript" src="JQuery-1.4.1-min.js"></script>

 

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.

Similar Tags
4.7 3