jQuery Tutorial

jQuery Interview Questions and Answers

Last updated on 27th Sep 2020, Blog, Interview Question

About author

Rajan (Sr Technical Project Manager )

Highly Expertise in Respective Industry Domain with 10+ Years of Experience Also, He is a Technical Blog Writer for Past 4 Years to Renders A Kind Of Informative Knowledge for JOB Seeker

(5.0) | 11245 Ratings 629

jQuery is a lightweight, “write less, do more”, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.It also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

1.What is jQuery?

Ans:

jQuery is a fast, feature-rich client-side JavaScript library. It is cross-platform and supports different types of browsers. It has provided a much-needed boost to JavaScript. Before jQuery, JavaScript codes were lengthy and bigger, even for smaller functions. It makes a website more interactive and attractive.

2.Is jQuery a programming language?

Ans:

jQuery is not a programming language but a well-written JavaScript code. It is used to traverse documents, event handling, Ajax interaction, and Animation.

3.What is the difference between JavaScript and jQuery?

Ans:

The simple difference is that JavaScript is a language while jQuery is a built-in library built for JavaScript. jQuery simplifies the use of JavaScript language.

4.Is jQuery replacement of JavaScript?

Ans:

No, jQuery is not the replacement of JavaScript. jQuery is written on the top of JavaScript, and it is a different library. jQuery is a lightweight JavaScript library which is used to interact with JavaScript and HTML.

5.Why do we use jQuery?

Ans:

  • It is very easy to learn and use.
  • It is used to develop browser compatible web applications.
  • It improves the performance of an application.
  • It is very fast and extensible.
  • It facilitates you to write minimal lines of codes for UI related functions.
  • It provides cross-browser support. 

6.What is $(. in jQuery library?

Ans:

The $() function is an alias of jQuery() function. It is used to wrap any object into a jQuery object which later facilitates you to call the various method defined jQuery objects. You can pass a selector string to $(. function, and it returns a jQuery object which contains an array of all matched DOM elements.

Syntax:

  • $(document..ready(function(. {  
  • $(“p”..css(“background-color”, “pink”.;  
  • }.;  

7.What are the effects methods used in jQuery?

Ans:

These are some effects methods used in jQuery:

  • show() – It displays or shows the selected elements.
  • hide() – It hides the matched or selected elements.
  • toggle() – It shows or hides the matched elements. In other words, it toggles between the hide(. and shows(. methods.
  • fadeIn() – It shows the matched elements by fading it to opaque. In other words, it fades in the selected elements.
  • fadeOut() – It shows the matched elements by fading it to transparent. In other words, it fades out the selected elements.

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

Ans:

The jQuery toggle() is a particular type of method which is used to toggle between the hide() and show() method. It shows the hidden elements and hides the shown element.

  • $(selector..toggle();  
  • $(selector..toggle(speed, callback);  
  • $(selector..toggle(speed, easing, callback);  
  • $(selector..toggle(display);  
  • speed: It is an optional parameter. It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.
  • easing: It specifies the easing function to be used for transition.
  • callback: It is also an optional parameter. It specifies the function to be called after completion of toggle(. effect.
  • display: If true, it displays an element. If false, it hides the element.

9.What is the purpose of fadeToggle() method in JQuery?

Ans:

The jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut(. methods. If the elements are faded in, it makes them faded out, and if they are faded out, it makes them fade in.

  • $(selector..fadeToggle();  
  • $(selector..fadeToggle(speed,callback);   
  • $(selector..fadeToggle(speed, easing, callback);  
  • speed: It is an optional parameter. It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.
  • easing: It specifies the easing function to be used for transition.
  • callback: It is also an optional parameter. It specifies the function to be called after completion of fadeToggle() effect.

10.What is the use of delay() method in JQuery?

Ans:

The jQuery delay(. method is used to delay the execution of functions in the queue. It is the best method to make a delay between the queued jQuery effects. The jQUery delay (. method sets a timer to delay the execution of the next item in the queue.

Syntax:

  • $(selector..delay (speed, queueName.    
  • speed: It is an optional parameter. It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.
  • queueName: It is also an optional parameter. It specifies the name of the queue. Its default value is “fx” the standard queue effect.
Subscribe For Free Demo
[contact-form-7 404 "Not Found"]

11.Is it possible for jQuery HTML work for both HTML and XML documents?

Ans:

No, jQuery HTML only works for HTML documents. It doesn’t work for XML documents.

12.What is the use of the html() method in JQuery?

Ans:

The jQuery html() method is used to change the entire content of the selected elements. It replaces the selected element content with new contents.

Syntax:

  • $(document..ready(function(.{    
  • $(“button”..click(function(.{    
  • $(“p”..html(“Hello <b>Javatpoint.com</b>”.;    
  • }.;    
  • }.;    

13.What is the use of css(. method in JQuery?

Ans:

The jQuery CSS(. method is used to get (return.or set style properties or values for selected elements. It facilitates you to get one or more style properties. The jQuery CSS(. provides two ways:

  • Return a CSS property: It is used to get the value of a specified CSS property.
  • $(document..ready(function(){    
  • $(“button”..click(function(){    
  • alert(“Background color = ” + $(“p”..css(“background-color”..;    
  • }.;    
  • }.;    
  • Set a CSS property: This property is used to set a specific value for all matched elements.
  • $(document..ready(function(){    
  • $(“button”..click(function(){    
  • $(“p”).css(“background-color”, “violet”);    
  • }.;    
  • }.;  

14.Is jQuery library used for server scripting or client scripting?

Ans:

It is a library for client-side Scripting.

15.Is jQuery a W3C standard?

Ans:

No, jQuery is not a W3C standard.

16.What is the starting point of code execution in jQuery?

Ans:

$(document..ready(. function is the starting point of jQuery code. It is executed when DOM is loaded.

17.What is the basic requirement to start with the jQuery?

Ans:

You need to refer to its library to start with jQuery. You can download the latest version of jQuery from jQuery.com.

18.Can you use any other name in place of $ (dollar sign. in jQuery?

Ans:

Yes, instead of $ (dollar sign. we can use jQuery as a function name. For example:

  • jQuery(document..ready(function(. {    
  • jQuery(“p”..css(“background-color”, “pink”.;    
  • }.;   

19.Can you use multiple document.ready() functions on the same page?

Ans:

Yes. You can use any number of document.ready(. function on the same page. For example:

  • $(document..ready(function() {    
  • $(“h1”..css(“background-color”, “red”.;    
  •  }.;    
  • $(document..ready(function() {    
  • $(“p”..css(“background-color”, “pink”.;    
  •  }.;    

20.What is the difference between find and children methods?

Ans:

Find method is used to find all levels down the DOM tree while children method is used to find single level down the DOM tree.

21.What is a CDN?

Ans:

CDN stands for Content Delivery Network or Content Distribution Network. It is a large distributed system of servers deployed in multiple data centers across the internet. It provides the files from servers at a higher bandwidth that leads to faster loading time. These are several companies that provide free public CDNs:

  • Google
  • Microsoft
  • Yahoo

22.What is the goal of CDN and what are the advantages of using CDN?

Ans:

The primary goal of the CDN is to provide content to the end-users with high availability and high performance.

Advantages of using CDN:

  • It reduces the load from the server.
  • It saves bandwidth. jQuery framework is loaded faster from these CDN.
  • If a user regularly visits a site which is using jQuery framework from any of these CDN, it will be cached.

23.How can you use a jQuery library in your project?

Ans:

You can use a jQuery library in the ASP.Net project from downloading the latest jQuery library from jQuery.com and include the references to the jQuery library file in your HTML/PHP/JSP/Aspx page.

  • <script src=”_scripts/jQuery-1.2.6.js” type=”text/javascript”></script>   
  • <script language=”javascript”>   
  • $(document..ready(function(. {   
  • alert(‘test’.;   
  • }.;   
  • </script>  

24.What are the selectors in jQuery? How many types of selectors in jQuery?

Ans:

If you want to work with an element on the web page, first you need to find it. Selectors find the HTML elements in jQuery. There are many types of selectors. Some basic selectors are:

  • Name: It is used to select all elements which match with the given element Name.
  • #ID: It is used to select a single element which matches with the given ID
  • .Class: It is used to select all elements which match with the given Class.
  • Universal (*.: It is used to select all elements available in a DOM.
  • Multiple Elements E, F, G: It is used to select the combined results of all the specified selectors E, F or G.
  • Attribute Selector: It is used to select elements based on its attribute value.

25.What is the use of jQuery filters?

Ans:

jQuery filter is used to filter the specific values from the object. It filters the result of your original query into specific elements.

Course Curriculum

Enroll in Real-Time jquery Training from Industry Experts

  • Instructor-led Sessions
  • Real-life Case Studies
  • Assignments
Explore Curriculum

26.What are the different types of selectors in jQuery?

Ans:

There are three types of selectors in jQuery:

  • CSS Selector
  • Custom Selector
  • XPath Selector

27.What is the difference between the ID selector and class selector in jQuery?

Ans:

  • ID selector and class selector are the same as they are in CSS. ID selector uses ID while class selector uses a class to select elements.
  • You use an ID selector to select just one element. If you want to select a group of elements, having the same CSS class, use class selector.

28.What is the use of serialize() method in JQuery?

Ans:

The jQuery serialize() method is used to create a text string in standard URL-encoded notation. It serializes the form values so that its serialized values can be used in the URL query string while making an AJAX request.

  • $(document..ready(function(.{    
  • $(“button”..click(function(.{    
  • $(“div”..text($(“form”..serialize(..;    
  • }.;    
  • }.;     

29.What is the use of the val() method in JQuery?

Ans:

The jQuery val() method is used:

  • To get the current value of the first element in the set of matched elements.
  • To set the value of every matched element.

Syntax:

  • $(document..ready(function(){    
  • $(“button”..click(function(){    
  • $(“div”..text($(“form”..serialize().;    
  • }.;    
  • }.;     

30.How to add and remove CSS classes to an element using jQuery?

Ans:

You can use addclass(. jQuery method to add CSS class to an element and removeclass(. jQuery method to remove CSS class from an element.

CSS addClass(. Example

  • <!DOCTYPE html>    
  • <html>    
  • <head>    
  •  <title>jQuery Example</title>    
  • <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>    
  •  </script>    
  •  <script type=”text/javascript” language=”javascript”>    
  • $(document..ready(function(.  
  • {  
  • $(“#btn”..click(function(.  
  • {  
  •     $(“#para”..addClass(“change”.;  
  • }.;  
  • }.;  
  •  </script>    
  • <style>  
  •     .change  
  •     {  
  •         color:blue;  
  •     }  
  • </style>  
  •  </head>    
  • <body>    
  • <p id=”para”>This method adds CSS class from an element</p>    
  • <input type=”button” id=”btn” value=”Click me”>   
  • </body>    
  • </html>    

CSS removeClass(. Example

  • <!DOCTYPE html>    
  • <html>    
  • <head>    
  •  <title>jQuery Example</title>    
  • <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>    
  •  </script>    
  •  <script type=”text/javascript” language=”javascript”>    
  • $(document..ready(function(.  
  • {  
  • $(“#btn”..click(function(.  
  • {  
  •     $(“p”..removeClass(“change”.;  
  • }.;  
  • }.;  
  •  </script>    
  • <style>  
  •     .change  
  •     {  
  •         color:blue;  
  •     }  
  • </style>  
  •  </head>    
  • <body>    
  • <p class=”change”>This method removes CSS class to an element</p>    
  • <input type=”button” id=”btn” value=”Click me”>   
  • </body>    
  • </html>  

31.Can you write a jQuery code to select all links inside the paragraph?

Ans:

Yes. You can use the <a> tag nested inside the paragraph <p> tag to select all links. For example:

  • <!DOCTYPE html>    
  • <html>    
  • <head>    
  •  <title>jQuery Example</title>    
  • <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>    
  •  </script>    
  •  <script type=”text/javascript” language=”javascript”>    
  • $(document..ready(function(.  
  • {  
  •     $(“p a”..attr(“href”, “https://www.javatpoint.com”.;  
  • }.;  
  •  </script>    
  •  </head>    
  • <body>    
  •     <p><a>Learn JavaScript</a></p>  
  •     <p><a>Learn jQuery</a></p>   
  • </body>     
  • </html>    

32.What is the difference between prop and attr?

Ans:

  • attr(): It gets the value of an attribute for the first element in the set of matched elements.
  • prop(): it gets the value of a property for the first element in the set of matched elements. It is introduced in jQuery 1.6.

33.What are the two types of CDNs?

Ans:

There are two types of CDN:

  • Microsoft: It loads jQuery from AJAX CDN.
  • Google: It loads jQuery from Google libraries API.

34.What is the use of the animate(. method in jQuery?

Ans:

The animate function is used to apply the custom animation effect to elements. Syntax:

  • $(selector..animate({params}, [duration], [easing], [callback].  

Here,

  • “param” defines the CSS properties on which you want to apply the animation.
  • “duration” specifies how long the animation runs. It can be one of the following values: “slow,” “fast,” “normal” or milliseconds
  • “easing” is the string which specifies the function for the transition.
  • “callback” is the function which we want to run once the animation effect is complete.

35.What is jQuery Ajax?

Ans:

AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data and exchange data with the server without a browser page refresh. JQuery is a great tool which provides a rich set of AJAX methods to develop next-generation web applications.

36.What does ajax() method do?

Ans:

This method sends an asynchronous http request to the server.

37.What are the jQuery Ajax Events?

Ans:

The jQuery library also includes events which will be fired based on the state of the Ajax request, these are called Ajax events.

38.What does the jQuery Ajax event method ajaxComplete() do ?

Ans:

Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete(. method are executed at this time.

39.What does the jQuery ajax event method ajaxStart() do?

Ans:

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart(. method are executed at this time.

40.What are Events in jQuery?

Ans:

Responding to user actions on a webpage is called events. jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed.

41.What are the categories in jquery Events?

Ans:

The common DOM events are as follows

  • Form
  • Keyboard
  • Mouse
  • Browser
  • Document Loading

42.What are the selectors in jQuery and what are the types of Selectors?

Ans:

If you would like to work with an element on the web page, first you need to find or select it. Selectors find the HTML elements using jQuery.

There are many types of selectors in the jQuery library. Some basic selectors are:

  • Name: It is used to select all elements which match with the given element Name.
  • #ID: It is used to select a single element which matches with the given ID
  • .Class: It is used to select all elements which match with the given Class.
  • Universal (*.: It is used to select all elements available in a DOM.
  • Multiple Elements E, F, G: It is used to select the combined results of all the specified selectors E, F or G.
  • Attribute Selector: It is used to select elements based on its attribute value.

43.What is method chaining in jQuery? Provide an example. What advantages does it offer?

Ans:

Method chaining is a feature of jQuery that allows several methods to be executed on a jQuery selection in sequence in a single code statement. For example, the following snippets of code are equivalent:

Without chaining:

  • $( “button#play-movie” ).on( “click”, playMovie );
  • $( “button#play-movie” ).css( “background-color”, “orange” );
  • $( “button#play-movie” ).show();

With chaining:

  • $( “button#play-movie” ).on( “click”, playMovie )
  • $( “button#play-movie” ).on( “click”, playMovie )
  • .show();

Notice that with chaining, the button only needs to be selected one time, whereas without chaining, jQuery must search the whole DOM and find the button before each method is applied. Thus, in addition to yielding more concise code, method chaining in jQuery offers a potentially powerful performance advantage.

Note: To be entirely precise, it should be noted that method chaining in jQuery is not the only way to avoid repetitively searching the entire DOM. One could also set a variable equal to the initial DOM search results (i.e., in the above example, one could set a variable equal to $( “button#play-movie” and then call the on(), css(), and show() methods on that variable). But that said, chaining is still the more concise and efficient option and doesn’t require caching the result in a local variable.

44.What is the difference between onload() and document.ready() methods?

Ans:

Body.Onload() event will be called only after the DOM and associated resources like images get loaded, but jQuery’s document.ready() event will be called once the DOM is loaded and it does not wait for the resources such as images to be loaded.

45.What is jQuery connect?

Ans:

A ‘ jQuery connect’ is a plug-in used to connect or bind a function with another function. Connect is used to execute a function whenever a function from another object or plug-in is executed.

Course Curriculum

Get On-Demand jquery Training Course & Become JOB READY

Weekday / Weekend BatchesSee Batch Details

46.Is jQuery required for bootstrap?

Ans:

Bootstrap uses jQuery for JavaScript plugins (like models, tooltips, etc.. However, if you just use the CSS part of Bootstrap, you don’t need jQuery.

47.What is jQuery Mobile?

Ans:

jQuery Mobile is an HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphones, tablet and desktop devices.

48.What is the difference between jquery.min.js and jquery.js?

Ans:

jquery.min.js is a compressed version of jquery.js(whitespaces and comments are removed, shorter variable names are used and so on. in order to preserve bandwidth. In terms of functionality, they are absolutely the same. It is recommended to use this compressed version in the production environment. The efficiency of a web page increases when the minimized version of jQuery is used.

49.Is it possible that jQuery HTML works for both HTML and XML documents?

Ans:

No, jQuery HTML only works for HTML documents. It doesn’t work for XML documents.

50.What is jQuery UI?

Ans:

jQuery UI is a set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. jQuery UI works well for highly interactive web applications with many controls or for a simple page with a date picker control.

51.What is a Data Table plug-in for jQuery?

Ans:

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, which adds advanced features to any HTML table.

52.What is Qunit?

Ans:

QUnit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI, and jQuery Mobile projects and is capable of testing any generic JavaScript code.

53.What is the advantage of hosting a jQuery using a CDN?

Ans:

CDN stands for Content Delivery Network or Content Distribution Network. It is a large distributed system of servers deployed in multiple data centers across the internet. It provides the files from servers at a higher bandwidth that leads to faster loading time.

Advantages of using CDN are-

  • The jQuery library download time will be reduced. For example – Users in Europe will hit the CDN in Europe and users in the US will hit the US CDN. As a result, this will reduce the overall page load time.
  • The jQuery library will already be cached in the user’s browser if the user visits another website that references the same jQuery library. In this case, the user need not download the jQuery library.

54.Explain the difference between the .detach() and remove() methods in jQuery.

Ans:

The detach() and remove() methods are the same, except that .detach() retains all jQuery data associated with the removed elements and .remove() does not. detach() is therefore useful when removed elements may need to be reinserted into the DOM at a later time.

55.Can a jQuery library be used for server scripting?

Ans:

jQuery is designed with the functionality for client-side scripting. jQuery is not compatible with server-side scripting.

56.What is the use of jQuery .each() function?

Ans:

The “jQuery.each()” function is a general function that will loop through a collection (object type or array type). Array-like objects with a length property are iterated by their index position and value. Other objects are iterated on their key-value properties. The “jQuery.each()” function however works differently from the $(selector).each() function that works on the DOM element using the selector. But both iterate over a jQuery object. 

57.What are the methods used to provide effects?

Ans:

jQuery provides many amazing effects, we can apply these effects quickly and with simple configuration. The effect may be hiding, showing, toggling, fadeout, fadein, fadeto and so on toggle(., Show(. and hide(. methods. Similarly we can use other methods as in the following:

  • animate( params, [duration, easing, callback] . This function makes custom animations for your HTML elements.
  • fadeIn( speed, [callback] . This function fades in all the matched elements by adjusting their opacity and firing an optional callback after completion.
  • fadeOut( speed, [callback] . This function is used to fade out all the matched elements by adjusting their opacity to 0, then setting the display to “none” and firing an optional callback after completion.
  • fadeTo( speed, opacity, callback . This function fuses the opacity of all the matched elements to a specified opacity and fires an optional callback after completion.
  • stop( [clearQueue, gotoEnd ]. This function stops all the currently running animations.

58.How to handle Controls attribute Using jQuery?

Ans:

For handling Controls attributes using jQuery we used .addClass(., .removeClass(., .css(., .toggleClass(., etc to manage all css and html attributes of any html control.

59.How to work with parent(), children() and siblings() methods in jQuery?

Ans:

The parent() function returns the parent of the selected element by calling the jQuery parent() function. The siblings() function returns all the siblings of given HTML elements.

60.Explain what the following code will do:

  • $( “div#first, div.first, ol#items > [name$=’first’]” )

Ans:

This code performs a query to retrieve any <div> element with the id first, plus all <div> elements with the class first, plus all elements which are children of the <ol id=”items”> 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.

61.Define bind() and unbind elements in jQuery?

Ans:

The jQuery bind() method attaches an event handler to elements, whereas unbind() detaches an existing event handler from elements. Use basic HTML code to create the HTML elements.

62.How to remove a DOM Element using jQuery?

Ans:

Sometimes we get a requirement to delete all child nodes and remove DOM elements using jQuery to make a dynamic web page. In this scenario jQuery provides a couple of methods to remove DOM elements. Here are the options:

  • empty()
  • remove()
  • html()

63.What are the types of jQuery filters?

Ans:

JQuery supports various types of filters, such as:

  • .eq()
  • .first()
  • .last()
  • .filter()
  • .has()
  • .not()

64.What is the use of jQuery.ajax method()?

Ans:

The ajax() method is used to do an AJAX (asynchronous HTTP. request. It provides more control of the data sending and on response data. It allows the handling of errors that occur during a call and the data if the call to the ajax page is successful.

Here is the list of some basic parameters required for jQuery.ajax Method: 

  • type: Specifies the type of request (GET or POST).
  • url: Specifies the URL to send the request to. The default is the current page.
  • contentType: The content type used when sending data to the server. The default is “application/x-www-form-urlencoded”.
  • dataType: The data type expected of the server response.
  • data: Specifies data to be sent to the server.
  • success(result,status,xhr.: A function to run when the request succeeds.
  • error(xhr,status,error.: A function to run if the request fails.

65.What is an attribute in jQuery?

Ans:

There are many important properties of DOM or HTML elements such as for the <img> tag the src, class, id, title and other properties. jQuery provides ways to easily manipulate an elements attribute and gives us access to the element so that we can also change its properties. 

  • attr( properties ) – Set a key/value object as properties to all matched elements.
  • attr( key, fn ) – Set a single property to a computed value, on all matched elements.
  • removeAttr( name ) – Remove an attribute from each of the matched elements.
  • hasClass( class ) – Returns true if the specified class is present on at least one of the set of matched elements.
  • removeClass( class ) – Removes all or the specified class(es) from the set of matched elements.
  • toggleClass( class ) – Adds the specified class if it is not present, removes the specified class if it is present.
  • html( ) – Gets the HTML contents (innerHTML. of the first matched element.
  • html( val ) – Sets the HTML contents of every matched element.
  • text( ) – Gets the combined text contents of all matched elements.
  • text( val ) – Sets the text contents of all matched elements.
  • val(). – Gets the input value of the first matched element.

66.What is the jQuery Unbind() method?

Ans:

The jQuery bind() method attaches an event handler to elements, whereas unbind() detaches an existing event handler from elements. Use basic HTML code to create the HTML elements.

67.What is the jQuery Animation?

Ans:

In short, the .animate method is used to perform a custom animation of a set of CSS properties. The .animate() method comes in two flavours. The first takes four arguments and the second takes two arguments.

68.How can you find browser and browser versions in jQuery?

Ans:

  • Using $.browser property of jQuery  returns the browser information.
  • Using $.browser is not recommended by jQuery itself, so this feature has been moved to the jQuery.migrate plugin which is available for downloading if the user wants. It is a vulnerable practice to use the same. Use it only if needed. It is always better to not use browser specific codes.

69.How to implement Sticky Ads in your website?

Ans:

  • Sticky Ads are those that follow you when you are scrolling down a page. They are a good way to increase ADs clicks on our website and so the website’s revenue.
  • We can use Sticky Kit which is a jQuery plugin for creating sticky elements in the website. It allows us to apply stickiness to any HTML element like a div, span, etc.

70.Explain Treeview and it’s working procedure?

Ans:

Showing parents and their children in the form of a tree is done by creating Treeview. There are 2 nodes – ‘+’ & ‘-‘ which on clicking opens or closes the treeview. 

Jquery Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

71.How to create an eye catchy Multiselect in jQuery?

Ans:

By using Select2 jQuery plugin which gives us a highly customizable jQuery Multiselect control with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. 

72.What is a jQuery Timer?

Ans:

A jQuery Timer is created with JavaScript methods – setInterval() and setTimeout(.. We can easily create Image Slider, time clock, stopwatch and random background color changing effect on our website. 

73.What is Web Scraper and how to implement it?

Ans:

A Web Scraper is a software that helps in extracting data from websites. It is used to extract typical information like emails, telephone numbers, addresses, etc from different URLs. I created a Web Scraper in ASP.NET MVC with jQuery. This Scraper extracted all emails and telephone numbers from a specified URL.

74.How to create jQuery Autocomplete?

Ans:

To create an autocomplete feature in jQuery we will use jQuery AJAX to call the server side method. This method will fetch results from the database and return them to the jQuery method that called it.

75.Explain jQuery DOM Manipulation with code

Ans:

DOM = Document Object Model: The DOM defines a standard for accessing HTML and XML documents. One very important part of jQuery is the possibility to manipulate the DOM. The jQuery comes with a bunch of DOM Manipulation related methods that make it easy to access and manipulate elements and attributes.

Three simple, but useful, jQuery methods for DOM manipulation are:

  • text() – Sets or returns the text content of selected elements
  • html() – Sets or returns the content of selected elements (including HTML markup.
  • val() – Sets or returns the value of form fields

76.What are the features of jQuery used in web applications?

Ans:

jQuery has some important features that are used in web applications such as:

  • HTML/DOM Manipulation: JavaScript do not have any features related to the DOM, but JavaScript in the browser does include some intelligence about the DOM.
  • Event Handling: jQuery introduced a feature called Event handling. You can write code that runs when a user clicks on a certain part of the page, or when the mouse is moved over a form element. jQuery contains many events, such as a user clicking on a button, moving a mouse over an element, etc.
  • Ajax Support: When you select an item from a DropDownList or other control on the same page then that can cause loss of data. Ajax is used to update the part of the web page without reloading the page.
  • Animations in jQuery: The jQuery comes with plenty of built-in animation effects that you can use in your websites. For example, animation, show, hide and so on. In jQuery, the animate(. method is used to perform such tasks.

77.Explain what the following code does:

  •   $( “div” ).css( “width”, “300px” ).add( “p” ..css( “background-color”, “blue”

Ans:

This code uses method chaining to accomplish a couple of things. First, it selects all the <div> elements and changes their CSS width to 300px. Then, it adds all the <p> elements to the current selection, so it can finally change the CSS background color for both the <div> and <p> elements to blue.

78.What is chaining in jQuery?

Ans:

Chaining is a  powerful feature of jQuery. This means specifying multiple functions and/or selectors to an element. Chaining reduces the code segment and keeps it very clean and easy to understand. Generally, chaining uses the jQuery built-in functions that make the compilation a bit faster.

For example:

  • $(document..ready(function(. {
  • $(“#div2”..html($(“#txtBox”..prop(“readonly”.. + ‘</br>’;
  • $(“#div3”..html($(“#txtBox”..attr(“readonly”..;
  • }.;

79.How can jQuery be used in conjunction with another JavaScript library that also uses $ for naming?

Ans:

$ has no special meaning in JavaScript. It can be used in object naming. In jQuery, it is simply used as an alias for the jQuery object and jQuery(. function.

However, jQuery has no monopoly on use of $ which may create situations where you want to use it in conjunction with another JS library that also uses $. This would result in a naming conflict. jQuery provides the jQuery.noConflict(. method for just this reason. Calling this method makes it necessary to use the underlying name jQuery instead in subsequent references to jQuery and its functions.

80.What are jQuery plugins?

Ans:

  • Plugins are a piece of code. The jQuery plugins are a code written in a standard JavaScript file. These JavaScript files provide useful jQuery methods that can be used along with jQuery library methods.
  • Any method you use in plugins must have a semicolon (;) at the end. The method must return an object unless explicitly noted otherwise. It produces clean and compatible code that way. You have to prefix the filename with jQuery, follow that with the name of the plugin and conclude with .js.

81.What is queue() in Jquery? Use of queue() in jquery?

Ans:

  • Delay comes under the custom effect category in jQuery. Its sole use is to delay the execution of subsequent items in the execution queue.
  • queueName is the name of the queue in which the delay time is to be inserted. By default, it is an “fx” queue. An “fx” queue is also known as an effects queue.
  • delay( duration [, queueName ] .

82.What is the slice() method in jQuery?

Ans:

The slice() method selects a subset of the matched elements by giving a range of indices. It gives the set of DOM elements on the basis of a parameter.

Syntax:

  • slice( start, end[Optional] .

Start: This is the first and mandatory parameter of the slice method. This specifies from where to start to select the elements.

  • End: This is an optional parameter. It specifies the range of the selection. This indicates where to stop the selection of elements, excluding the end element.

83.What are all the ways to include jQuery in a page?

Ans:

The different ways to include jQuery in a page are:

  • Local copy inside script tag
  • Remote copy of jQuery.com
  • Remote copy of Ajax API
  • Local copy of script manager control
  • Embedded script using client script object

84.What are the four parameters used for the jQuery Ajax method?

Ans:

The four parameters used for jQuery Ajax method are:

  • URL – You need to specify the URL to send the request.
  • Type – This specifies the type of requests such as Get or Post.
  • Data – It specifies the data to be sent to the server.
  • Cache – This decides whether the browser should cache the requested page.

85.What is the difference between $(window).load and $(document).ready function in jQuery?

Ans:

  • $(window).load is an event that fires when the DOM and other contents on the page is fully loaded. This event is fired after the ready event.
  • In most cases, the script can be executed as soon as the DOM is fully loaded. The ready() is usually the best place to write your JavaScript code. But there could be some scenario where you might need to write scripts in the load() function. For example, to get the actual width and height of an image.
  • The $(window..load event is fired once the DOM and all the CSS, images and frames are fully loaded. So, it is the best place to write the jQuery code to get the actual image size or to get the details of anything that is loaded just before the load event is raised.

86.What is the difference between jquery.size() and jquery.length?

Ans:

jQuery .size() method gives the total number of elements present in the object. But size(. method is not preferred as jQuery has .length property. It does the same thing but the .length property does not have the overhead of a function call.

87.What is jQuery connect and how to use it?

Ans:

  • jQuery connect is a plugin used to connect or bind a function with another function. Connect is used to execute a function from any other function or plugin.
  • It can be used by downloading a jQuery connect file from jQuery.com and then including that file in the HTML file. You have to use $.connect to connect one function to another.

88.What is the use of param() method in jQuery?

Ans:

The param() method is used to represent an array or an object in a serialized 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.

89.Differentiate between width() vs css(‘width’) in jQuery

Ans:

There are two different methods in jQuery to change the width of an element. The first way is to use .css(‘width’. and another way is to use .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 both the functions. In .css(‘width’. we have to add px in the width value while in .width(. we don’t have to add px.

90.What are the various Ajax functions available in jQuery?

Ans:

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 include:

  • $.ajax(. – This is considered to be the most low level and basic of 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.
  • $.getJSON(. – This is a special type of shorthand function which is used to accept the url to which the requests are sent. Optional data and optional callback functions are also possible in such functions.

91.Differentiate among .empty() vs .remove() vs .detach() in jQuery.

Ans:

  • .empty() – This method is used to remove all the child elements from matched elements.

Syntax:

  • $(selector..empty(); 
  • .remove() – This method is used to remove all the matched elements. It will remove all the jQuery data associated with the matched element.

Syntax:

  • $(selector..remove(); 
  • .detach() – This method is the same as .remove() method except that the .detach() method doesn’t remove jQuery data associated with the matched elements.

Syntax:

  • $(selector..detach();

92.What is jQuery.noConflict?

Ans:

jQuery no-conflict is an option given by jQuery to overcome the conflicts between the different javascript frameworks or libraries. When you use jQuery no-conflict mode, you replace the $ to a new variable and assign jQuery some other JavaScript libraries. Also, the $ is used as a function or variable name that jQuery has.

93.Mention some advantages of jQuery.

Ans:

There are many advantages of using jQuery. Some of them include :

  • It is like an enhanced version of JavaScript so there is no overhead in learning a new syntax.
  • jQuery has the ability to keep the code simple, readable, clear and reusable.
  • It has Cross-browser support.
  • This would remove the requirement for writing complex loops and DOM scripting library calls.
  •  jQuery helps in event detection and handling.
  • It provides tons of plug-ins for all kinds of needs.

94.How can you read properties of an Object in JavaScript?

Ans:

You can write and read properties of an object using the dot notation as follows

  • // Getting object
  • properties
  • emp.name  // ==> Zara
  • emp.age   // ==> 10
  • // Setting object properties
  • emp.name = “Daisy”  // <== Daisy
  • emp.age  =  20      // <== 20

95.How can you create an Array in JavaScript?

Ans:

You can define arrays using the array literal as follows

  • var x = [];
  • var y = [1, 2, 3, 4, 5];

96.How to read elements of an array in JavaScript?

Ans:

An array has a length property that is useful for iteration. We can read elements of an array as follows

  • var x = [1, 2, 3, 4, 5];
  •  for (var i = 0; i < x.length; i++) {
  •   // Do something with x[i]

97.What is a named function in JavaScript? How to define a named function?

Ans:

A named function has a name when it is defined. A named function can be defined using function keyword as follows

  • function named(){
  •    // do some stuff here
  • }

98.How many types of functions JavaScript supports?

Ans:

A function in JavaScript can be either named or anonymous.

Are you looking training with Right Jobs?

Contact Us

Popular Courses