jQuery Selectors
Use our excellent jQuery Selector Tester to experiment with the different selectors.
| Selector | Example | Selects |
|---|---|---|
| * | $("*") | All elements |
| #id | $("#lastname") | The element with id=lastname |
| .class | $(".intro") | All elements with class="intro" |
| element | $("p") | All p elements |
| .class.class | $(".intro.demo") | All elements with the classes "intro" and "demo" |
| :first | $("p:first") | The first p element |
| :last | $("p:last") | The last p element |
| :even | $("tr:even") | All even tr elements |
| :odd | $("tr:odd") | All odd tr elements |
| :eq(index) | $("ul li:eq(3)") | The fourth element in a list (index starts at 0) |
| :gt(no) | $("ul li:gt(3)") | List elements with an index greater than 3 |
| :lt(no) | $("ul li:lt(3)") | List elements with an index less than 3 |
| :not(selector) | $("input:not(:empty)") | All input elements that are not empty |
| :header | $(":header") | All header elements h1, h2 ... |
| :animated | $(":animated") | All animated elements |
| :contains(text) | $(":contains('W3Schools')") | All elements which contains the text |
| :empty | $(":empty") | All elements with no child (elements) nodes |
| :hidden | $("p:hidden") | All hidden p elements |
| :visible | $("table:visible") | All visible tables |
| s1,s2,s3 | $("th,td,.intro") | All elements with matching selectors |
| [attribute] | $("[href]") | All elements with a href attribute |
| [attribute=value] | $("[href='default.htm']") | All elements with a href attribute value equal to "default.htm" |
| [attribute!=value] | $("[href!='default.htm']") | All elements with a href attribute value not equal to "default.htm" |
| [attribute$=value] | $("[href$='.jpg']") | All elements with a href attribute value ending with ".jpg" |
| [attribute^=value] | $("[href^='jquery_']") | All elements with a href attribute value starting with "jquery_" |
| :input | $(":input") | All input elements |
| :text | $(":text") | All input elements with type="text" |
| :password | $(":password") | All input elements with type="password" |
| :radio | $(":radio") | All input elements with type="radio" |
| :checkbox | $(":checkbox") | All input elements with type="checkbox" |
| :submit | $(":submit") | All input elements with type="submit" |
| :reset | $(":reset") | All input elements with type="reset" |
| :button | $(":button") | All input elements with type="button" |
| :image | $(":image") | All input elements with type="image" |
| :file | $(":file") | All input elements with type="file" |
| :enabled | $(":enabled") | All enabled input elements |
| :disabled | $(":disabled") | All disabled input elements |
| :selected | $(":selected") | All selected input elements |
| :checked | $(":checked") | All checked input elements |
Select all elements inside <body>:
$("body *")
Definition and Usage
The * selector selects every single element in the document, including
html, head and body.
If used together with another element (nested selectors, like in the example
above), it selects all child elements within the specified element.
Syntax
$("*")
Tips and Notes
Tip: Depending on use, the * can be slow, and heavy for some browsers
to process.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body *").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body *").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>
jQuery # Selector
Definition and Usage
The # selector selects an element with a unique id.
The id refers to the id attribute of a HTML element.
The same id should never be used more than once in a document.
Syntax
$("#id")
| Parameter | Description |
|---|---|
| id | Required. Specifies the id of the element to select. The id selector uses the id attribute of the HTML element |
Tips and Notes
Note: Do not start an ID name with a number. It may cause problems in
some browsers.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#choose").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#choose").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>
No comments:
Post a Comment