jQuery Basic Selectors

jQuery selectors are one of the most important parts of the jQuery library.


jQuery selectors allow users to quickly find/identify/select HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. Understanding jQuery selectors is the key to using the jQuery library most effectively.

All selectors in jQuery typically start with the dollar sign and parentheses: $().

$(selector).methodName();


  • Universal Selector - ( * ) Selects all elements.


    The * selector selects all elements in the document, including html, head and body.
    It selects all child elements within the specified element when it is used with other element. for example

    Selector Example
    $("div.parent-class *")

    Above selects all elements of div which has class parent-class
    Caution: The all, or universal, selector is extremely slow, except when used by itself.

    Syntax

    $(" * ").methodName( );

    Example
    <div class="parent-class" id="">
        <p>Thanks for being here.</p>
        <a href="" class="">This is demo link</a>
        <div style="height:100px;width:100%">
        </div>
     </div>
    Result:

    Thanks for being here.

    This is demo link
    Try It Now
    .mahesh{color:red;}

    Result
  • Element Selector Selects all specified elements.


    Element selector selects all elements specified with their name
    We can select all <p> elements as below and perform desired operations.

    Selector Example
    $("p")

    Above statement selects all <p> elements in the given page.

    Syntax

    $("p").methodName( );

    Example
    <div>
        <p>I will toggle slide.</p>
        <p>I will toggle slide too.</p>
     </div>
     <a style="cursor:pointer" class="">Run Example</a>
     <script>$(document).ready(function(){
        $("a").click(function(){
          $("p").slideToggle();
        });
     });
     </script>
    Result:

    I will toggle slide.

    I will toggle slide too.

    Run Example
    Try It Now
    .mahesh{color:red;}

    Result
  • Class Selector Selects all specified classes.


    Class selector is an attribute of HTML elements. It is used to select html elements with specified classes. Using class attribute, we can set our desired style for several HTML elements. An HTML page can have multiple classes with the same name. But be noticed that style applied to a class will apply to all elements which has the same class.


    Note: Starting a class name with a number may causes problems in some browsers. Better not to start class with numbers.
    We select all class elements as below and perform desired styles.
    Selector Example
    $(".class-name")

    Note dot (.) before class name. We select class element using dot following by classname.

    Syntax

    $("p").methodName( );

    Example
    <div>
      <p>I will toggle slide.</p>
      <p>I will toggle slide too.</p>
    </div>
    <a style="cursor:pointer" class="class-selector">Run Example</a>
    <script>$(document).ready(function(){
      $("#element_selector_ex").click(function(){
        $("p").slideToggle();
      });
    });
    </script>
    Result:

    I will toggle slide.

    I will toggle slide too.

    Run Example
    Try It Now
    .mahesh{color:red;}

    Result
  • ID Selector Selects ID element.


    ID selector is also an attribute of HTML elements. It is used to select html elements with specified ID. Since ID is unique, we can select only one element OR it's child element in case id is applied to parent element.


    Note: Starting a id name with a number may causes problems in some browsers. Better not to start class with numbers.
    We select id element as below and perform desired styles/operations.
    Selector Example
    $("#id-name")

    We select id element using # following by id name.

    Syntax

    $("#target-id").methodName( );

    Example
    <div class="default-color-blue">
        <h6>Welcome to jQueryPro.</h6>
        <div>
          <p id="target-id">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
     </div>
     <a id="" style="cursor:pointer" class="btn blue">Run Example</a>
     <script>
     $(document).ready(function(){
        $("a").click(function(){
          $("#target-id").css("color", "red");
        });
      });
    </script>
    Result:

    Welcome to jQueryPro.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


    Run Example
    Try It Now
    .default-color-blue{color:blue;}

    Result