jQuery Selectors

You can manipulate HTML document by using jQuery selectors. The jQuery selectors start with dollar sign and parenthese. 

For example:
$("selectors"); 

The Element Selectors
You can select element by using element name.
You can use the element selector to select element by using element name.
You can select all <abbr> elements on a page like this: $("abbr");
For example, When you click on a button, all <abbr> elements will be hidden:

Example of Code

<script type="text/javascript">
$(document).ready(function(){
  $(".jquery-syntax-element-button").click(function(){
    $("abbr").hide();
  });
});
</script>
<abbr title="First value">First</abbr>
<abbr title="Second value">Second</abbr>
<abbr title="Third value">Third</abbr>
<button class="jquery-syntax-element-button">Button</button>

Output

FirstSecondThirdButton

The ID Selectors
You can use the ID selector to select a single element with the unique ID on the page. You must know about that id attribute should be unique in an HTML document. 

<script type="text/javascript">
$(document).ready(function(){
    // Highlight element with id mark
    $("#jquery-syntax-id-button").css("background", "red");
});
</script> 
<p id="jquery-syntax-id-button">First</p>
<p>Second</p>
<p>Third</p>

Output

First

Second

Third

The Class Selectors

You can use the class selector to select element by using class name. The class selector is helpfull if you want to select multiple element, Because multiple HTML element could have same class name and you can easily apply same action on different elements.   

Example of Code
<script type="text/javascript">
$(document).ready(function(){
    // Highlight elements with class mark
    $(".jquery-syntax-class-button").css("background", "blue");
});
</script>
<p class="jquery-syntax-class-button">First</p>
<p class="jquery-syntax-class-button">Second</p>
<p>Third</p>

Output

First

Second

Third

The Attribute Selectors

You can select element by it's attribute and this is called attribute selector. For example <input> element has type and <a> element has href attribute etc.  

Example of Code     

<script type="text/javascript">
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "yellow");
});
</script>
<form>
    <label>First Name: <input type="text"></label>
    <label>Email: <input type="email"></label>
</form>

Output

First Name: Email:

You can also use following selectors according to your need.

Syntax    Description    
$("*")    It is used to selects all elements    
$(this)    It is used to selects the current HTML element    
$("p.intro")    It is used to selects all <p> elements with class="intro"    
$("p:first")    It is used to selects the first <p> element    
$("ul li:first")    It is used to selects the first <li> element of the first <ul>    
$("ul li:first-child")    It is used to selects the first <li> element of every <ul>    
$("[href]")    It is used to selects all elements with an href attribute    
$("a[target='_blank']")    It is used to selects all <a> elements with a target attribute value equal to "_blank"    
$("a[target!='_blank']")    It is used to selects all <a> elements with a target attribute value NOT equal to "_blank"    
$(":button")    It is used to selects all <button> elements and <input> elements of type="button"    
$("tr:even")    It is used to selects all even <tr> elements    
$("tr:odd")    It is used to selects all odd <tr> elements