JQuery Interview Questions Part - 2

JQuery Interview Questions Part - 2

Q 1.     What is a selector?

Ans 1. A selector is used to select a particular HTML element or a group of HTML elements that we intend to perform some action on.

It is always enclosed with parenthesis that follow the "$" character as can be seen below -

    $(selector).action()

For example - $("p") selects all the <p> elements on the HTML page.

Q 2.     How to select an HTML element having a particular id ?

Ans 2.  We can select an HTML element having a particular id as shown below -

                           $("#Name_of _Element").action()

For example - Suppose we need to select this "p" element with id = "para"-  <p id="para">Tech Geek</p>

Then use - $("#para") 
Result - Above highlighted element gets selected

Remember :- Use unique ids for all the elements within an HTML document

Q 3.     How to select all the HTML elements?

Ans 3. To select all the HTML elements use - $("*")

Q 4.     How to select the current HTML element?

Ans 4. To select the current HTML element use - $(this)

Q 5.      How to select all the HTML elements having a particular class?

Ans 5.  We can select all the HTML elements having a particular class as shown below -

                           $(".Name_of_class").action()

For example - Suppose we need to select all these three elements having class = "test" -  
                                <p class="test">Tech Geek</p>
                                <p class="test">JQuery</p>
                                <button class="test">Click Here</button>

Then use - $(".test") 

Result - Above highlighted elements get selected

Q 6.     How to select all the HTML elements of the same type having a particular class?

Ans 6. We can select all the HTML elements of the same type having a particular class as shown below -

               $("Name_of_Element.Name_of_class").action()

For example - Suppose we need to select all the elements of type "p" having class = "test" -  
                                <p class="test">Tech Geek</p>
                                <p class="test">JQuery</p>
                                <button class="test">Click Here</button>

Then use - $("p.test") 

Result - Above highlighted elements get selected

Q 7.     How to select the first HTML element of a particular type?

Ans 7. We can select the first HTML element of a particular type as shown below -

              $("Name_of_Element:first").action()

For example - Suppose we need to select the first element of type "p" -  
                  <p>Tech Geek</p>
                  <p>JQuery</p>
                  <p>Tutorial</p>

Then use - $("p:first")  

Result - Above highlighted element gets selected

Q 8.    How to select the first HTML element of a particular type inside the first HTML element of another type?

Ans 8. We can select the first HTML element of a particular type inside the first HTML element of another type as shown below-
              $("Name_of_OuterElement Name_of_InnerElement:first").action()

For example - Suppose we need to select the first "<li>" element inside the first "<ul>" element -  
                  <ul>
                          <li>JQuery</li>
                          <li>Javascript</li>
                  </ul>
                  <ul>
                          <li>.Net</li>
                          <li>PHP</li>
                          <li>Java</li>
                   </ul>

Then use - $("ul li:first")  
Result - Above highlighted element gets selected

Q 9.     How to select the first HTML element of a particular type inside every HTML element of another type?

Ans 9. We can select the first HTML element of a particular type inside every HTML element of another type as shown below-
          $("Name_of_OuterElement Name_of_InnerElement:first-child").action()

For example - Suppose we need to select the first "<li>" element inside every "<ul>" element -  
                  <ul>
                          <li>JQuery</li>
                          <li>Javascript</li>
                  </ul>
                  <ul>
                          <li>.Net</li>
                          <li>PHP</li>
                          <li>Java</li>
                   </ul>

Then use - $("ul li:first-child")  
Result - Above highlighted elements get selected

Q 10.     How to select all the HTML elements that have a particular attribute?

Ans 10.  We can select all the HTML elements that have a particular attribute as shown below-

              $("[Name_of_Attribute]").action()

For example - Suppose we need to select all the elements that have an attribute - "href" -  

<a href="https://www.youtube.com/watch?v=gnlMOxJDrME">JQuery Selectors</a>
<p id="para">JQuery Tutorial</p>

<a href="https://www.youtube.com/channel/UClAKLTS-0zQsH9EDn1dpYyA">Tech Geek</a>

Then use - $("[href]")  
Result - Above highlighted elements get selected

Q 11.     How to select an HTML element that has a particular attribute with a particular value?

Ans 11. We can select an HTML element that has a particular attribute with a particular value as shown below-

              $("Name_of_Element[Name_of_Attribute='Value']").action()

For example - Suppose we need to select the element "<a>" that has an attribute - "href" with value = "https://www.youtube.com/watch?v=gnlMOxJDrME" -  

<a href="https://www.youtube.com/watch?v=gnlMOxJDrME">JQuery Selectors</a>
<p id="para">JQuery Tutorial</p>
<a href="https://www.youtube.com/channel/UClAKLTS-0zQsH9EDn1dpYyA">Tech Geek</a>

Then use - $("a[href='https://www.youtube.com/watch?v=gnlMOxJDrME']")  
Result - Above highlighted element gets selected

Q 12.     How to select all the even rows from a table HTML element?

Ans 12.  We can select all the even rows from a table HTML element as shown below-

                          $("tr:even").action()

For example - Suppose we need to select all the even rows '<tr>' of the table element-  
                  <table>
                          <tr>
                                 <td>JQuery</td>
                          </tr>
                          <tr>
                                 <td>AngularJS</td>
                          </tr>
                          <tr>
                                 <td>NodeJS</td>
                          </tr>
                          <tr>
                                 <td>Backbone</td>
                          </tr>
                  </table>

Then use - $("tr:even")  
Result - Above highlighted elements get selected i.e. elements at indexes 0 and 2

Similarly, you can select odd rows of a table element using $("tr:odd") and result would be as shown below(elements get selected at indexes 1 and 3) -

                  <table>
                          <tr>
                                 <td>JQuery</td>
                          </tr>
                          <tr>
                                 <td>AngularJS</td>
                          </tr>
                          <tr>
                                 <td>NodeJS</td>
                          </tr>
                          <tr>
                                 <td>Backbone</td>
                          </tr>
                  </table>

Click here to watch more informative JQuery Tutorial videos!