HTML Selectors: Basic Elements
jQuery can select HTML elements using HTML tags. We can specify HTML tags in the jQuery method and jQuery would list of all elements belonging to that tag. Thus, $("a") would return the list of all anchor tags on the page. This page describes some of the basic HTML elements. Let us begin with description of selection of basic HTML elements using jQuery. The following table lists ways to select HTML elements.
| Selection | Description |
|---|---|
| $("head") | Selects the head element |
| $("body") | Selects the body element |
| $("p") | Selects all para elements |
| $("div") | Selects all div elements |
| $("image") | Selects all image elements |
| $("a") | Select all anchor elements |
| $(this) | Select the current HTML page |
| $("ol") | Select all ordered list (ol) elements |
| $("ul") | Select all unnumbered list (ul) elements |
| $(":header") | Selects header elements (like h1, h2, h3, etc) |
| $(":hidden") | Selects all hidden elements |
| $("[attrName]") | Selects all elements with "attrName" attribute |
| $("*") | Selects all elements, including non-CSS ones |
The description for most of the above HTML elements is self-explanatory. The second-last row in the above table shows that we can filter HTML elements using the attribute name "attrName". Thus, '$("[href]")' would select all elements with the "href" attribute. Likewise, '$("[src]")' would select all elements with the "src" attribute. The last row in the above table selects all elements on the page.
If there are more than one element that match the selection criteria, then jQuery would return a list. For such cases, we can use the length property to find out the number of elements returned by the jQuery. Thus, '$("p").length' would return the total count of all the "p" elements.
Let us go through a simple example that uses jQuery to grab elements of a given HTML type and then applies font-modification to those elements. Among other things, the example contains a "div" element and an ordered list. We use jQuery's method to query both of these elements. Once we have selected those elements, the example uses jQuery's css() method to modify the font-weight and color.
<!doctype html>
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<body>
<div>Nobel Laureates:</div>
<ol>
<li>Marie Curie (Chemistry, 1903)</li>
<li>Albert Einstein (Physics, 1921)</li>
<li>Mother Teresa (Peace, 1979)</li>
</ol>
<script type="text/javascript">
$(document).ready(function() {
// Make all div elements bold.
$("div").css("font-weight", "bold");
// Make ordered list elements bold and red in color.
$("ol").css("font-weight", "bold");
$("ol").css("color", "red");
});
</script>
</body>
</html>
In the above example, we could have replaced $("ol") with $("li") and the result would have been identical since the list of elements for both of them is same in the above example. When we load the above page, here is the output:
Figure: Selecting elements using HTML identifiers