Objectives and outcomes

In this tutorial we are going to learn about selectors in jquery. Selectors are the most important part of jquery as they are used to select and manipulate DOM elements. All jquery selectors start with '$' sign. The $() function uses 3 techniques to select DOM element namely:-
1- By using tagname.
2- By using id of the element.
3- By using class of the element.



Selecting element using tagname
<script>
$(document).ready(function(){
$('a').click(function(){
$('a').fadeOut();
});
});
</script>

In the above example the jquery depicts that if a user clicks on any link within the document than all links in the document will fadeout.



Selecting element using id
<script>
$(document).ready(function(){
$('#1').click(function(){
$('#2').fadeOut();
});
});
</script>

In the above example if element with id="1" is clicked than element with id="2" is fadedout.



Selecting element using class
<script>
$(document.ready(function(){
$('.first').click(function(){
$('.second').fadeOut();
});
});
</script>

In the above example if the element having class="first" is clicked than element having class="second" gets fadedout.



Selecting element using different ways
Selector Meaning
$(this) Selects the current element.
$('*') Selects all the element in the document also known as universal selector.
$('a:not(.class1)') Selects all the element with anchor tag and not having class="class1".
$(':button') Selects all element with button tag and also input tag with type button.
$('a:even') Selects all even anchor tag elements.
$('tr a .class1') Selects all element with anchor tag having class="class1" and declared within tr tag.