jQuery Selectors

jQuery selectors are used to select the target HTML element. The selection of HTML elements can be done by element name, classes, id, type, attributes, the value of the attributes, and much more. Please keep in mind that all jQuery selectors start with the dollar sign and parentheses:$(). Let us understand every jQuery selector step by step.

Please keep in mind that all jQuery selectors start with the dollar sign and parentheses:$().

Let us understand every jQuery selector step by step.

Selecting Element By It's Name

jQuery element selector selects the target HTML element by element's name.

General Syntax

      $("element Name") i.e $("p"),$("h2")...

Try it now

Source Code

          
            $(document).ready(function () {
  $("button").click(function () {
    $("p").hide();
  });
});

Try it now

jQuery #id Selector

jQuery #id Selector selects the target HTML element by its id attribute. Please keep in mind that the id attribute of the element should be unique means no other HTML element should contain the same id value.

General Syntax

      $("#{element-id-name}") i.e  $("#mark");

Try it now

Source Code

          
            $(document).ready(function () {
  $("#mark").css({
    background: "green",
    color: "white",
    padding: "10px",
    "font-size": "22px",
  });
});

Try it now

Selecting Element By Class Name Attribute

The class name selector selects the elements with the help of a specific class of the element.

Please keep in mind that a similar class can be assigned to more than one HTML element.

Therefore class selector selects either one element or more than one element.

General Syntax

      $(".{element class name}") i.e $(".highlight");

Try it now

Source Code

          
            $(document).ready(function () {
  $(".highlight").css({
    background: "green",
    color: "white",
    "font-size": "20px",
    padding: "10px",
  });
});

Try it now

Element Selection By Element Property Name

Attribute selector is used to select the HTML element by one of the HTML element's attribute names.

General Syntax

      $("element property") i.e   $('a[href="https://shapeyourpath.com"]');

Try it now

Source Code

          
            $(document).ready(function () {
  $('a[href="https://shapeyourpath.com"]').css({
    background: "lightgrey",
    padding: "5px",
    "font-size": "15px",
    color: "black",
    "text-decoration": "none",
  });
});

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4