Chapter – 2 : Why jQuery Selectors?(Part I)

Why?

jQuery requires a target to perform each action, for example, in order to hide or show an element on the page, first we must find that element. To do so,  jQuery  rely on jQuery’s selector expressions. Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.

View Demo

List of  jQuery Selectors.

In jQuery around 9 group of selector types are available.  ie Basics, Hierarchy, Basic Filters, Content Filters, Visibility Filters, Attribute Filters, Child Filters, Forms, Form Filters.

1. Basics

1.1 Class Selector (“.class-name”) – Selects all elements with the given class.
1.2 ID Selector (“#id”) – Selects a single element with the given id attribute.
1.3 Element Selector (“element”) – Selects all elements with the given tag name.
1.4 Multiple Selector (“selector1, selector2, selectorN”) – Selects the combined results of all the specified selectors.
1.5 All Selector (“*”) – Selects all elements.
Usage example of Basics.

HTML

<div id="container2">
 Normal text
 <p>Para text here....</p>
 <b>Bold text here....</b>
</div>
<div id="container">
 <div id="heading">Heading</div>
 <div>Comment One</div>
 <div>Comment Two</div>
</div>

jQuery

<script type="text/javascript">
$(document).ready(function(){
 // Class Selector
 $(".comments").addClass("heading-new");
 // ID Selector
 $("#heading").css("color","#000").css("font-size","3em");
 // Element Selector
 $("p").addClass("heading-new");
 // Multiple Selector
 $("p,b,#container2").css("font-size","1.2em");
 // All Selector
 $("*").css("color","#D4D4D4");

 $("#container").animate({ marginLeft: 200}, 'slow').animate({ marginTop: 250}, 'slow').animate({ marginLeft: 500}, 'slow');

});
</script>

CSS

<style>
.heading-new{
 color:red;
 font-weight:bold;
 font-size:2em;
 margin-top:5px;
 width:250px;
 }
</style>