jQuery : as Cross Browser Solution :: Selector
| jQuery Selector |
A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.
The $() factory function
jQuery selectors start with the dollar sign and parentheses : $(). The factory function $() makes use of three building blocks i.e tag, id and class while selecting elements in a given document.
| Tag, Id and Class Selector Example |
Selector and Description
Tag Name
Represents a tag name available in the DOM. For example $(‘div’) or $(‘p’) selects all div and paragraphs in the document.
Tag ID
Represents a tag available with the given ID in the DOM. For example $(‘#some-id’) selects the single element in the document that has an ID of some-id.
Tag Class
Represents a tag available with the given class in the DOM. For example $(‘.some-class’) selects all elements in the document that have a class of some-class.
All the above items can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.
NOTE : The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" >
$(document).ready(function() {
$("p").css("background-color", "green");
$("p").css("color", "gold"); });
</script>
</head>
<body>
<div>
<p class = "myclass">This is a paragraph.</p>
<p id = "myid">This is second paragraph.</p> <p>This is third paragraph.</p> </div> </body> </html>
This will produce following result.
This is a paragraph1.
This is second paragraph2.
This is third paragraph3.
How to use Selectors?
The selectors are very useful and would be required at every step while using jQuery. They get the exact element that you want from your HTML document.
Following table lists down few basic selectors and explains them with examples.
| Selector | Description |
|---|---|
| Name | Selects all elements which match with the given element Name. |
| .Class | Selects all elements which match with the given Class. |
| #ID | Selects a single element which matches with the given ID. |
| Universal (*) | Selects all elements available in a DOM. |
| Multiple Elements A, B, C | Selects the combined results of all the specified selectors A, B or C. |
Note: You can use all the above selectors with any HTML/XML element in generic way. For example if selector $(“li:first”) works for <li> element then $(“p:first”) would also work for <p> element.
Recent Comments