jQuery Selectors

JQuery selectors allow you to select and manipulate HTML elements as a group or as a single element. Selectors are an essential part of jQuery that provide a great way to locate nodes in the DOM quickly and easily. With jQuery selectors you can find elements based on their id, classes, types, attributes, values of attributes and much more All type of selectors in jQuery, start with the dollar sign and parentheses: $().


Element :

An element refers to a name of a tag. A <p>, <p id="head">, <p class="show"> can be an element. The following selector can be used to find the elements.

$('#myid') - selects element with id = "myid"
$('.myclass') - selects element with class = "myclass"
$(this) - selects current HTML element
$("*") - selects all elements

Element Selectors

Attribute Selectors
All Selector
Select this
Child Selector
:eq() Selector

Question for jquery selectors

  1. How do you select an element using class or ID ?
    2. Ans :
    $('#divid')-> It selects the element having id="divid"
    $('.cls')-> It selects the element having class ="cls"
  2. How do you select an element having src value ending with jpg ?
    3. Ans :
    $("[src$='jpg']")-> It selects the element having attribute src ending with jpg
  3. How do you select children ?
    4. Ans :
    $('parent > child') -> It selects the "child" element having parent element="parent"
    $('.cls')-> It selects the element having class ="cls"
  4. What are the ways for selecting the element ?
    5. Ans :
    We can find elements based on their id, classes, types, attributes, values of attributes
  5. How to count all element with in a div having id="id_dv"?
    6. Ans :
    $("#id_dv").find("*").length ->It gives the length of element inside the div
  6. How to count all element having border="3px solid red" with in a window ?
    7. Ans :
    var cnt = $("[style='border: 3px solid red;']").length; ->It gives the length of element inside the page
  7. How to change background color of a third div element from a list of five div ?
    8. Ans :
    $("div:eq(2)").css("background-color","yellow");
  8. How to select all div elements that have a p element ?
    9. Ans :
    $("div:has(p)") -> It selects the div having a paragraph
  9. How to select all input elements that are not empty ?
    10. Ans :
    $(":input").each(function() {
    if($(this).val() != "")
    alert("Empty Fields!!");
    });
    OR
    for a more specific answer, if you only want those types, change the selector like this:

    $(":text, :file, :checkbox, select, textarea").each(function() {
    if($(this).val() != "")
    alert("Empty Fields!!");
    });
  10. How to select all paragraph elements that are siblings of a div element ?
    11. Ans :
    $("div ~ p") -> It selects All p elements that are siblings of a div element
  11. How to select the paragraph elements that are next to each div elements ?
    12. Ans :
    $("div+p") -> It selects all paragraph elements that are next to the div element
  12. How to select element that currently has focused ?
    13. Ans :
    $(":focus") -> It select element that currently has focused
  13. How to get value of selected radio button ?
    14. Ans :
    $("input[type='radio'][name='gender']:checked").val();
  14. How to select the checked checkbox ?
    15. Ans :
    $("input[type='checkbox']:checked");
After editing Click here:
Output: