jQuery Selector examples

jQuery selectors are important part of jQuery. It is used to select DOM elements and manipulate it.

Syntax:
It should start with $ followed by parenthesis.
For below html, you want to hide text on click of button.

So you need to select button with id "myButton" as $("#myButton") and div with id helloWorldDiv as $("#helloWorldDiv")

For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
  $(document).ready(function() {
  $("#myButton").click(function() { $("#helloWorldDiv").hide()
  });

});  
</script>
</head>
<body>    
<button id="myButton">Hide text</button>
</br>
</br>
<div id="helloWorldDiv">Hello world</div> 
</body>
</html>

Live demo :
jQuery selector example

So here on button click , we have hidden helloWorldDiv text.

Example on various selectors :

Element selector:

If you just write element name with $(), it will select all those element of that type.
For example: if you use $("div") , it will select all the div element in DOM.
In this example, on click of button , we will change text of all div present in the DOM.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
  $(document).ready(function() {
  $("#myButton").click(function() { $("div").html("Hello java2blog")
  });

});  
</script>
</head>
<body>    
<button id="myButton">Change all div text</button>
</br>
</br>
<div id="helloWorldDiv">Hello John</div>

<div id="helloWorldDiv">Hello Martin</div>

<div id="helloWorldDiv">Hello Smith</div>
</body>
</html>

Live demo:
jQuery element selector example

#Id selector :

For selecting element with id, you need to use $(#id).

Example:
So you need to select button with id "myButton" as $("#myButton") and div with id helloWorldDiv as $("#helloWorldDiv")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
  $(document).ready(function() {
  $("#myButton").click(function() { $("#helloWorldDiv").hide()
  });

});  
</script>
</head>
<body>    
<button id="myButton">Hide text</button>
</br>
</br>
<div id="helloWorldDiv">Hello world</div> 
</body>
</html>

Live demo :
jQuery id selector example

So here on button click , we have hidden helloWorldDiv text.

class selector:

You can get all elements which use some class of CSS.
You need to use $(.className) to select all elements which uses that class. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
  $(document).ready(function() {
   $(".abc").css("background-color","orange");

});  
</script>
</head>
<body>    
<div id="helloWorldDiv" class ="abc">Hello John</div>

<div id="helloWorldDiv">Hello Martin</div>

<div id="helloWorldDiv" class ="abc">Hello Smith</div>
</body>
</html>

Live Demo:
jQuery class selector example

For more jQuery selectors, please refer jQuery selector API

Written by Arpit:

If you have read the post and liked it. Please connect with me on Facebook | Twitter | Google Plus

 

Java tutorial for beginners Copyright © 2012