Interview Q & A on JQuery in Asp.Net

1. What is Jquery?

jQuery is a JavaScript library. It makes HTML document traversal and manipulation,event handling, animation, and Ajax much simpler.

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

2.What are 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

3. Name some of 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.

4.What is jQuery Selectors? Give some examples?

JQuery Selectors are used to select one or a group of HTML elements from your web page.

jQuery selectors always start with dollar sign and parentheses: $()

There are three building blocks to select the elements in a web document.

1) Select elements by tag name

Example: $(div)

It will select all the div elements in the document.

2) Select elements by ID

Example: $(#xyzid”)

It will select single element that has an ID of xyzid

3) Select elements by class

Example: $(“.xyzclass”)

It will select all the elements having class xyzclass

5. Explain the each() function?

The each() function specify the function to be called for every matched element.

Syntax:

$(selector).each(function (index, element))

“index” is the index position of the selector.

“selector” specifies the current selector where we can use “this” selector also.

In the case when we need to stop the each loop early then we can use “return false;”

For example

$("#clickme").click(function(){

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

document.write($(this).text())

});

});

This will write the text for each “li” element.

6. What is difference between $(this) and ‘this’ in jQuery?

Refer the following example

$(document).ready(function(){

$(‘#clickme’).click(function(){

alert($(this).text());

alert(this.innerText);

});

});

-this and $(this) references the same element but the difference is that “this” is used in traditional way but when “this” is used with $() then it becomes a jQuery object on which we can use the functions of jQuery.

-In the example given, when only “this” keyword is used then we can use the jQuery text() function to get the text of the element, because it is not jQuery object. Once the “this” keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.

 7. Is window.onload is different from document.ready()?

The window.onload() is Java script function and document.ready() is jQuery event which are called when page is loaded.

- The difference is that document.ready() is called after the DOM is loaded without waiting for all the contents to get

loaded. While window.onload() function waits until the contents of page is loaded.

- Suppose there is very large image on a page, at that time window.onload() will wait until that image is loaded totally.

- So while using the window.onlaod() function the execution will be slow, but the document.ready() will not wait until the

image is loaded.

8. What is Chaining in jQuery?

Ans: Chaining is very powerful feature of jQuery.

- Chaining means specifying multiple function and/or selectors to an element.

- Examine the below example

$(document).ready(function(){

$('#mydiv').css('color', 'blue');

$('#mydiv').addClass('myclass');

$('#mydiv').fadeIn('fast');

}

By using chaining we can write above code as follows

$(document).ready(function(){

$('#mydiv').css('color', 'blue').addClass('myclass').fadeIn('fast');

});

-Advantage of chaining is that it makes your code simple and simple to manage.

9. Use of jQuery ajax() method.?

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

Syntax:

$.ajax({name:value, name:value, ... })

The parameters specifies one or more name/value pairs for the AJAX request.

A vast number of options are available,with the most common options of a request being type, url, complete, dataType,error, and success.

10. Use jQuery load() Method?

Ans:The load() method loads data from a server and puts the returned data into the selected element.

Syntax:

$(selector).load(URL,data,callback);

The required URL parameter specifies the URL you wish to load.

The optional data parameter specifies a set of querystring key/value pairs to send along with the request.

The optional callback parameter is the name of a function to be executed after the load() method is completed.

11. jQuery - AJAX get() and post() Methods?

The $.get() method requests data from the server with an HTTP GET request.

Syntax:

$.get(URL,callback);

The $.post() method requests data from the server using an HTTP POST request.

Syntax:

$.post(URL,data,callback);

12. The jQuery noConflict() Method?

The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.

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.

Example:

var jq = $.noConflict();

jq(document).ready(function(){

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

    jq("p").text("jQuery is still working!");

  });

});

13. AJAX Events:

ajaxComplete(function)

 Attaches a function to be executed when an AJAX request is completed.

ajaxError(function)

Attaches a function to be executed when an AJAX request fails.

ajaxSend(function)

Attaches a function to be executed before an AJAX request is sent.

ajaxStart(function)

Attaches a function to be executed when an AJAX request begins (if not already

active).

ajaxStop(function)

Attaches a function to be executed when an AJAX request ends.

ajaxSuccess(function)

 Attaches a function to be executed when an AJAX request has completed.

14. What is .siblings() method in jQuery?

When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.

Syntax : .siblings( [selector])

“selector” is the selector expression which specify the matched elements.

For example

<ul>

<li> item 1 </li>

<li id=”second_item”> item 2 </li>

<li class=”myitem”> item 3 </li>

<li class=”myitem”> item 4 </li>

</ul>

Now we want to find the siblings of the element of id “second_item” and change the text color to Blue :

$(‘li.second_item’).siblings().css(‘color’,’blue’);

 15. Explain width() vs css(‘width’)?

In jQuery, there are two way to change the width of an element.

One way is using .css(‘width’) and other way is using .width().

For example

$(‘#mydiv’).css(‘width’,’300px’);

$(‘#mydiv’).width(100);

The difference in .css(‘width’) and .width() is the data type of value we specify or return from the both functions.

In .css(‘width’) we have to add “px” in the width value while in .width() we don’t have to add.

When you want to get the width of “mydiv” element then .css(‘width’) will return ‘300px’ while .width() will return only integer value 300.

16. Name some of the methods of JQuery used to provide effects?

Some of the common methods are :

1. Show()

2. Hide()

3. Toggle()

4. FadeIn()

5. FadeOut()

17. css methods:

css(property)

Returns the specified CSS property value from the first selected element,

 for example:

$(‘div’).css(‘background-color’)

css(properties)

Sets the specified CSS properties. The properties argument is defined as an object literal of key, value pairs,

for example:

$(‘div’).css({backgroundColor: ‘red’,marginLeft: ‘10px’});

css(property, value)

Sets the specified CSS property value

 for example:

$(‘div’).css(‘background’, ‘red’);

18.       What is the use of animate method in jQuery ?

 animate() method performs a custom animation of a set of CSS properties.
             The animate() method allows us to create animation effects on any numeric CSS property.

            

eg : $("#targetDiv").animate({

            opacity: 0.4,                                        

             marginLeft: "0.6in",

            fontSize: "3em",

            borderWidth: "10px"},         1500);

19. What are Events in jQuery?

All the visitors actions that a web page can respond to are called events. An event represents the precise moment when something happens.

Examples: .moving a mouse over an element .selecting a radio button The term "fires" is often used with events.

Example: "The click event fires the moment if you click the mouse".

20.What is the use of  "event.preventDefault"  function in Jquery?

event.preventDefault function in Jquery is used to prevent the default behaviour of the event in question.

For eaxmple if you want to prevent the default behaviour of click event then use the following code $("div").click(function(event){ event.preventDefault(); $(this).hide("slow"); }); Now if you will click on the div it will disapper slowly.

21. What is jQuery Syntax For Event Methods and give an example?

            Most DOM events have an equivalent jQuery method.

Example:

 Step 1: To assign a click event to all paragraphs on a page, you can do this: $("p").click();

 Step 2: The next step is to define what should happen when the event fires.

            You must pass a function to the event: $("p").click(function(){ // action goes here!! });