Sunday, June 21, 2015

Interview Jquery Question and Annswer

The selectors are used to select the HTML elements from your HTML page. The selector can be css selector or custom selector. The selectors are start with $ and end with ().

There are three types of selectors as given below.

1.       Selector can be used by tag name. i.e. $(div)
2.       Selector can be used by Ids. i.e. $("#ids")
3.       Selector can be used by css class. i.e. $(".classname")

The selectors can be look like below.

·         $(selector).fadeIn()
·         $(selector).fadeOut()
·         $(selector).fadeTo()

What are different between Ids selector and class selector?

When we need to select one and only one element that time use the #Ids selector and its return only selected #Id.

When we need to select the group of elements that time we used to .class selectors and its return the all active groups of .class.

When we don't have #Ids and .class selectors that time we used tag selector.

What is $(document).ready() function? Why we use it?

The $(document).ready() function is  use to execute the code when the DOM is fully loaded.  We can say that $(document).ready() is an event which is fire when DOM is fully loaded or ready to use.

What is main difference between the $(document).ready() and window.onload()?

The main differences are the $(document).ready() event called when your HTML document is loaded and DOM is ready and it's don't wait for your content and images etc. fully loaded but  window.onload()(<body onload="func();">) event is  wait for your content and images etc. fully loaded.

The $(document).ready() function is called only one time when your page is loading not for partial page rendering in that case you need to use pageLoad() function.



.click() vs .on() methods ?

The .click() events are only attach to fully loaded elements and can't use for dynamic added elements and utilize more memory and create event handler for each child. The .click() requires to event handler for all element which are attached. Its produce the over head at time of DOM manipulation.

The .on() events are used for both dynamic added elements and its consume less memory then .click() events. It allow to create the event handler which elements are added dynamically ways.

The .on() will work for current and future elements and it a replacement of the bind(), live() and delegate() methods.

The Example as given below.

for .click() events :
<ul id="click">
    <li>List items</li>
</ul>


for on() events :
<ul id="on">
    <li>List items</li>
</ul>

$('#click li').click(function () {
    $(this).parent().append($('<li>New List items</li>'));
});


$('#on').on('click', 'li', function () {
    $(this).parent().append($('<li>New List items</li>'));
});

For output go to link http://jsfiddle.net/AJRw3/

bind() vs. live() vs. delegate() methods?

The .bind() method will not attach the events which elements are bind after the DOM fully loaded.

The .live() and delegate() methods attach the events which are dynamically added in future.

Only difference between .live() and delegate(), the .live() is not working for chaining elements but delegate() will work for chaining elements.

$(this) vs ‘this’?

The ‘this’ is a DOM elements. When we passing ‘this’ to DOM elements to $() jQuery constructor function as a parameter that time It look like $(this) and it have the accessing power jQuery.

What is the use of param()?

The param() method is a serialized representation of an array, objects and Ajax requests. The function is used to internally to convert the element values to serialized strings.

.empty() vs .remove() vs .detach()?

The .empty() method is used to removed the all set of matched child elements.
The .remove() method is used to all the set of matched elements(parent and child both) and the .remove() method is more faster then . empty() method.
The .detach() method is same as .remove() method and used to all the set of matched elements.

The detach() keep the track of the last detached element and it can be reattached but remove() does not keep reference of the last removed elements.
The Syntax look like below example.

$(selector).empty();
$(selector).remove();
$(selector).detach();

What is difference between prop() and attr()?

Both are used to get and set the value for a specific property of an elements but attr() returns the default value of a property and prop() returns current value of specific property.

The example look like below.

.attr('value') : It will returns the my value.
.prop('value') : It will returns the Changed Value.

What is resize() function?

The resize() function is work with window and it used for resize the browser.
Syntax :  $(window).resize(function() {});

What is each() function?

the .each() function is a function that used to call for every matched elements.
Syntax :  $(selector).each(function (key, val));

append vs. appendTo in jQuery?
The append() and appendTo() methods perform same task but only different in writing syntax.

The append() method append the parameter to the object and The appendTo() method append the object to the parameter that you are working on.

jQuery work for both HTML and XML documents?

No! Its work only on HTML not for XML documents.

What type of effects used in jQuery?

 Show(), Hide(), Toggle(), FadeIn() and FadeOut()

No comments:

Post a Comment