Computers & ProgrammingFrontend DevelopmentjQuery

jQuery Selectors

The jQuery selectors let us quickly and easily access individual or groups of HTML elements in the Document Object Model (DOM). Selectors allow you to get the exact element or attribute you want from your HTML document.

jQuery supports the existing CSS Selectors, as well as some custom selectors. All of the jQuery selectors begin with the dollar sign and parentheses: $().

SelectorExampleDescription
*$("*")All elements
selector-1,selector-2$("p,div")All elements with matching selectors
#id$("#one")The element with id="one"
.class$(".two")All elements with class="two"
element$("div")All div elements
.class.class$(".abc.def")All elements with the classes abc and def
SelectorExampleDescription
:animated$(":animated")All animated elements
:contains(text)$(":contains('test')")All elements that contain the text
:empty$(":empty")All elements with no child nodes
:eq(index)$("ul li:eq(2)")The third element in a list [starts at 0]
:even$("tr:even")All even tr elements
:first$("div:first")The first div element
:gt(index)$("ol li:gt(2)")List elements with an index > 2
:header$(":header")All header elements [h1, h2 …]
:hidden$("div:hidden")All hidden div elements
:last$("div:last")The last div element
:lt(index)$("ol li:lt(2)")List elements with an index < 2
:not(selector)$("td:not(:empty)")All td elements that are not empty
:odd$("tr:odd")All odd tr elements
:visible$(":visible")Visible elements
SelectorExampleDescription
[attribute]$("[href]")All elements with a href attribute
[attribute=value]$("[href='index.htm']")All elements with a href attribute equal to index.htm
[attribute!=value]$("[href!='index.htm']")All elements with a href attribute not equal to index.htm
[attribute$=value]$("[href$='.png']")All elements with a href attribute ending with .png
[attribute^=value]$("[href^='http']")All elements with a href attribute beginning with http
SelectorExampleDescription
:input$(":input")All input elements
:text$(":text")Input elements with type="text"
:password$(":password")Input elements with type="password"
:radio$(":radio")Input elements with type="radio"
:checkbox$(":checkbox")Input elements with type="checkbox"
:submit$(":submit")Input with type="submit"
:reset$(":reset")Input elements with type="reset"
:button$(":button")Input elements with type="button"
:image$(":image")Input elements with type="image"
:file$(":file")Input elements with type="file"
:enabled$(":enabled")Enabled input elements
:disabled$(":disabled")Disabled input elements
:selected$(":selected")Selected input elements
:checked$(":checked")Checked input elements

The selectors are very useful and would be required at every step while using jQuery. They do a great job making it easy to get to the exact element that you want from your HTML document.

Here is an example where you are selecting all paragraph elements and when you click on any of them, the text color changes to red. If you copy and paste this example, make sure you update the correct value for the src attribute in the reference to the jQuery library.

<html>
<head>
    <title>Your Title</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <p>This is a paragraph.</p>
    <p>This is second paragraph.</p>
    <p>This is third paragraph.</p>

    <script type="text/javascript">
        $(document).ready(function () {
            $("p").click(function () {
                $(this).css("color", "red");
            });
        });
    </script>
</body>
</html>

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top