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!

JQuery Interview Questions Part - 1

JQuery Interview Questions Part - 1

Q 1.     What is JQuery?

Ans 1. JQuery is a Javascript library. The main aim of using JQuery is to write less code and do more. JQuery is a concise Javascript library. It helps in HTML document traversing, event handling, animating and ajax interactions for rapid web development.It is easy to use and cross-platform.

Q 2.     How to access JQuery library?

Ans 2. There are two ways you can access JQuery Library - 

             1. Download from jquery.com

             2. Include JQuery from a CDN (Content Delivery Network)

If you want to download, you can either download  an uncompressed or minimized version of JQuery library. The uncompressed version is often used in development environment and minimized(compressed) version is used in production environments as it is light.

Q 3.     How to include JQuery library on your HTML page after downloading it?

Ans 3. After downloading the JQuery library, place it in the same directory as your HTML file. Then, specify the name of the JQuery library in the "src" attribute of the script tag.

       

            For example - 

                                   <script src="jquery-3.1.1.min.js">

                                   </script>

Q 4.     What is CDN?

Ans 4. CDN is an acronym for Content Delivery Network. It is a system of computers that exist all over the world and cache files for users to access. 

Q 5.    Why including JQuery library from CDN is preferred over downloading it?

Ans 5. Using CDN boosts performance. CDN servers are setup all over the world. So, when a user visits your site, the JQuery library is downloaded from the nearest CDN server. The  main advantage of CDN is that if a user has already visited a site that uses CDN, it will be cached. So, next time when the same user visits your site, JQuery library will be used from cach rather than downloading it from CDN.

Q 6.     How to include JQuery library on your HTML page from CDN?

Ans 6. CDN service is provided by many companies, but some popular ones are - Google and Microsoft. 

To include JQuery library from Google CDN, specify the URL to it in the "src" attribute of the "script" tag as shown below -

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

            </script>

To include JQuery library from Microsoft CDN, specify the URL to it in the "src" attribute of the "script" tag as shown below -

           <script                                                                                                                                                                    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.1.min.js">

           </script>

Q 7.    What is the latest version of JQuery available?

Ans 7. The latest version of JQuery is - 3.1.1 

Q 8.    Which provides better performance JQuery or Javascript?

Ans 8. Javascript is faster than JQuery as JQuery is a library of Javascript only. So, using javascript directly rather than using it through JQuery provides better peformance. We use JQuery just for ease of use and to get the same task done with lesser code.

Q 9.     Is JQuery an open source library?

Ans 9. Yes, JQuery is a free and open source licensed under the MIT license. Open-source software (OSS) is computer software with its source code made available with a license in which the copyright holder provides the rights to study, change, and distribute the software to anyone and for any purpose.

Q 10.     What is the basic syntax of  JQuery?

Ans 10.  Below is the basic syntax of JQuery - 

         Basic Syntax - $(selector).action()

        $ - It represents JQuery library

         Selector - used to select an HTML element

         action - used to perform an action on a selected HTML element

Click here to watch more informative JQuery Tutorial videos!