jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively.
A Selector identifies an HTML element tag that is used to manipulate with jQuery code. $ is the symbol used for it.
For Further Reading:
- A Brief Overview of jQuery
- Getting Started with jQuery: Tutorial and Example
- 20 Useful jQuery Contact Forms Tutorials
A lot of developers who are new to jQuery get hung up by jQuery selectors. jQuery’s selectors are where you typically first come into contact with the library. Those of you who have worked with CSS extensively will find jQuery’s selectors to be very familiar because jQuery makes extensive use of CSS’s syntax for selectors.
A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria.
The factory function $() makes use of following three types of selectors while selecting elements in a given document:
jQuery Element Selectors
In jQuery, you can use special selectors to choose specific HTML elements.
| Element Selector | Description |
|---|---|
| $(“p”) | select all <p> elements |
| $(“p.test”) | select all <p> elements with class=”test” |
| $(“p#wrapper”) | select all <p> elements with id=”wrapper” |
| $(this) | selects the current HTML element |
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Example of jQuery Element Selector - TutorialChip.com</title>
<style>
div, p {
width: 400px;
height: 30px;
padding: 10px;
margin: 30px;
background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
</head>
<body>
<div>Example of jQuery Element Selector - TutorialChip.com</div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>$("p").css("border","11px solid red");</script>
</body>
</html>
Output
jQuery Attribute Selectors
If you’d like to select an element by attribute rather than by HTML elements, you can use Xpath expressions to select elements with a specific attribute.
| Attribute Selector | Description |
|---|---|
| $(“[href]”) | select all elements with href attribute |
| $(“[href=’#’]”) | select all elements with href value equal to “#” |
| $(“[href!=’#’]”) | select all elements with href attribute NOT equal to “#” |
| $(“[href$=’.png’]”) | select all elements with an href attribute that ends with “.png” |
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Example of jQuery Attribute Selector - TutorialChip.com</title>
<style>
div {
width: 480px;
height: 25px;
padding: 10px;
margin: 30px;
background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
</head>
<body>
<div>Example of jQuery Attribute Selector - TutorialChip.com</div>
<div>
<input name="dreammakerland" />
<input name="dreamdeveloper" />
<input name="dreammakerboy" />
</div>
<script>$('input[name*="dreammaker"]').val('Yes I am here!');</script>
</body>
</html>
Output
jQuery CSS Selectors
If you want to change the CSS property for an HTML element, you can use a CSS selector. For example, the following jQuery script changes the background color of all p elements to blue:
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Example of jQuery CSS Selector - TutorialChip.com</title>
<style>
div, p {
width: 400px;
height: 30px;
padding: 10px;
margin: 30px;
background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
</head>
<body>
<div>Example of jQuery CSS Selector - TutorialChip.com</div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>$("p").css("background-color","blue");</script>
</body>
</html>
Output
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 $().
Conclusion
jQuery is capable of so much more, and I’ve only just begun demonstrating its power and simplicity. But I think this suffices to provide a good overview, with some syntax basics, thus preparing beginning jQuery developers for easy-to-write and practical JavaScript code.
In Closing
While writing this article, it’s always a possibility that I missed some other great facts and tips. Feel free to share it with our readers.
Hello Everyone,
JQuery selector is used to select HTML element by element name or attribute. JQuery selectors and attribute selectors are some of the best features. They allow you to quickly select all elements or groups of element of a given tag name, attribute name or their contents. In this example I am trying to change backcolor and forecolor of text that defined in element on mouse over…….
For more details please check out this link….
http://mindstick.com/Articles/7cb3c8f0-2329-457e-9714-c65ba49aa826/?JQuery%20Element%20Selector#up
Thanks !!!!