Interview Questions & Answers for Jquery

1. What are the advantages of jQuery?

 Most popular and open source

 Very fast and easily extensible
 Used to develop cross-browser compatible web applications as jQuery works in
almost the same manner for different kinds of browsers.
 Improves the performance of an application when using the minimised version of
the jQuery library. The size of the minimized js file is almost 50% less than the
normal js file. A reduction in the file size makes the web page load and work faster.
 Commonly implemented UI-related functionalities are written using minimal lines
of code.

2. How is jQuery different from other javascript frameworks?

There are a few differences between jQuery and other libraries. The following
makes jQuery lightweight and easier to understand, integrate, and use.

 jQuery is much smaller than other libraries.

 jQuery does not have any dependencies on other libraries or frameworks. (Like
babel).
 jQuery is not as complex as other libraries. This makes it easier to use and
understand.
 jQuery is not as heavy as other frameworks, It only uses the predefined javascript to
make web apps interactive.

3. Is jQuery a JavaScript or JSON library file?

jQuery is said to be a library of single JavaScript files which consists of DOM/CSS

manipulations, event effects or animations, AJAX functions and various commonly
used plugins.

4. Does jQuery work for both HTML and XML documents?

No. jQuery works only for HTML documents.

5. What is jQuery Mobile?

Query Mobile is a JavaScript library that enables developers to create mobile-first

applications. It is a lightweight framework that allows developers to create rich,
touch-first interfaces that are optimized for touch devices.
jQuery Mobile is a mobile-first JavaScript library that aims to provide a modern and
easy-to-use framework for developing mobile apps. It was originally developed by
Facebook to improve the performance of its iOS and Android apps. Since then, it has
been adopted by many other companies, including Google, Yahoo, and Mozilla.

When using jQuery Mobile, you can use the library to create a mobile-first app that
is faster and easier to maintain than traditional web apps. It also makes it easier to
add new features to your app without having to rewrite your code.

JQuery Mobile is built on top of the jQuery JavaScript library. It works by using the
same techniques that are used when you are developing a traditional web app.
However, instead of using JavaScript, jQuery Mobile uses HTML5 and CSS3 to create
a modern and easy-to-use framework for developing mobile apps.

6. What is the $() function in the jQuery library?

 The $() function is used to access the properties of elements in the DOM
(Document Object Model). $() is similar to javascript’s selector functions, but
it is more powerful and has more options.
 $() can be used to access attributes, classes, id, data-* attributes, and more.
 Example - Suppose you want to change the colour of all the heading1 (h1) to
green, then you can do this with the help of jQuery as -

$(document).ready(function() {
$("h1").css("background-color", "green");
});

7. Explain $(document).ready() function?

The $(document).ready() function is a jQuery extension that allows you to

immediately run code when the document is ready. It's most commonly used to
initialize a new page or to load scripts or styles into the document. However, it can
also be used to load a script or style into the document at any time.

The $(document).ready() function is useful for loading scripts or styles into the
document at any time. It's not useful for loading scripts or styles into the document
when the document is already loaded.

8. What is the exact difference between the methods onload() and

document.ready()?
 The onload() and document.ready() methods are used to load and render the HTML
and JavaScript code that is needed to display the page. However, they are different
methods in that they use different approaches to loading the HTML and JavaScript
code. The exact differences are -

onload() document.ready()
The onload() method is used to The document.ready() method is used to load
load the HTML code. the JavaScript code.
The onload() method loads the
The document.ready() method loads the
HTML code using a pre-compiled
JavaScript code using a pre-compiled object that
object that is passed to the onload
is passed to the document.ready event handler.
event handler

9. What are the jQuery functions used to provide effects?

Some of the methods are listed below which provide the effect:

1. toggle() :

 This function is used to check the visibility of selected elements

to toggle between hide() and show() for the selected elements where:
o show() is run when the element is hidden.
o hide() is run when the element is visible.
 Syntax: $(selector).toggle(speed, easing, callback)

2. slideDown() :

 This function is used to either check the visibility of selected elements or to show
the hidden elements. We can use this function on the following types of hidden
elements:
o Elements that are hidden using jQuery methods.
o Elements that are hidden using display: none in the element’s CSS properties.
 Syntax: $(selector).slideDown( speed, easing, callback )

3. fadeOut():

 This function is used to change the level of opacity for element of choice from
visible to hidden. When used, the fadded element will not occupy any space in DOM.
 Syntax: $(selector).fadeOut( speed, easing, callback )

4. fadeToggle():
 This is used for toggling between the fadeIn() and fadeOut() methods.
o If elements are faded in state, fadeToggle() will fade out those elements.
o If elements are faded out, fadeToggle() will fade in those elements.
 Syntax: $(selector).fadeToggle(speed, easing, callback)

5. animate():

 The method performs custom animation of a set of CSS properties. 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: (selector).animate({styles},speed,easing,callback) where “styles” is a
required field that specifies one or more CSS properties/values to animate. The
properties need to be mentioned in camel casing style.
 The parameters “speed”, “easing” and “callback” in the syntaxes of the above
methods represent:
o speed: Optional parameter and used for specifying the speed of the effect. The
default value is 400 milliseconds. The possible value of speed are “slow”, “fast” or
some number in milliseconds.
o easing: Again optional parameter is used for specifying the speed of elements to
different types of animation. The default value is “swing”. The possible value of
easing are “swing” and “linear”.
o callback: Optional parameter. The callback function specified here is
executed after the effect method is completed.

10. Which jquery method is used to hide selected elements?

 The hide() function in jQuery is used to try and hide the chosen element.
 For Example - Suppose we need to hide a division tag, that consists of id =
“ib”. Then the jQuery code will be - $(“#ib”).hide();

11. What are events in jQuery?

User actions on a webpage are called events and handling responses to those is
called event handling. jQuery provides simple methods for attaching event handlers
to selected elements. When an event occurs, the provided function is executed.

12. What is the significance of jQuery.length?

jQuery.length property is used to count the number of the elements of the jQuery
object.

13. What is jQuery click event?

jQuery click event happens when we click on an HTML element.

jQuery provides a method click() method that aids to trigger the click event.

For example, $(“p”).click() will trigger the click event whenever the elements with
paragraph tag are clicked on a browser page.

Syntax:

$(selector).click(function(){

//code that runs when the click event is triggered

});

14. How to iterate/loop through all p elements in jquery.

$.each() is an object iterator tool provided by jQuery, as is.each(), a jQuery

collection iterator(). So for traversing all the p elements, the sample code is -

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

console.log( $(this).attr('id'));

});

15. What is CDN?

CDN is an acronym that stands for Content Delivery Network or Content

Distribution Network. It is a big distributed system of servers spread throughout the
internet in many data centres. It downloads content from servers at a greater
bandwidth, resulting in speedier loading times. Several firms offer free public CDNs,
including Google, Amazon, Microsoft, Yahoo, etc.

16. What is the difference between javascript and jquery?

 JavaScript is an interpreted language written in C and is a combination of

ECMAScript and DOM whereas jQuery is a JavaScript library developed to
run things faster and make things simplified for JavaScript. jQuery doesn't
have the ECMAScript.
 JavaScript requires long lines of code to code a functionality whereas in the
case of jQuery, just import the library and call the functions which would
reduce the programmer’s effort in coding.
 JavaScript doesn't have cross-browser compatible functionality which is why
a developer has to write code manually to implement the functionality.
Whereas the cross-browser code compatibility is inbuilt in jQuery.