Selector syntax
In this chapter you will learn:
DOM Element Selection
The selector syntax used by jQuery is a combination of CSS1-3 and XPath selectors. With jQuery you can select elements by attributes, element type, element position, CSS class, or a combination of these. The syntax for selecting elements is as follows:
$(selector,[context])
or
jQuery(selector, [context])
To select elements by tag name, use the tag name in the selector. For example, $("div") retrieves all of the divs in a document.
<!DOCTYPE html> <!--from j av a 2s. c om-->
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
var wrappedElements = $("div");
document.writeln(wrappedElements.length);
});
</script>
</head>
<body>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</body>
</html>
selector context
By default, when selecting elements, jQuery searches through the entire DOM tree. To search through a subtree of the DOM, pass an optional second parameter to the jQuery function to give the selection a context.
$("a","#div"); retrieve from a series of links for a single div.
The following code sets the context to the document body.
<html><!--from j a va 2 s . com-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($(":hidden", document.body).length);
});
</script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span></span>
</body>
</html>
Next chapter...
What you will learn in the next chapter: