{"id":10375,"date":"2016-02-02T15:23:31","date_gmt":"2016-02-02T13:23:31","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=10375"},"modified":"2017-12-21T15:35:06","modified_gmt":"2017-12-21T13:35:06","slug":"jquery-interview-questions-answers","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-interview-questions-answers\/","title":{"rendered":"81 jQuery Interview Questions and Answers \u2013 The ULTIMATE List"},"content":{"rendered":"

Without a doubt, jQuery has given a much needed boost to JavaScript, a language so useful but equally underrated at times. Before jQuery came into the picture, we used to write lengthy JavaScript code not just for bigger but even for smaller functionality. That code was at times both difficult to read and maintain. Having written JavaScript before using this excellent library, we realized the true power of jQuery.<\/p>\n

This article has been designed specially to get you acquainted with the nature of questions you may encounter during your interview. Normally questions start with some basic concept of the subject and later continue based on further discussion and what the candidate answers. I hope these questions serve as a quick revision to provide strength to your skills.
\n 
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

\n

Table Of Contents<\/strong><\/h3>\n
\n
1. jQuery: An Overview<\/a><\/dt>\n
\n
\n
1.1 What is jQuery?<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
1.2 Why you should be using jQuery?<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
1.3 jQuery Selectors<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
1.4 Basic Workflow<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
1.5 The jQuery Family<\/a><\/dt>\n<\/dl>\n<\/dd>\n
2. Introductory Questions<\/a><\/dt>\n
3. Methods\/Functions Questions<\/a><\/dt>\n
\n
\n
3.1 Similar Methods Comparison<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
3.2 Function Explanations<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
3.3 What is the method we use to…?<\/a><\/dt>\n<\/dl>\n<\/dd>\n
4. Code Questions<\/a><\/dt>\n
\n
\n
4.1 Given Code Questions<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
4.2 Writing Code Questions<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n
5. AJAX Related Questions<\/a><\/dt>\n
\n
\n
5.1 General AJAX Questions<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
5.2 Technical AJAX Questions<\/a><\/dt>\n<\/dl>\n<\/dd>\n
6. Questions on Important Concepts<\/a><\/dt>\n
7. General Questions<\/a><\/dt>\n
8. To Conclude<\/a><\/dt>\n<\/dl>\n<\/div>\n

<\/a>1. jQuery: An Overview<\/strong><\/h2>\n

<\/a>1.1 What is jQuery?<\/strong><\/h3>\n

JQuery is a cross-browser lightweight JavaScript library. In simple words jQuery has been designed to make navigation to any element easier, or adding\/invoking event handlers on your HTML page and also simplify the way you access the elements in your web pages, provide help in working with client-side events, enable visual effects like animation, and make it easier to use Ajax in your applications.<\/p>\n

A quick look at what is available in jQuery:<\/p>\n

\u2022 Cross-browser support and detection.
\n\u2022 AJAX functions
\n\u2022 CSS functions
\n\u2022 DOM manipulation
\n\u2022 DOM transversal
\n\u2022 Attribute manipulation
\n\u2022 Event detection and handling.
\n\u2022 JavaScript animation
\n\u2022 Hundreds of plugins for pre-built user interfaces, advanced animations, form validation, etc.
\n\u2022 Expandable functionality using custom plugins.<\/p>\n

\"jquery-qa-1\"<\/a>
jQuery – Write Less, Do More!<\/figcaption><\/figure>\n

jQuery is fast, lightweight and feature-rich client side JavaScript Library\/Framework which helps in to traverse HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect.<\/p>\n

<\/a>1.2 Why you should be using jQuery?<\/strong><\/h3>\n

Based on the manipulation of the HTML DOM (Document Object Model) and designed to simplify the client-side scripting of HTML, jQuery incorporates parts of HTML and CSS. Thousands of companies and individuals are on the jQuery bandwagon, and you should be, too.<\/p>\n

1. jQuery promotes simplicity<\/strong><\/h4>\n

Developers find jQuery intuitive and easy to learn — this library is built on shorter, simpler code, after all. With simple syntax and open coding standards, developers can shorten the time it takes to deploy an application or site.<\/p>\n

In addition, developers don’t have to be experts in programming or Web design to create great styles for their sites. Any developer who has spent hours coding and testing CSS files will surely appreciate the simple implementation that jQuery brings to the table.<\/p>\n

2. jQuery elements display even when JavaScript is disabled<\/strong><\/h4>\n

If Adobe Flash isn’t installed on any given browser, certain parts of the page may render incorrectly, if they render at all. This is not only unpleasant for the user; it forces developers to spend extra time coding for the browsers that lack the Flash plug-in, which adds to development time.<\/p>\n

Not so with jQuery. Manipulating the HTML DOM has become the most widely accepted practice of manipulating a Web page so content will be rendered even if JavaScript is disabled in the browser. Since the HTML DOM is always present, there’s no more worrying about browser settings either.<\/p>\n

3. jQuery pages load faster<\/strong><\/h4>\n

Google and other search engines using page load time as one of the many factors affecting SEO. For this, and many other reasons, every developer should strive to make code as light and concise as possible.<\/p>\n

The best way to do this is to reduce the size of your code. If your site is coded with an HTML and CSS base, you can easily make uniform adjustments to your code that will reduce the size. Like CSS, jQuery files are generally stored separately from the Web page itself. This lets developers make modifications across the entire site through one central repository instead of search through folder structures. This is a core benefit of CSS coding, and it is a proven success.<\/p>\n

In addition, jQuery gives you the option of loading div tags only when you need them. If you are taking measures to improve the speed of your website, then you may consider loading only the necessary div tags needed for your page load event. This way, you can display only what a user needs to see right away and have the rest of your division elements load as they are needed.<\/p>\n

Moreover<\/strong><\/h4>\n

\u2022 The price is right. The jQuery library is free.
\n\u2022 It’s light. Since jQuery pushes content to the client, it therefore reduces the wait time for server response.
\n\u2022 It works anywhere. HTML5 is cross-browser compatible-it will work on any browser, mobile phone or tablet.
\n\u2022 There’s a low learning curve. Since it’s based on plain old JavaScript, developers can learn jQuery fast.
\n\u2022 Finally, jQuery is SEO friendly and CSS3 compliant.<\/p>\n

<\/a>1.3 jQuery Selectors<\/strong><\/h3>\n

jQuery selectors are one of the most important parts of the jQuery library.<\/p>\n

jQuery selectors allow you to select and manipulate HTML element(s). They are used to “find” (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $()<\/code>.<\/p>\n

\"jquery-qa-3\"<\/a>
An example of how a DOM element can be selected using jQuery!<\/figcaption><\/figure>\n

\u2022 All Selectors<\/strong><\/h4>\n

$(\"*\")<\/code> \/\/ find everything (Selectors return a pseudo-array of jQuery elements)<\/p>\n

\u2022 Basic Selectors<\/strong><\/h4>\n

1. By Tag:
\n$(\"h1\")<\/code> \/\/ <h1>Web Code Geeks<\/h1><\/p>\n

2. By ID:
\n$(\"#username\")<\/code> \/\/ Pete<\/span><\/p>\n

3. By Class:
\n$(\".menu\")<\/code><\/p>\n

\u2022 More Precise Selectors<\/strong><\/h4>\n

$(\"div.main\")<\/code> \/\/ tag and class
\n$(\"table#main\")<\/code> \/\/ tag and id<\/p>\n

\u2022 Combination of Selectors<\/strong><\/h4>\n

$(\"#container, .f_left\")<\/code> \/\/ find by id + by class
\n$(\"h1, h2, h3, div.container\")<\/code> \/\/ multiple combination<\/p>\n

\u2022 Hierarchy Selectors<\/strong><\/h4>\n

$(\"table td\")<\/code> \/\/ descendants
\n$(\"tr > td\")<\/code> \/\/ children
\n$(\"label + input\")<\/code> \/\/ next
\n$(\"#content ~ div\")<\/code> \/\/ siblings<\/p>\n

\u2022 Selection Index Filters <\/strong><\/h4>\n

$(\"tr:first\")<\/code> \/\/ first element
\n$(\"tr:last\")<\/code> \/\/ last element
\n$(\"tr:lt(2)\")<\/code> \/\/ index less than
\n$(\"tr:gt(2)\")<\/code> \/\/ index gr. than
\n$(\"tr:eq(2)\")<\/code> \/\/ index equals<\/p>\n

\u2022 Attribute Filters<\/strong><\/h4>\n

$(\"div[id]\")<\/code> \/\/ has attribute
\n$(\"div[dir='rtl']\")<\/code> \/\/ equals to
\n$(\"div[id^='name]\")<\/code> \/\/ starts with
\n$(\"div[id$='main]\")<\/code> \/\/ ends with
\n$(\"a[href*='corner]\")<\/code> \/\/ contains<\/p>\n

\u2022 Form Selectors<\/strong><\/h4>\n

$(\"input:checkbox\")<\/code> \/\/ checkboxes
\n$(\"input:radio\")<\/code> \/\/ radio buttons
\n$(\":button\")<\/code> \/\/ buttons
\n$(\":text\")<\/code> \/\/ text inputs<\/p>\n

To find out more about selectors, have a look at a more detailed article of ours about selectors here<\/a>.<\/p>\n

<\/a>1.4 Basic Workflow<\/strong><\/h3>\n

When you use JQuery, you typically follow these steps of action:<\/p>\n

1. Wait for the page to be ready.
\n2. Select some HTML elements to modify.
\n3. Traverse the selected HTML elements.
\n4. Modify the HTML element attributes, CSS styles etc.
\n5. Add listener functions, e.g. click() or wait for a JQuery effect to finish etc.<\/p>\n

\/\/ 1. Wait for the page to be ready.\r\n$(document).ready(function() {\r\n\r\n\r\n\/\/ 2. select the HTML element with id 'theDiv'\r\nvar theDiv = $('#theDiv');\r\n\r\n\/\/ 3. since only 1 element was selected, no traversal is necessary\r\n\r\n\/\/ 4. modify the HTML elements CSS attributes\r\ntheDiv.css(\"border\", \"1px solid black\");\r\n\r\n\/\/ 5. add a click-listener function to it.\r\ntheDiv.click(function() {\r\n    $('#theDiv').show(300);\r\n});\r\n}\r\n<\/pre>\n
First the example calls jQuery’s $(document).ready()<\/code> function, passing a function as parameter. The function passed as parameter is executed when the page is ready.<\/p>\n
Second, the example selects the HTML element with the id “theDiv”. It does so by calling JQuery’s selection function, the $()<\/code> function, passing a selection string as parameter.<\/p>\n
Third, the example modifies the CSS attribute “border” of the HTML element. This is done by calling the css()<\/code> function on the selected HTML element.<\/p>\n
Fourth, the example adds a click listener function to the HTML element. It does so by calling the click()<\/code> function on the selected element. When the HTML element is clicked, this function is executed.<\/p>\n
<\/a>1.5 The jQuery Family<\/strong><\/h3>\n
You might get surprised, but jQuery is not alone. What that means is that along with the development of jQuery, there are also similar libraries initialized by the very same principles and core (Javascript) which are focused in more particular applications. The graphic below gives you a short introduction to each of them!<\/p>\n
\"jquery-qa-2\"<\/a>
The jQuery Family<\/figcaption><\/figure>\n
<\/a>2. Introductory Questions<\/strong><\/h2>\n
1. What is jQuery?<\/strong><\/h4>\n
jQuery is a fast, lightweight and feature-rich client side JavaScript Library\/Framework which helps in to traverse HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect. It is one of the most popular client side library and as per a survey it runs on every second website.<\/p>\n
2. How JavaScript and jQuery are different?<\/strong><\/h4>\n
jQuery is not a programming language but a well written JavaScript code. It is a library\/framework built with Javascript. It is very popular because it (nearly universally) abstracts away cross-browser compatibility issues and it emphasises unobtrusive and callback-driven Javascript programming. Javascript is the core programming language.<\/p>\n
3. What is the advantage of using the minimized version of jQuery?<\/strong><\/h4>\n
Efficiency of web page increases when minimized version of jQuery is used. jQuery’s min.js file will be more than 50% less than the normal js file. Reduction in the file size makes the web page faster. They are both the same functionally but the .min one has all unnecessary characters removed in order to make the file size smaller.<\/p>\n
4. What are all the ways to include jQuery in a page?<\/strong><\/h4>\n
Following are the ways to include jQuery in a page:<\/p>\n
\u2022 Local copy inside script tag
\n\u2022 Remote copy of jQuery.com
\n\u2022 Remote copy of Ajax API
\n\u2022 Local copy of script manager control
\n\u2022 Embedded script using client script object<\/p>\n
5. What is $() in jQuery library?<\/strong><\/h4>\n
The $()<\/code> function is an alias of jQuery()<\/code> function. $()<\/code> function is used to wrap any object into jQuery object, which then allows you to call various method defined jQuery object. You can even pass a selector string to $()<\/code> function, and it will return jQuery object containing an array of all matched DOM elements.<\/p>\n
6. Can we use our own specific character in the place of $ sign in jQuery?<\/strong><\/h4>\n
Yes. It is possible using jQuery.noConflict()<\/code> method. If we need to use another JavaScript library alongside jQuery, we return control of $ back to the other library with a call to $.noConflict()<\/code>. Old references of $ are saved during jQuery initialization; noConflict()<\/code> simply restores them.<\/p>\n
Find out more on this method here<\/a>.<\/p>\n
7. What is AJAX in jQuery?<\/strong><\/h4>\n
AJAX stands for \u201cAsynchronous JavaScript and XML\u201d. AJAX is about exchanging data with a server, without reloading the whole page. It is a technique for creating fast and dynamic web pages.
\n$.ajax ()<\/code> is JQuery\u2019s core method for creating Ajax requests. Some jQuery AJAX methods are:<\/p>\n
$.ajax()<\/code> – Performs an async AJAX request.
\n$.get()<\/code> – Loads data from a server using an AJAX HTTP GET request.
\n$.post()<\/code> – Loads data from a server using an AJAX HTTP POST request.<\/p>\n
8. What is $(document).ready() function? Why should you use it?<\/strong><\/h4>\n
This is one of the most important and frequently asked jQuery Interview question. The ready()<\/code> function is used to execute code when document is ready for manipulation. jQuery allows you to execute code, when DOM is fully loaded i.e. HTML has been parsed and DOM tree has been constructed. Main benefit of $(document).ready()<\/code> function is that, it works in all browsers, jQuery handles cross browser difficulties for you.<\/p>\n
Read more about the .ready()<\/code> function here<\/a>.<\/p>\n
9. Tell the difference between JavaScript window.onload event and jQuery ready function?<\/strong><\/h4>\n
Main difference between JavaScript onload<\/code> event and jQuery ready<\/code> function is that former not only waits for DOM to be created but also waits until all external resources are fully loaded including heavy images, audios and videos. If loading images and media content takes a lot of time, the user can experience significant delay on execution of code defined in window.onload<\/code> event.<\/p>\n
On the other hand jQuery ready()<\/code> function only waits for the DOM tree, and does not wait for images or external resource loading, which means faster execution. Another advantage of using jQuery $(document).ready()<\/code> is that you can use it multiple times in your page, and browser will execute them in the order they appear in HTML page, as opposed to onload<\/code> technique, which can only be used for a single function. Given this benefits, it’s always better to use jQuery ready()<\/code> function than JavaScript window.onload<\/code> event.<\/p>\n
10. What are jQuery Events?<\/strong><\/h4>\n
Events are actions performed on a specific condition that are used for dynamic web pages. When we perform these actions on an HTML page, we can do whatever we want. We use some event handlers to perform the action. Some important handlers are bind()<\/code>, unbind()<\/code>, blur()<\/code>, off()<\/code>, hover()<\/code>, on()<\/code>, one()<\/code>, ready()<\/code>, trigger()<\/code> etc.<\/p>\n
11. What are jQuery plugins and what is the advantage of using a plugin?<\/strong><\/h4>\n
A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods. jQuery plugins are quite useful as its piece of code which is already written by someone and re-usable, which saves your development time.<\/p>\n
12. Mention some of the interactions available in the jQuery UI library.<\/strong><\/h4>\n
We can use interactions for basic mouse-based behaviours to any element. Examples of Interactions are the following:<\/p>\n
\u2022 Draggable
\n\u2022 Droppable
\n\u2022 Resizable
\n\u2022 Selectable
\n\u2022 Sortable<\/p>\n
\"jquery-qa-4\"<\/a>
jQuery UI Interactions Branch<\/figcaption><\/figure>\n
<\/a>3. Methods\/Functions Questions<\/strong><\/h2>\n
<\/a>3.1 Similar Methods Comparison<\/strong><\/h3>\n
13. What is the difference between .empty(), .remove() and .detach() methods in jQuery?<\/strong><\/h4>\n
All these methods .empty()<\/code>, .remove()<\/code> and .detach()<\/code> are used for removing elements from DOM but they all are different.<\/p>\n
.empty()<\/code>: This method removes all the child element of the matched element while remove()<\/code> method removes set of matched elements from DOM.<\/p>\n
.remove()<\/code>: We use .remove()<\/code> when we 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.<\/p>\n
.detach()<\/code>: This method is the same as .remove()<\/code>, except that .detach()<\/code> 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.<\/p>\n
14. What is the difference between bind() and live() method in jQuery?<\/strong><\/h4>\n
The binding of event handlers are the most confusing part of jQuery for many developers working on jQuery projects. Many of them unsure of which is better to use. In this article we will see the main differences between Bind and Live methods in jQuery.<\/p>\n
Bind() Method<\/strong><\/h5>\n
The bind method will only bind event handlers for currently existing items. That means this works for the current element.<\/p>\n
$(document).ready(function () {   \r\n   $('p').bind('click', function () {  \r\n      alert(\"Example of Bind Method\");  \r\n      e.preventDefault();  \r\n   });   \r\n});  \r\n<\/pre>\n
Live() Method<\/strong><\/h5>\n
The Live method can bind event handlers for currently existing items or future items.<\/p>\n
$(document).ready(function() {  \r\n    $('P').live('click', function() {  \r\n        alert(\"Example of live method\");  \r\n        e.preventDefault();  \r\n    });  \r\n    $('body').append(''); });\r\n<\/pre>\n
15. A bigger picture comparison of .bind() vs .live() vs .delegate() vs .on()?<\/strong><\/h4>\n
All these 4 jQuery methods are used for attaching events to selectors or elements. But they all are different from each other.<\/p>\n
.bind()<\/code>: This is the easiest and quick method to bind events. But the issue with bind() is that it doesn’t work for elements added dynamically that matches the same selector. bind() only attach events to the current elements not future element. Above that it also has performance issues when dealing with a large selection.<\/p>\n
.live()<\/code>: This method overcomes the disadvantage of bind(). It works for dynamically added elements or future elements. Because of its poor performance on large pages, this method is deprecated as of jQuery 1.7 and you should stop using it. Chaining is not properly supported using this method.<\/p>\n
.delegate()<\/code>: The .delegate() method behaves in a similar fashion to the .live() method, but instead of attaching the selector\/event information to the document, you can choose where it is anchored and it also supports chaining.<\/p>\n
.on()<\/code>: Since live was deprecated with 1.7, so new method was introduced named “.on()”. This method provides all the goodness of previous 3 methods and it brings uniformity for attaching event handlers.<\/p>\n
16. What is difference between prop and attr?<\/strong><\/h4>\n
attr()<\/code>: Gets the value of an attribute for the first element in the set of matched elements. Whereas, .prop()<\/code>: will get the value of a property for the first element in the set of matched elements.<\/p>\n
Attributes carry additional information about an HTML element and come in name=\"value\"<\/code> pairs. Where Property is a representation of an attribute in the HTML DOM tree. Once the browser parse your HTML code, corresponding DOM node will be created which is an object thus having properties.<\/p>\n
attr()<\/code> gives you the value of an element as it was defined in the html on page load. It is always recommended to use prop()<\/code> to get values of elements which is modified via javascript\/jquery, as it gives you the original value of an element’s current state.<\/p>\n
17. What is the difference between event.stopPropagation and event.stopImmediatePropagation?<\/strong><\/h4>\n
event.stopPropagation()<\/code> allows other handlers on the same element to be executed, while event.stopImmediatePropagation()<\/code> prevents every event from running. For example, see below jQuery code block:<\/p>\n
$(\"p\").click(function(event){\r\n  event.stopImmediatePropagation();\r\n});\r\n$(\"p\").click(function(event){\r\n  \/\/ This function won't be executed\r\n  $(this).css(\"background-color\", \"#f00\");\r\n}); \r\n<\/pre>\n
If event.stopPropagation<\/code> was used in previous example, then the next click event on p<\/code> element which changes the css will fire, but in case event.stopImmediatePropagation()<\/code>, the next p<\/code> click event will not fire.<\/p>\n
18. Explain width() vs css(\u2018width\u2019)?<\/strong><\/h4>\n
In jQuery, there are two way to change the width of an element.
\nOne way is using .css(\u2018width\u2019)<\/code> and other way is using .width()<\/code>.<\/p>\n
For example:<\/p>\n
$(\u2018#mydiv\u2019).css(\u2018width\u2019,\u2019300px\u2019);\r\n$(\u2018#mydiv\u2019).width(100);\r\n<\/pre>\n
The difference in .css(\u2018width\u2019)<\/code> and .width()<\/code> is the data type of value we specify or return from the both functions. In .css(\u2018width\u2019)<\/code> we have to add \u201cpx\u201d in the width value while in .width()<\/code> we don\u2019t have to add. When you want to get the width of \u201cmydiv\u201d<\/code> element then .css(\u2018width\u2019)<\/code> will return \u2018300px\u2019<\/code> while .width()<\/code> will return only integer value 300<\/code>.<\/p>\n
19. What is the difference between event.PreventDefault and event.stopPropagation?<\/strong><\/h4>\n
preventDefault()<\/code>: Stops the default action of an element from happening.
\nevent.stopPropagation()<\/code>: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. For example, if there is a link with a click method attached inside of a DIV or FORM that also has a click method attached, it will prevent the DIV or FORM click method from firing. You can check out this<\/a> article to have a closer look at the .preventDefault()<\/code> method.<\/p>\n
20. What is the difference between calling stop(true,true) and finish method?<\/strong><\/h4>\n
The .finish()<\/code> method is similar to .stop(true, true)<\/code> in that it clears the queue and the current animation jumps to its end value. It differs, however, in that .finish()<\/code> also causes the CSS property of all queued animations to jump to their end values, as well.<\/p>\n
21. What is the difference between parent() and parents() methods in jQuery?<\/strong><\/h4>\n
The basic difference is the parent()<\/code> function travels only one level in the DOM tree, where parents()<\/code> function search through the whole DOM tree.<\/p>\n
22. What is the difference between eq() and get() methods in jQuery?<\/strong><\/h4>\n
eq()<\/code> returns the element as a jQuery object. This method constructs a new jQuery object from one element within that set and returns it. That means that you can use jQuery functions on it.<\/p>\n
get()<\/code> returns a DOM element. The method retrieves the DOM elements matched by the jQuery object. But it is a DOM element and it is not a jQuery-wrapped object. So jQuery functions can’t be used.<\/p>\n
<\/a>3.2 Function Explanations<\/strong><\/h3>\n
23. How do you implement animation functionality?<\/strong><\/h4>\n
The .animate()<\/code> method allows us to create animation effects on any numeric CSS property. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Syntax is:<\/p>\n
(selector).animate({styles},speed,easing,callback)\r\n<\/pre>\n
\u2022 styles: Specifies one or more CSS properties\/values to animate.
\n\u2022 duration: Optional. Specifies the speed of the animation.
\n\u2022 easing: Optional. Specifies the speed of the element in different points of the animation. Default value is “swing”.
\n\u2022 callback: Optional. A function to be executed after the animation completes.<\/p>\n
$(\"btnClick\").click(function(){\r\n  $(\"#dvBox\").animate({height:\"100px\"});\r\n});\r\n<\/pre>\n
24. What is .siblings() method in jQuery?<\/strong><\/h4>\n
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.
\nThe syntax is: .siblings([selector])<\/code> where \u201cselector\u201d is the selector expression which specify the matched elements.<\/p>\n
<ul>\r\n<li> item 1 <\/li>\r\n<li id=\u201dsecond_item\u201d> item 2 <\/li>\r\n<li class=\u201dmyitem\u201d> item 3 <\/li>\r\n<li class=\u201dmyitem\u201d> item 4 <\/li>\r\n<\/ul>\r\n<\/pre>\n
Now we want to find the siblings of the element of id \u201csecond_item\u201d and change the text color to Blue:<\/p>\n
$(\u2018li.second_item\u2019).siblings().css(\u2018color\u2019,\u2019blue\u2019);\r\n<\/pre>\n
If we want specific sibling elements for example the elements having class \u201cmyitem\u201d then we can pass a optional selector:<\/p>\n
$(\u2018li.second_item\u2019).siblings(\u2018.myitem\u2019).css(\u2018color\u2019,\u2019blue\u2019);\r\n\r\nRead more about the siblings()<\/code> method here<\/a>.<\/pre>\n
25. What is the use of jQuery.data()?<\/strong><\/h4>\n
jQuery .data()<\/code> is used to set\/return arbitrary data to\/from an element.
\nSyntax: jQuery.data(element, key, value)<\/code> where:
\n– \u201celement\u201d is the DOM element to which the data is associated.
\n– \u201ckey\u201d is an arbitrary name of the piece of data.
\n– \u201cvalue\u201d is value of the specified key.
\nSuppose we want to set the data for a span element:<\/p>\n
jQuery.data(span, \u201citem\u201d, { val1: 10, val2: \"myitem\" });\r\n<\/pre>\n
If we want to retrieve the data related to div element and set it to label\u2019s data:<\/p>\n
$(\"label:val1\").text(jQuery.data(div, \"item\").val1);\r\n$(\"label:val2\").text(jQuery.data(div, \"item\").val2);\r\n<\/pre>\n
26. What is jQuery.holdReady() function?<\/strong><\/h4>\n
jQuery .data()<\/code> is used to set\/return arbitrary data to\/from an element.
\nBy using jQuery.holdReady()<\/code> function we can hold or release the execution of jQuery\u2019s ready event.
\nThis method should be call before we run ready event.
\nTo delay the ready event, we have to call<\/p>\n
Query.holdReady(true);\r\n<\/pre>\n
When we want to release the ready event then we have to call<\/p>\n
jQuery.holdReady(false);\r\n<\/pre>\n
This function is helpful when we want to load any jQuery plugins before the execution of ready event. For example:<\/p>\n
$.holdReady(true);\r\n$.getScript(\"xyzplugin.js\", function() \r\n{\r\n     $.holdReady(false);\r\n});\r\n<\/pre>\n
27. What is the use of param() method?<\/strong><\/h4>\n
The param() method is used to represent an array or an object in serialize manner.
\nWhile making an ajax request we can use these serialize values in the query strings of URL.
\nSyntax: $.param(object | array, boolValue)<\/code>.
\nFor example:<\/p>\n
personObj=new Object();\r\nempObject.name=\"Arpit\";\r\nempObject.age=\"24\";\r\nempObject.dept=\u201dIT\u201d;\r\n$(\"#clickme\").click(function()\r\n{\r\n     $(\"span\").text($.param(empObject));\r\n});\r\n<\/pre>\n
28. Explain the resize() function in jQuery.<\/strong><\/h4>\n
The resize()<\/code> function is called whenever the browser size is changed. This event can be only used with $(window)<\/code>.
\nSyntax: .resize([event_data], handler(event_object))<\/code>. For example:<\/p>\n
$(window).resize(function() \r\n{\r\n$('#message).text('window is resized to ' + $(window).width() + \u2018x\u2019 + $(window).height());\r\n});\r\n<\/pre>\n
29. How is the deferred method in jquery important in relation to animate method?<\/strong><\/h4>\n
The .animate()<\/code> method is used to create animations with other shorthands using it. The queue()<\/code> method can be used to link together multiple animation methods to create an unique effect. These methods are effective when all the data is available locally and all the methods are executed on as single system only. In case the user wants to use the animation methods on a data that resides on the server and wants to handle at a single go the user can make used of the .deferred method.<\/p>\n
var my$ = $.sub();\r\nmy$.fn.animate = function( props, speed, easing, callback ) \r\n{\r\nvar options = speed && typeof speed === \"object\" ?\r\njQuery.extend({}, speed) : \r\n{\r\n     complete: callback || !callback && easing ||\r\n     jQuery.isFunction( speed ) && speed,\r\n     duration: speed,\r\n     easing: callback && easing || easing &&\r\n     !jQuery.isFunction(easing) && easing\r\n};\r\nvar dfd = my$.Deferred(),\r\ncomplete = options.complete,\r\ncount = this.length;\r\noptions.complete = function() \r\n{\r\n     complete && complete.call( this );\r\n     if ( !--count ) \r\n{\r\n     dfd.resolve();\r\n}}};\r\n<\/pre>\n
30. Explain the use of the .pushStack() method?<\/strong><\/h4>\n
The pushStack()<\/code> method works by accepting an array of DOM elements and pushes them into a stack. This is done so that call to methods like .end()<\/code> and .andSelf<\/code> are able to behave correctly. The jquery internally uses this method to keep track of all the previous collections of jquery while using a chain traversing method. Good examples of such methods could be .parents()<\/code> and .filter()<\/code>. For example:<\/p>\n
\/\/ select some divs\r\n$('div.container')\r\n\/\/ find some spans inside those divs and add a class to them\r\n.find('span').addClass('baby')\r\n\/\/ pop those spans off the \"stack\",\r\n\/\/ returning to the previous collection (div.container)\r\n.end()\r\n\/\/ add a class to the parent of each div.container\r\n.parent().addClass('daddy');\r\n<\/pre>\n
<\/a>3.3 What is the method we use to…?<\/strong><\/h3>\n
31. In jQuery, the method we use to check whether an element is empty or not is..?<\/strong><\/h4>\n
1. Using “:empt” selector
\n2. $.trim()
\n3. $.empty()
\n4. Both 1 & 2
\n5. All Above<\/p>\n
The correct answer is: 4. Both 1 & 2<\/strong>.<\/p>\n
32. In jQuery, the method we use to create a new ‘div’ element is..?<\/strong><\/h4>\n
1. $(‘div’)
\n2. $(‘<div \/>’)
\n3. $.create(‘<div \/>’)
\n4. $.create(‘div’)
\n5. All Above<\/p>\n
The correct answer is: 2. $(‘<div \/>’)<\/strong><\/p>\n
33. In jQuery, the method we use to stop the default action of the event from triggering is..?<\/strong><\/h4>\n
1. event.stopPropagation()
\n2. event.preventDefault()
\n3. event.stopImmediatePropagation()
\n4. event.isDefaultPrevented()
\n5. All Above<\/p>\n
The correct answer is: 2. event.preventDefault()<\/strong><\/p>\n
34. In jQuery, the method used to stop the running animation is..?<\/strong><\/h4>\n
1. .stopAnimation()
\n2. .stopAnimate()
\n3. .stop()
\n4. None of the above
\n5. All Above<\/p>\n
The correct answer is: 3. stop()<\/strong><\/p>\n
35. In jQuery, the method used to create a copy of the set of matched elements is..?<\/strong><\/h4>\n
1. .copy()
\n2. .create()
\n3. .clode()
\n4. .createCopy()
\n5. All Above<\/p>\n
The correct answer is: 3. clone().<\/p>\n
<\/strong>Find out more about this method here<\/a>.<\/p>\n
<\/a>4. Code Questions<\/strong><\/h2>\n
<\/a>4.1 Given Code Questions<\/strong><\/h3>\n
36. Explain what the following code will do?<\/strong><\/h4>\n
$( \"div#first, div.first, ol#items > [name$='first']\" )\r\n<\/pre>\n
Answer:<\/strong><\/h5>\n
This code performs a query to retrieve any <div><\/code> element with the id first, plus all <div><\/code> elements with the class first, plus all elements which are children of the <ol id=\"items\"><\/code> element and whose name attribute ends with the string “first”. This is an example of using multiple selectors at once. The function will return a jQuery object containing the results of the query.<\/p>\n
37. The code below is for an application that requires defining a click handler for all buttons on the page, including those buttons that may be added later dynamically. What is wrong with this code, and how can it be fixed to work properly even with buttons that are added later dynamically?<\/strong><\/h4>\n
\/\/ define the click handler for all buttons\r\n$( \"button\" ).bind( \"click\", function() {\r\n    alert( \"Button Clicked!\" )\r\n});\r\n\r\n\/* ... some time later ... *\/\r\n\r\n\/\/ dynamically add another button to the page\r\n$( \"html\" ).append( \"