jQuey Selectors

Next ❯jQuey Events

Used to select elements on which you want to perform some action on it

  • turned_in_notTypes of Selectors
    • Element Selector
    • this Selector
    • Id Selector
    • Class Selector
    • Universal Selector
    • Group Selector

Element Selector

It selects elements based on the element name

/*Syntax*/

$("element_name")
Example:
  • turned_in_notElement Selector
    $(document).ready(function(){
   $("button").click(function(){
    $("p").css("color","green");
  });
});
    • Here, All <p> elements will have green color text on click of a button

this Selector

It selects current element, only used inside events

/*Syntax*/

$(this)
Example:
  • turned_in_notthis Selector
    $(document).ready(function(){
  $("p").click(function(){ 
    $(this).css("color","green");
  });
});
    • Here, In all <p> element, the one which has been clicked, its text color becomes green
    • Remember! Don't declare it inside double quote (" ")

Id Selector

It selects the id attribute of an HTML element to select a specific element

  • To select specific id, write a hash (#) character, followed by the id name of the element
  • Note: Id of an element should be unique within a web page
  • Remember : Id name can't start with a number

/*Syntax*/

$("#id_name")
Example:
  • turned_in_notId Selector
    $(document).ready(function(){
    $("button").click(function(){
      $("#id_name").css("color","green");
    });
});
    • Here, HTML Element with id="id_name" will have green color text on click of a button

Class Selector

It selects elements based on the specific class attribute

  • To select specific class, write a period/dot (.) character, followed by the class name of the element
  • Remember : Class name can't start with a number

/*Syntax*/

$(".class_name")
Example:
  • turned_in_notClass Selector
    $(document).ready(function(){
   $("button").click(function(){
    $(".class_name").css("color","red");
   });
});
    • Here, All HTML Elements with className="class_name" will have red color text on click of a button
  • label_outlineClass Selector with specific HTML Element
    $(document).ready(function(){
   $("button").click(function(){
    $("p.class_name").css("color","red");
   });
});
    • Here, only HTML <> Element with className="class_name" will have red color text on click of a button
  • label_outlineClass Selector with multi class names
    $(document).ready(function(){
   $("button").click(function(){
    $(".class_name1.class_name2").css("color","red");
   });
});
    • Here, All HTML Elements with className="class_name1 class_name2" will have red color text on click of a button

Universal Selector

It selects all elements on the web page

  • Use Star Mark (*)

/*Syntax*/

$("*")
Example:
  • turned_in_notUniversal Selector
    $(document).ready(function(){
   $("button").click(function(){
    $("*").css("color","blue");
   });
});
    • Here, All the element inside web page will have blue color text on click of a button

Group Selector

Used to to select multiple elements

  • To group selectors, separate each selector with a comma (,)

/*Syntax*/

$("selector1,selector2,.....,selectorN")
Example:
  • turned_in_notGroup Selector
    $(document).ready(function(){
   $("button").click(function(){
    $("p, h1, h2").css("color","red");
   });
});
    • Here, Only <p>, <h1>, <h2> Elements will have red color text on click of a button

*Important

When you use any of the meta-characters (such as ~!@#$%^&*.,/?:;|/'+"<>(){}[]) as a literal part of a name and want to access in selector then
you should use double backslashes (\\)

Example: 

id="ab.cd"

Selector becomes:

$("#ab\\.cd")

Just replace meta-character with \\meta-character


  • jQuey Events
❮ Prev Ways To Add
Next ❯jQuey Events
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯