jQuery Selectors

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>