Basic JQuery Interview Questions

Is jQuery a library for client scripting or server scripting?
Ans: Client scripting

Is jQuery a W3C standard?
Ans: No

What are jQuery Selectors?
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.
• jQuery Selectors are used to select one or a group of HTML elements from your web page.
• jQuery support all the CSS selectors as well as many additional custom selectors.
• jQuery selectors always start with dollar sign and parentheses: $()
• There are three building blocks to select the elements in a web document.



The jQuery html() method works for both HTML and XML documents?
Ans: It only works for HTML.

Which sign does jQuery use as a shortcut for jQuery?
Ans: $(dollar) sign.

What does $("div") will select?
Ans: It will select all the div element in the page.

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

What is the name of jQuery method used for an asynchronous HTTP request?
Ans: jQuery.ajax()

What is .siblings() method in jQuery?
Ans:
• When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.
• We filter the elements fetched by an optional selector.
• Syntax : .siblings( [selector])
• “selector” is the selector expression which specify the matched elements.

What is the use of jQuery.data()?
Ans:
• jQuery.data() is used to set/return arbitrary data to/from an element.
• Syntax: jQuery.data(element, key, value)
• “element” is the DOM element to which the data is associated.
• “key” is an arbitrary name of the piece of data.
• “value” is value of the specified key.
• Suppose we want to set the data for a span element:
jQuery.data(span, “item”, { val1: 10, val2: "myitem" });
If we want to retrieve the data related to div element and set it to label’s data:
$("label:val1").text(jQuery.data(div, "item").val1);
$("label:val2").text(jQuery.data(div, "item").val2);

Explain bind() vs live() vs delegate() methods.
Ans:
-The bind() method will not attach events to those elements which are added after DOM is loaded while live() and delegate() methods attach events to the future elements also.
-The difference between live() and delegate() methods is live() function will not work in chaining. It will work only on an selector or an element while delegate() method can work in chaining.
For example:
$(document).ready(function(){
      $("#myTable").find("tr").live("click",function(){
            alert($(this).text());
      });
});

Above code will not work using live() method. But using delegate() method we can accomplish this.
$(document).ready(function(){
      $("#dvContainer")children("table").delegate("tr","click",function(){
            alert($(this).text());
      });
});

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.

What is the use of param() method.
• The param() method is used to represent an array or an object in serialize manner.
• While making an ajax request we can use these serialize values in the query strings of URL.
• Syntax: $.param(object | array, boolValue)
• “object | array” specifies an array or an object to be serialized.
• “boolValue” specifies whether to use the traditional style of param serialization or not.

What is jQuery.holdReady() function?
-By using jQuery.holdReady() function we can hold or release the execution of jQuery’s ready event.
-This method should be call before we run ready event.
-To delay the ready event, we have to call
jQuery.holdReady(true);
-When we want to release the ready event then we have to call
jQuery.holdReady(false);
-This function is helpful when we want to load any jQuery plugins before the execution of ready event.
For example
$.holdReady(true);
$.getScript("xyzplugin.js", function() {
    $.holdReady(false);
});

Explain .empty() vs .remove() vs .detach().
-.empty() method is used to remove all the child elements from matched elements.
-.remove() method is used to remove all the matched element. This method will remove all the jQuery data associated with the matched element.
-.detach() method is same as .remove() method except that the .detach() method doesn’t remove jQuery data associated with the matched elements.
-.remove() is faster than .empty() or .detach() method.
Syntax:
$(selector).empty();
$(selector).remove();
$(selector).detach();

What is difference between prop and attr?
• In jQuery both prop() and attr() function is used to set/get the value of specified property of an element.
• The difference in both the function is that attr() returns the default value of the property while the prop() returns the current value of the property.
For example

$('input').prop('value', 'Changed Value');

-.attr('value') will return 'My Value'
-.prop('value') will return 'Changed Value'