21⟩ How to stop the bubbling of an event to parent elements using jQuery?
The stopPropagation() method of Event object stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
JQuery Programmer
Home Client Side Scripting JQuery Programmer
“JQuery Programmer Frequently Asked Questions in various JQuery Developer job Interviews by interviewer. The set of questions here ensures that you offer a perfect answer posed to you. So get preparation for your new job hunting”
154 JQuery Programmer Questions And Answers
22⟩ What is CDN?
CDN is abbreviated as Content Distribution network and it is said to be a group of companies in different location with network containing copies of data files to maximize bandwidth in accessing the data.
23⟩ What are the features of jQuery, has been used in web applications?
jQuery uses features like Sliding, File uploading and accordian in web applications.
24⟩ What is the difference between size and length of jQuery?
Size and length both returns the number of element in an object. But length is faster than the size because length is a property and size is a method.
25⟩ How do you select element by ID in jQuery?
To select element use ID selector. We need to prefix the id with "#" (hash symbol). For example, to select element with ID "txtName", then syntax would be,
$('#txtName')
26⟩ Why there are two different version of jQuery library?
jQuery library comes in 2 different versions.
► Development
► Production/Deployment
The development version is quite useful at development time as jQuery is open source and if you want to change something then you can make those changes in development version. But the deployment version is minified version or compressed version so it is impossible to make changes in it. Because it is compressed, so its size is very less than the production version which affects the page load time.
27⟩ Explain the animate function?
► The animate function is used to apply the custom animation effect to elements.
Syntax:
$(selector).animate({params}, [duration], [easing], [callback])
1. "param" defines the CSS properties on which you want to apply the animation.
2. "duration" specify how long the animation will run. It can be one of following values : "slow", "fast", "normal" or milliseconds.
3. "easing" is the string which specify the function for the transition.
4. "callback" is the function which we want to run once the animation effect is complete.
For example
<div id="clickToAnimate">
Click Me
</div>
<div id="mydiv" style="width:200px; height:300px; position: relative; right: 20px;">
</div>
Following is the jQuery to animate opacity, left offset, and height of the mydiv element
$('# clickToAnimate').click(function()
{
$('#book').animate({opacity: 0.30,left: '+=20',height: 'toggle'}, 3000, function()
{
// run after the animation complete.
});
});
28⟩ How to attach a function to be executed whenever an AJAX request completes using jQuery?
The ajaxComplete( callback ) method can be used to register a callback to be executed whenever an AJAX request completes.
29⟩ Explain the each() function?
The each() function specify the function to be called for every matched element.
Syntax :
$(selector).each(function (index, element))
1. "index" is the index position of the selector.
2. "selector" specifies the current selector where we can use "this" selector also.
3. 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())
});
});
30⟩ How to search for descendent elements that match the specified selectors using jQuery?
The find( selector ) method searches for descendent elements that match the specified selectors.
31⟩ What does $("div.parent") will select?
All the div element with parent class.
32⟩ What is the use of param() method?
1. The param() method is used to represent an array or an object in serialize manner.
2. While making an ajax request we can use these serialize values in the query strings of URL.
3. Syntax: $.param(object | array, boolValue)
4. "object | array" specifies an array or an object to be serialized.
5. "boolValue" specifies whether to use the traditional style of param serialization or not.
For example:
personObj=new Object();
empObject.name="Arpit";
empObject.age="24";
empObject.dept="IT";
$("#clickme").click(function()
{
$("span").text($.param(empObject));
});
It will set the text of span to "name=Arpit&age=24&dep=IT"
33⟩ What is the difference between .empty(), .remove() and .detach() methods in jQuery?
All these methods .empty(), .remove() and .detach() are used for removing elements from DOM but they all are different.
.empty(): This method removes all the child element of the matched element where remove() method removes set of matched elements from DOM.
.remove(): Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.
.detach(): This method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
34⟩ 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.
35⟩ How JavaScript and jQuery are different?
JavaScript is a language While jQuery is a library built in the JavaScript language that helps to use the JavaScript language.
36⟩ Whether C# code behind can be called from jQuery?
Yes, we can call C# code behind from jQuery.
37⟩ How to get attributes of an element using jQuery?
The attr() method can be used to fetch the value of an attribute from the first element in the matched set.
38⟩ Explain what is the use of jQuery.data()?
1. jQuery.data() is used to set/return arbitrary data to/from an element.
2. Syntax: jQuery.data(element, key, value)
3. "element" is the DOM element to which the data is associated.
4. "key" is an arbitrary name of the piece of data.
5. "value" is value of the specified key.
6. 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);
39⟩ How to set the width of an element using jQuery?
The width( val ) method sets the CSS width of every matched element.
40⟩ Which is fast document.getElementByID('txtName') or $('#txtName')?
Native JavaScipt is always fast. jQuery method to select txtName "$('#txtName')" will internally makes a call to document.getElementByID('txtName'). As jQuery is written on top of JavaScript and it internally uses JavaScript only So JavaScript is always fast.
