jQuery Interview Questions

jQuery Interview Questions and Answers are designed to provide a better understanding of general questions regarding jQuery scripting and its functionality, jQuery Fundamentals , jQueryUI etc. Here are some of the Advanced jQuery Interview Questions and Answers for freshers and experienced.

What is $() in jQuery library?

The $ sign is just an alias to jQuery() object. It simply invokes the jQuery library's selector functionality.

Basic syntax is:

$(selector).action()

A $ (dollar sign) to define jQuery.
A (selector) to "find (or query)" HTML elements.
A jQuery action() to be performed on the element(s).

For example, $("#myBox") returns the jQuery object for the "myBox Div" which can then be modified. The idea is that everything is done with the one global symbol , jQuery, but you can use $ (because it's shorter) if you like.

What are the advantages of jQuery?

There are a few big advantages to using jQuery over handwritten code:

Simple : Ability to keep the code simple, clear, readable and reusable.
Ease of use: jQuery is more easy to use than the standard javascript and other libraries.
Well documented: jQuery is well documented and there are plenty of examples and plenty of code demonstrating those examples.
Open-source library: jQuery is an open-source library that is free and supported well across different applications.
Effectiveness : It is essentially a domain-specific language for DOM manipulation and querying. This specificity is a major source of its utility and effectiveness.
Know very little to get things done: With jQuery you don't need to really understand how the DOM, stuff like event delegation are just 'done' for your ease.

What is the basic requirement to start with the jQuery?

jQuery is a collection of well written functions. These functions collection (library) is stored in a scripting file (js file) and you need refer to its library to start with jQuery. It can be downloaded from : https://jquery.com/download/

What is jQuery Mobile?

jQuery Mobile is a project of the jQuery Foundation . It is an HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone , tablet and desktop devices.

Can you use JavaScript and jQuery on same page?

Yes you can. You can use JavaScript and jQuery on the same page until all of them don't have any conflict with a method definition. In order to use jQuery , you need to add .js library reference on to the page, whereas for JavaScript is directly supported by web-browsers.

How can you determine if a variable is 'undefined' or 'null'?

The standard way to catch null and undefined simultaneously is this:

if (variable == null) { // your code here. }

Because null == undefined is true, the above code will catch both null and undefined.

Also you can write equivalent to more explicit but less concise:

if (variable === undefined variable === null) { // your code here. }

This should work for any variable that is either undeclared or declared and explicitly set to null or undefined.

What is the difference between jQuery click() and on("click")?

$(selector).click() event only works when element gets rendered and attached to elements loaded (when the DOM is ready).
$(selector).on("click") events are dynamically attached to DOM elements, which is helpful when you want to attach an event to DOM elements that are rendered on ajax request or something else (after the DOM is ready).

It is important to note that $(selector).on("click") differs from $(selector).click() in that on("click") has the ability to create delegated event handlers by passing a selector parameter, whereas $(selector).click() does not. When on("click") is called without a selector parameter, it behaves exactly the same as $(selector).click(). If you want event delegation, it is better to use $(selector).on("click"). $(selector).on("click") event is the recommended way to do all your event binding because it rolls all the functionality of both .bind() and .live() into one function that alters behavior as you pass it different parameters.

How to escaping HTML strings with jQuery

You can use jQuery's .text() function. example:

var escString = "<h1>Testing of escaping HTML strings</h1><p>this string containing html characters & such in it.</p>";

$(document).ready(function(){ $("#escDiv").text(escString); });

The result of the .text() method is a string containing the combined text of all matched elements.

What do you mean by Grouping Selectors?

While more than one selector shares the same statement, they can be grouped together through a comma-separated (,) list; this enables you to reduce the size of the HTML page (in case of SEO, every bit and byte is important) and make it more readable . The following code applies the same color to the h2, h3 , p {color: red;}.

How to get current URL with jQuery?

$(location).attr('href');

var x = $(location).attr('<property>');

Also, you can get this done by using JavaScript's built-in window.location object .

var pathname = window.location.pathname; // Returns path only var url = window.location.href; // Returns full URL var origin = window.location.origin; // Returns base URL

What is the best way to detect a mobile device?

You can use window.matchMedia() method to detect a mobile device based on the CSS media query.

if (window.matchMedia("(max-width: 767px)").matches) { // The viewport is less than 768 pixels wide document.write("This is a mobile device."); }

You may also use navigator.userAgentData.mobile .

const isMobile = navigator.userAgentData.mobile;

What is "Blocked a frame with origin from accessing a cross-origin frame"?

Normally, scripts on different pages are allowed to access each other if and only if the pages they originate from share the same protocol, port number, and host. The above error message shows that you can't access an < iframe > with different origin using JavaScript/jQuery, it would be a huge security flaw if you could do it.

window.postMessage() provides a controlled mechanism to securely circumvent this restriction.

How to check if an element is hidden in jQuery?

$(element).is(":hidden")

You can use the :hidden selector is to check if an element is hidden in jQuery. jQuery is() method traverses along the DOM elements to find a match, which satisfies the passed parameter amd it will return true if there is a match, otherwise return false.

What is noConflict() in jQuery?

jQuery noConflict() function to give control of the $ variable back to whichever library first implemented it. This function is very useful if you have several JavaScripts frameworks that can be boiled down to $x(...)-style calls.

var $j = jQuery.noConflict(); $j("#myDiv").hide();

This function will reset the $ variable so it's no longer an alias of jQuery.

What is this function call mean?

(function($) { /*code here*/ })(jQuery);

This is a "JavaScript Module" pattern, implemented with an immediately invoking function. The purpose of passing jQuery in to the parenthesis is to provide local scoping to the global variable. This helps reduce the amount of overhead of looking up the $ variable , and allows better compression/optimization for minifiers in some cases.

What is "Origin null is not allowed by Access-Control-Allow-Origin"

Chrome and Safari has a restriction on using ajax with local resources. This error means that you are trying to perform Ajax on a local file. This is forbidden for security reasons. In order to solve this problem, you can use firefox or upload your data to a temporary server. If you still want to use Chrome, start it with the below option;

--allow-file-access-from-files

Uncaught ReferenceError: $ is not defined?

Basically $ is an alias of jQuery() . This error is throwing because you are trying to use jQuery before jQuery library has been loaded. In order to solve this error, you should put the references to the jquery library first. Continue....... jQuery Interview Questions (Part-2)

Related Topics