home

Jquery Selectors

Jquery selectors are most useful and important section in jquery, selectors allow you to select a particular element based on their id, classes, types, attributes, values of attributes and more. this article will cover jquery selectors, selectors to use where we specified to highlight a particular element in the html document(any part in the web page).

jQuery Selectors start with dollar sign $()with parentheses.

Jquery Selecting by tag (b)

Below the html code it has five paragraphs here and first three paragraphs enclosed with a div tag and every single paragraph have b (b=bold text) tags. and also we have a button tag in the first line with id called btn (id="btn").

<button id="btn">Button</button>
<div>
<p>this is the first line of <b>example</b> html code</p>
<p>this is the second line of <b>example</b> html code</p>
<p>this is the third line of <b>example</b> html code</p>
</div>

Jquery Selecting by tag (b) Demo

this is the first line of example html code

this is the second line of example html code

this is the third line of example html code

Jquery code

Inside the function specified a selector $ dollar assign powered by pair parentheses inside the parentheses ("#btn") and selector goose to indeed the parentheses with single quotations double quotations mark. when user clicks on the button that event will run function will execute all b (bold text) tag element will be highlight with blue color.

<script>
  $(document).ready(function() {
    $("#btn").click(function(){
     $("b").css("background-color","#39F");
   });
  });
</script>

Jquery Selecting by Id(#)

This simple code about selecting by id, we have two id here one is #btn and another one is #button.

Element id can be anyting depends on your requirement.
$(document).ready(function() {
    $("#btnid").click(function(){
    $("#buttonid").css("background-color","#ff00ff");
  });
});

//HTML code:-
<button id="btnid">Click me</button>
<button id="buttonid">Click me</button>

Jquery Selecting by Class(.)

This simple code about selecting by class(.), we have couple of classes here one is .btn and another one is .button(class name can be anything).

$(document).ready(function() {
    $(".btnclass").click(function(){
    $(".buttonclass").css("background-color","#ff00ff");
  });
});
//HTML code:-
<button class="btn">Click me</button>
<button class="button">Click me</button>

Jquery Selecting by Pseudo-class

This sample code about selecting by Pseudo class, we have two div here, in this case first div element will be select.

  $(document).ready(function() {
   $("#btn").click(function(){
       $("div:first").css("background-color","#00ff00");
   });
 });

//HTML code:-
<button class="btn">Click me</button> <div>div number1</div> <div>div number2</div>

Jquery Selecting by Input

This simple code about selecting by input, all inputs selects.

$(document).ready(function() {
    $("#btn").click(function(){
    $(":input").css("background-color","#ff00ff");
  });
});

//HTML code:-
<button id="btn">Click me</button>
<input type="text">This input type element</input> <input type="text">This input type element</input>
Input Type1 Input Type2 Input Type3

Jquery Selectors List

Selector
Example code
Description
* $(document).ready(function() {
$("#btn").click(function(){
$("*").css("background-color","#39F");
});
});
All elements
#id $(document).ready(function() {
$("#btn").click(function(){
$("#button").css("background-color","#39F");
});
});
The element with id="button"
.class $(document).ready(function() {
$("#btn").click(function(){
$(".intro").css("background-color","#39F");
});
});
All elements with class="intro"
.class,.class $(document).ready(function() {
$("#btn").click(function(){
$(".intro,.demo").css("$(".class,.class2").css("background-color","#39F");
});
});
All elements with the class "class1" or "class2"
element (p) $(document).ready(function() {
$("#btn").click(function(){
$("p").css("background-color","#39F");
});
});
All <p> elements
h1 elements $(document).ready(function() {
$("#btn").click(function(){
$("h1").css("background-color","#39F");
});
});
All <h1> elements
:first $(document).ready(function() {
$("#btn").click(function(){
$("div:first").css("background-color","#39F");
});
});
The first <div> element
:last $(document).ready(function() {
$("#btn").click(function(){
$("div:last").css("background-color","#39F");
});
});
The last <div> element
:even $(document).ready(function() {
$("#btn").click(function(){
$("tr:even").css("background-color","#39F");
});
});
All even <tr> elements
:odd $(document).ready(function() {
$("#btn").click(function(){
$("tr:odd").css("background-color","#39F");
});
});
All odd <tr> elements
:first-child $(document).ready(function() {
$("#btn").click(function(){
$("div:first-child").css("background-color","#39F");
});
});
All <d> elements that are the first child of their parent
:last-child $(document).ready(function() {
$("#btn").click(function(){
$("div:last-child").css("background-color","#39F");
});
});
All <p> elements that are the last child of their parent
:root $(document).ready(function() {
$("#btn").click(function(){
$(":root").css("background-color","#39F");
});
});
The documents root element
:input $(document).ready(function() {
$("#btn").click(function(){
$(":input").css("background-color","#39F");
});
});
All input elements