05th
May
JQuery Interview Questions

JQuery Interview Questions

  • Sharad Jaiswal
  • 05th May, 2021
  • 1066 Followers

About Jquery

jQuery is a javascript library that you can use to create cool web applications based on events. It's free, powerful, relatively easy to set up and learn and start development, and it has a lot of extensions and plugins available to do almost anything you could imagine. You can get started quickly, and you won't outgrow it later when you get really good at it.jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. Thousands of jQuery plugins are available on the web. Among the most common easily available plugins were assistants AJAX data grids, XML tools, drag and drop, the manipulators Cookies, etc.. You can find the best available plugins in the jQuery official page.

JQuery Interview Questions

1) What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

2) Enlist few advantages of using Jquery?

Below we have a few advantages of using Jquery

  • Lightweight
  • Cross-Browser Friendly
  • Easy to learn
  • Wide community
  • Lots of free plugins
  • Optimized for Search Engines
  • Event detection and handling
  • CSS manipulation
  • Effects and animations

3) What are the core features of jQuery?

Some core features of jQuery are

  • HTML/DOM manipulation
  • CSS manipulation
  • Adding Effects and animations.
  • Performing AJAX
  • JavaScript Plugins
  • Lightweight and Cross-browser support
  • Event handling

4) What is the difference between JavaScript and jQuery?

Major difference between JavaScript and jQuery are

JavaScript jQuery
It is a weakly typed, dynamic programming language jQuery is a Concise and fast JavaScript library
It is an interpreted language It uses resources of JavaScript to make tasks simpler and easier
You need to write your own script and it can be a time-consuming process You only have to write existing JQuery scripts so it saves time
Don’t need to add any additional plugins as all browsers support JavaScript You may have to include jQuery library URL in the header of the page
Too many lines of Code Fewer lines of Code

5) What are the different type of selectors in Jquery?

There are 3 types of selectors in Jquery

  • CSS Selector
  • XPath Selector
  • Custom Selector

6) What is $() in jQuery?

The $() is a function that returns a jQuery enhanced set of elements. This jQuery enhanced set of elements contains a lot of utility functions which can be applied to all elements in the set.

7) What is jQuery Ajax?

jQuery AJAX feature makes it possible and easy to use AJAX in your HTML pages. AJAX makes it possible to fetch content from a server in the background (asynchronously), and update parts of your page with the new content - all without having to reload the complete HTML page.

8) Explain width() vs css('width') in JQuery?

In jQuery, there is two way to change the width of an element. One way is using .css(‘width’) and other way is using .width().

For example

$('#mydiv').css('width','300px');
$('#mydiv').width(100);
  • The difference in .css(‘width’) and .width() is the data type of value we specify or return from the both functions.
  • In .css(‘width’) we have to add “px” in the width value while in .width() we don’t have to add.
  • When you want to get the width of “mydiv” element then .css(‘width’) will return ‘300px’ while .width() will return only integer value 300.

9) What is the use of param() method in JQuery?

The param() method creates a serialized representation of an array or an object. The serialized values can be used in the URL query string when making an AJAX request.

Usage

$.param({ a: [ 2, 3, 4 ] }); // "a=2&a=3&a=4"

10) What are the various ajax functions available in Jquery ?

Ajax allows the user to exchange data with a server and update parts of a page without reloading the entire page. Some of the functions of ajax are as follows:

$.ajax(): This is considered to be the most low level and basic functions. It is used to send requests. This function can be performed without a selector.

$.ajaxSetup(): This function is used to define and set the options for various ajax calls.

For example.

$.ajaxSetup({
"type":"POST",
"url":"ajax.php",
"success":function(data){
$("#bar")
.css("background","yellow")
.html(data);
}
});

Shorthand ajax methods: They comprise of simply the wrapper function that call $.ajax() with certain parameters already set.

$.getJSON(): this is a special type of shorthand function which is used to accept the url to which the requests are sent. Also optional data and optional callback functions are possible in such functions.

Take Free: Jquery MCQ & Quiz

11) What is difference between $(this) and this in jQuery?

this and $(this) references the same element but the difference is that "this" is used in a 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 below example, 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 a jQuery object. Once the “this” keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.

$(document).ready(function(){
  $('#clickme').click(function(){
     alert($(this).text());
     alert(this.innerText);
   });
});

12) Please explain .empty() vs .remove() vs .detach() in Jquery?

Difference between remove(), empty() and detach() methods

  • remove() – Removes all child elements with selected element. In this method, you can restore all data but not event handlers of removed elements from the DOM. All data and events related to elements will be removed.
  • empty() – Removes all content and child elements from the selected element. This method does not remove the selected elements.
  • detach() – Removes all child elements with selected elements. Even though it keeps all data and event handlers of the removed elements. This method is preferred to remove elements but it keeps a copy of the removed elements which we can reuse at a later time.

13) List some effects methods used in jQuery?

Below are the list some effects methods used in jQuery

  • animate():Custom animation on the selected elements
  • clearQueue(): To remove remaining queued functions from the selected elements
  • delay(): To set a delay for all queued functions on the selected elements
  • dequeue():To remove the next function from the queue, and then executes the function
  • fadeIn(): Fades in the selected elements
  • fadeOut(): Fades out the selected elements
  • fadeTo(): Fades in/out the selected elements to a given opacity
  • fadeToggle(): To Toggle between the fadeIn() and fadeOut() methods
  • finish(): To stop, remove and complete all queued animations for the selected elements.

14) What is the use of toggle() method in JQuery?

The toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements.

  • show() is run when the element is hidden.
  • hide() is run when the element is visible.

Syntax

$(selector).toggle(speed, easing, callback)

15) What is the use of css() method in JQuery?

The css() method in JQuery is used to change the style property of the selected element.

Syntax

$(selector).css(property, value)

16) What is jQuery connect?

jQuery connect is a plugin used to connect or bind a function with another function. Connect is used to execute a function whenever a function from another object or plugin is executed.

Connect can be used by downloading jQuery connect file from jQuery.com and then include that file in the HTML file.

17) What is a CDN?

A content delivery network or content distribution network (CDN) is a geographically distributed network of proxy servers and their data centers. The goal of CDN is to provide high availability and high performance by distributing the service spatially relative to end-users.

18) What is a use of jQuery filter?

The filter method in the jQuery is used to filters the elements based on the criteria given to the function.

Syntax

$(selector).filter(criteria, function(index)) 

Here, the elements that match the criteria is given to the function to run further logic on it.

Example

$("li").filter("#id1").css("color", "blue"); 

In the above example, the list element with id1 is filtered from the list and is applied with the CSS function to change its color.

19) What is ID and class selector in jQuery?

Id selector: The jQuery Id selector is a fasting selector that allows you to select an HTML based on id attribute.

Class selector: jQuery class selector allows you to find all elements, which have the same CSS class.

20) What is use of use of serialize() method in JQuery?

serialize() method in Jquery is used to create a URL encoded text string by serializing the form values. You can select one or more form elements (like input and/or text area), or the form element itself. The serialized values can be used in the URL query string when making an AJAX request.

21) How to stop event propagation in Jquery?

event.stopPropagation() method is used to stop event propagation in Jquery. This function stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

Example

$( "p" ).click(function( event ) {
  event.stopPropagation();
  // Do something
});

22) What is use of the animate() method in jQuery?

The animate() is an inbuilt method in jQuery which is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create an animated effect for the selected element.

Syntax

$(selector).animate({styles}, para1, para2, para3);

23) How to read, write and delete cookies in jQuery?

To deal with cookies in jQuery we have to use the Dough cookie plugin. Dough is easy to use and has powerful features.

  • Create cookie:
    $.dough("cookie_name", "cookie_value");
  • Read Cookie:
    $.dough("cookie_name");
  • Delete cookie:
    $.dough("cookie_name", "remove");

24) What is jQuery UI?

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.It offers a combination of interaction, effects, widgets, utilities, and themes designed to work well together or on their own.

25) What is use of slice() method in jQuery?

jQuery slice() method is used to select a subset of elements based on its index.

This method is used to limit the selection of elements in a group, by a start and endpoint: the start parameter is a starting index (starts at 0) from which to create the subset, and the stop parameter is an optional ending point.

Syntax

$(selector).slice(start,stop)

26) How to select all elements in jQuery?

$( "*" ) is used to select all elements in jQuery.

Example

$("*").css('color','red');

The above code change text color to red of all elements of a webpage.

27) How to set and get the value of an element using jQuery?

val() method is used to get or set the value attribute of the selected elements.

Syntax

$(element).val(); // getting the value
$(element).val("value"); // setting value

28) What is use of $(document).ready()?

$(document).ready() method is used to make a function available after the document is fully loaded. Whatever code you write inside the $(document ). ready() method will run once the page DOM is ready to execute JavaScript code.

29) What is chaining in jQuery?

Jquery chaining allows us to perform multiple actions on the same set of elements, all within a single line of code.

30) How to get attribute value of an element in jQuery?

.attr() method is used to get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

31) What is the jQuery Unbind() method?

unbind() Method is an inbuilt method in jQuery which is used to remove any selected event handlers. This method can be used to remove a particular event handler or stop specific functions. It works on any event handler using an event object.

32) What is $.each() function do in jQuery?

$.each() is a generic iterator function in jquery, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property or other objects are iterated via their named properties.

33) Which is fastest and slowest selector in jQuery?

id selectors are the fastest selectors in jquery whereas Class selectors are the slowest selectors in jQuery.

34) What is the use of jQuery.data() method?

jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. Using the data() method to update data does not affect attributes in the DOM.

5 comment(s) :

  •   Reply
    img

    Syed Sami Ul Huda

    12th Jun, 2020
    "Awesome series of interview questions
  •   Reply
    img

    Sudeep

    24th Dec, 2020
    "Best jQuery questions for interview. Thanks
  •   Reply
    img

    Atul

    24th Dec, 2020
    "These are basic question. Please add some experienced jquery questions for interview . Based on Dom manipulation
  •   Reply
    img

    Kriti

    24th Dec, 2020
    "Thanks so much for the posting . Really usefull for interview
  •   Reply
    img

    Dhanurdar Sahhu

    23rd Jan, 2021
    "Easy to read and understand, point to point answers. Five stars from me

Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.