Kindly visit the first part of the jQuery interview questions and answers.
- 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:
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.
What is jQuery.holdReady() function?
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:
What is chaining in jQuery?
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:
What are the slow selectors in jQuery?
Class selectors are slow compared to ID and element.
How jQuery selectors are executed?
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());
Which is the fastest, document.getElementByID('txtName') or $('#txtName').?
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.