jQuery Interview Questions and Answers With Practices: Part 2

Kindly visit the first part of the jQuery interview questions and answers.

Interview question and answer

jQuery Interview Question and Answers With Practices: Part 1

Question What are selectors in jQuery?

AnswerjQuery is one of the main features of jQuery. Because until we won't fetch elements from the DOM we are unable to perform further actions.

  • jQuery Selectors are used to select one or a group of HTML elements from your web page.
  • jQuery selectors always start with a dollar sign and parentheses: $()

There are some ways to select the elements in a web document.

1. Select elements by tag name

Example: $(div)

It will select all the div elements in the document.

2. Select elements by ID

Example: $(“#div1”)

It will select a single element that has an ID of div1.

3. Select elements by class

Example: $(“.even”)

It will select all the elements having a class even as shown in sample applications also.

An example of basic selectors are as shown in the following image:

selectors

There are some more selectors that are listed below and very useful from a jQuery perspective.

  • $('*'): This selector selects all elements in the document.
  • $("p > *"): This selector selects all elements that are children of a paragraph element.
  • $("li:not(.myclass)"): Selects all elements matched by <li> that do not have class="myclass".
  • $("ul li:first"): This selector gets only the first <li> element of the <ul>.
  • $(":empty"): Selects all elements that have no children.
  • $("p:empty"): Selects all elements matched by <p> that have no children.
  • $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
  • $("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.
  • [attr] has attributes like type, value, href and id.
  • [attr=val] has attribute with value val.
  • [attr!=val] does not have attribute with value val.
  • [attr^=val] attribute begins with val.
  • [attr$=val] attribute ends with val.
  • [attr*=val] attribute includes val.
  • [attr~=val] attribute includes val as a word.
  • [attr|=val] attribute begins with val and optional hyphen.

Question What is jQuery.holdReady() function?

Answer By using the jQuery.holdReady() function we can hold or release the execution of jQuery's ready event. This method should be called before we run the ready event. To delay the ready event, we need to call jQuery.holdReady(true);

When we want to release the ready event then we need to call jQuery.holdReady(false);

This function is helpful when we want to load any jQuery plugins before the execution of the ready event or want to perform certain events/functions before document.ready() loads. For example some information also.

For example:

holdReady

Question What is chaining in jQuery?

Answer Chaining is a very powerful feature of jQuery. Chaining means specifying multiple functions and/or selectors to an element.

Chaining reduces the code segment and keeps it very clean and easy to understand. Generaly chaining uses the jQuery built in functions that makes compilation a bit faster.

By using chaining we can write the code above as follows:

$(document).ready(function () {

         $("#div2").html($("#txtBox").prop("readonly")) + '</br>';
         $("#div3").html($("#txtBox").attr("readonly"));
});

The code segment above is described by the image below:

chaining

Question What are the fastest selectors in jQuery?

Answer ID and element selectors are the fastest selectors in jQuery.

Question What are the slow selectors in jQuery?

Answer Class selectors are slow compared to ID and element.

Question How jQuery selectors are executed?

Answer Your last selectors are always executed first. For example, in the following jQuery code, jQuery will first find all the elements with class ".list" and then it will select all the elements with the id "li#first-li".

$('p').html($("li#first-li.list").text());

jQuery selectors executed

Question Which is the fastest, document.getElementByID('txtName') or $('#txtName').?

Answer Native JavaScipt is always fast. The jQuery method to select txtName "$('#txtName')" will internally make a call to document.getElementByID('txtName'). Since jQuery is written on top of JavaScript and it internally uses JavaScript only, JavaScript is always fast.

You can enhance your knowledge more, by reading the following articles.