jQuery Interview Questions (Part-2)


jQuery interview questions and answers

Is jQuery a W3C standard?

No. jQuery does not follow W3C standards . It uses non-standard properties and methods like innerHTML, as well as some browser-specific properties. It is nothing more than a library of pre-written methods and scripts that simplify basic javascript.

Is jQuery is a client or server scripting?

jQuery is a client side library written in JavaScript by John Resig . The client-side environment used to run scripts is usually a browser. The script is transferred from the web server to the users computer over the internet and run directly in the browser. It is important to note that the scripting language needs to be enabled on the client computer.

Server side programming has to do with generating dynamic content. We cannot classify languages as client side or server side. There could be a scenario where a server can execute Javascript and render HTML from it.

Can JQuery Run on MAC or Linux instead of Windows?

JQuery support cross browser and cross platform compatibility hence it simply runs on Windows, MAC, or Linux with all major browser compatibility.

Where jQuery code is getting executed?

jQuery code runs on the web browser.

In general, jQuery code is executed on the client side. But jQuery also give you the ability to call a particular function or action onto your server by sending 'xml-http Ajax request(jqXHR)' targeted specific server-side url, and receiving the response content in many different formats such as (html, Json, xml and so on).

Which is the starting point of code execution in jQuery?

The starting point of jQuery code execution is $(document).ready(function(){}) function that is executed when the DOM is loaded. The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.

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

There are several ways to start using jQuery on your web site. You can:

  1. Download a local copy from jQuery.com
  2. Link to a file via Content Delivery Network (CDN), like Google

What are the two types of CDNs?

Both Microsoft and Google already host jQuery on their CDNs. When to use jQuery from Google or Microsoft, use one of the following:

Google CDN

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head>

Microsoft CDN

<head> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> </head>
If you wish to use jQuery CDN other than Google or Microsoft hosted jQuery library, you might consider using this and ensures uses the latest version of jQuery:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Can we use protocol less URL while referencing jQuery from CDNs?

Yes. The "protocol-less" URL is the best way to reference third party content that's available via both HTTP and HTTPS. When a URL's protocol is omitted, the browser uses the underlying document's protocol instead.
ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

How to resolve conflicts with other libraries?

jQuery.noConflict() method allows you to use multiple JavaScript Libraries, while using jQuery. The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.

How to execute jQuery code after the DOM is ready?

It is always a great idea to wrap your Javascript code inside jQuery.ready() . You can use the explicit call.
$(document).ready(function(){ // do this after dom is ready });

Or use the shortcut

$(function(){ // do this after dom is ready });

Which sign is used as a shortcut for jQuery?

By default, jQuery uses "$" as a shortcut for "jQuery".

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

You can use $ or jQuery signs. By default, jQuery uses "$" as a shortcut for "jQuery".

So, using $("#id") or jQuery("#id") is the same.

jQuery has many ways of accessing its library:

window.jQuery('#id').html("Some Text"); window.$('#id').html("Some Text"); jQuery('#id').html("Some Text"); $('#id').html("Some Text");
jQuery or window.jQuery can be used instead of $ if you were using more than one library.

Can we add more than one "document.ready" function in a page?

Yes. You can use multiple document ready handler, there is no special advantage even though you can use jQuery code in several place. All will get executed on first called first run basis. It is important to note that each jQuery() call must actually return. If an exception is thrown in one, subsequent calls will never be executed.

What is the difference between "#" and "." selector in JQuery?

The "#" is used to select by id:

$('#myID')

It will select one and only one element which have id myID.

The '.' is used to select elements by class:

$('.myClass')

It will select all the elements which have class as myClass.

How We Can Write Code Specific To Browser In Jquery?

jQuery provides jQuery.browser property which returns the browser information. The $.browser property is deprecated in jQuery 1.3, and its functionality may be moved to a team-supported plugin in a future release of jQuery.

What is the difference between jQuery and jQuery UI?

Jquery is a JavaScript library meant for dom operations. JQueryUI is adds to JQuery to provide interactive UI components such as buttons, tabs, sliders, drag and drop and more. Plus it provides a style theming system. It works with its own CSS files. jQuery is the core library. jQueryUI is built on top of it. If you use jQueryUI, you must also include jQuery.

How to debug jQuery?

  1. Hit the F12 key
  2. Select the Scripts, or Sources, tab in the developer tools
  3. Click the little folder icon in the top level
  4. Select your JavaScript file
  5. Add a breakpoint by clicking on the line number on the left
  6. Execute your JavaScript

Which program is useful for testing jQuery?

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.

Whether jQuery HTML work for both HTML and XML documents?

No, jQuery HTML only works for HTML documents not for XML Documents.

Differentiate the concepts of .js and .min.js?

jQuery.min.js is a compressed version of jQuery.js. In terms of functionality, there is no difference between the jQuery.js and jQuery.min.js . The difference is only in whether it's formatted nicely for readability or compactly for smaller file size(jQuery.min.js). You are able to read jQuery.js and understandable. The unnecessary characters are removed in jQuery.js.min for fast loading purposes and less size. The removal of whitespace removes line breaks and spaces messing up the formatting, and the shortening of variable names (including some function names) replaces the original variable names with meaningless letters. It is better using the minified version (.min) for your live environment as Search Engines are now checking on page loading times.

Can I use JavaScript and JQuery on the same page?

Yes you can, jQuery is a Javascript library , therefore the two can be used in the same file.

Can jQuery work with other JavaScript libraries?

jQuery.noConflict() method allows you to use multiple frameworks, while using jQuery.

It is important to note that, even with noConflict it is possible for problems to occur. Libraries use different internal methods to manipulate events and DOM nodes. There is the possibility of subtle bugs that noConflict is unable to prevent.

How to resolve confict with another JS library if $ is already being in use?

Try a new alias to jQuery.

var $jQ = jQuery.noConflict(); jQ(document).ready(function() { jQ( "div" ).hide(); });

What are the frequently used type of selectors in Jquery?

Selectors allow page elements to be selected. The frequently used type of selectors in jQuery are:

  1. ID Selector - Selects the element with the ID using the '#' keyword.

  2. Class Selector - Selects the element with the class name using the '.' keyword.

  3. Element Selector - Selects the element using its type Ex. $("p").

Difference between width() and css('width')?

jQuery allows two ways to set width and height of any element. You can set using css or you can use jQuery provided methods. The difference between jQuery width() and css(width) is that the jQuery width() returns a unit-less pixel value (for ex. 100) while the css(width) returns a value with units intact (for ex. 100px). The jQuery width() method is recommended when an element's width needs to be used in a mathematical calculation.

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

jQuery.size() and jQuery.length both returns the number of element in an object. But the jQuery.length property is preferred because it does not have the overhead of a function call. Moreover, jQuery.size() deprecated in jQuery 1.8 and completely removed in jQuery 3.0.

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

The this is the DOM object and $(this) is jquery object wrapper around 'this' DOM object. When using 'this' you can directly access the DOM node that's being processed, but not jQuery object. When using $(this), you can call jQuery methods on it, but not DOM object . In many cases it's better to use plain 'this'.

What is the difference between find and children methods?

The jQuery $.find() method may travel through multiple levels down to get the descendent elements. Whereas, the $.children method can go to just one level down.

How to get the direct parent of an element using jQuery?

$(element).parent() returns the immediate parent.