jQuery Selectors

Date Published: 25/04/2020 Published By: JaiSchool

Jquery gives us various selectors to select HTML element which are the following:-

  1. "ID" Selector
  2. "CLASS" Selector
  3. "ELEMENT" Selector
  4. "ATTRIBUTE" Selector
  5. Select SPECIFIC Attribute
  6. Select MULTIPLE Element
  7. Select CHILD Element by TAG
  8. Select CHILD Element By ID or CLASS
  9. "this" Keyword Selector
  10. "document" Selector
  11. Use Variable as Selector

Id selector in Jquery

$(document).ready(function(){
 $("#heading").css("color","red");
});

Class selector in Jquery

$(document).ready(function(){
     $(".btn").click(function(){
          alert("welcome");
     });
});

Element Selector in Jquery

$(document).ready(function(){
  $("p").css({
     "color":"blue",
     "text-align":"justify"
  });
});

Attribute Selector in Jquery

$(document).ready(function(){
  $("[attributename]").show();
});

Select Specific Attribute in Jquery

$(document).ready(function(){
  $("[attributename=value]").show();
});

Select Multiple Element in Jquery

$(document).ready(function(){
  $("p,h1").css({
     "color":"blue",
     "text-align":"justify"
  });
});

Select child Element by tag

$(document).ready(function(){
     $("div p").click(function(){
          alert("welcome");
     });
});

Select child element by ID or CLASS

$(document).ready(function(){
     $("div.result").click(function(){
          alert("welcome");
     });
});

Select Event Element Using "this" Keyword

$(document).ready(function(){
     $("div p").click(function(){
          alert(this);
     });
});

document selector in Jquery

$(document).ready(function(){
     $(document).click(function(){
          alert(this);
     });
});

Use Variable as Selector in Jquey

<script>
	$(document).ready(function(){
		var heading = $("h1");
		$(heading).dblclick(function(){
			alert("Jaischool");
		});
	});
</script>

Publish A Comment

Leave a Reply

Your email address will not be published.