Exploring jQuery Selectors, Part 2
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The popular jQuery JavaScript library simplifies the client-side scripting of web applications. At the heart of this library are the selectors, used to match elements in a document's DOM tree.
Part 1 of this series introduced you to jQuery's selectors feature and explored its basic and hierarchy selector categories. Part 2 continues to explore selectors by focusing on jQuery's form and attribute selector categories.
Form Selectors
Form selectors let you match elements within the context of forms. Each form selector begins with a colon (:), which indicates that the selector is a pseudo-class selector.
The following table lists the supported form selectors.
|
Form Selector |
Description |
Button (":button") |
Select all <button> elements and elements of type button. Example: $(":button"). An equivalent selector to $(":button") using valid CSS is $("button, input[type='button']"). |
Checkbox (":checkbox") |
Select all elements of type checkbox. For example, $("input:checkbox") selects all <input> elements that are of type checkbox. The equivalent of ":checkbox" is "[type=checkbox]". |
Checked (":checked") |
Select all elements that are checked. The ":checked" selector works for checkboxes and radio buttons. For <select> elements, use the ":selected" selector. For example, $("input:checked") selects all <input> elements that are checked. |
Disabled (":disabled") |
Select all elements that are disabled. For example, $("input:disabled") selects all <input> elements that are disabled. |
Enabled (":enabled") |
Select all elements that are enabled. For example, $("input:enabled") selects all <input> elements that are enabled. |
File (":file") |
Select all elements that are of type file. For example, $("input:file") selects all <input> elements that are of type file. The equivalent of "file" is "[type="file"]". |
Focus (":focus") |
Select the currently focused element. For example, $("input:focus") selects the currently focused <input> element. |
Image (":image") |
Select all elements of type image. For example, $("input:image") selects all <input> elements that are of type image. The equivalent of ":image" is "[type="image"]". |
Input (":input") |
Select all <input>, <textarea>, <select>, and <button> elements. For example, $(":input") selects all of these elements. |
Password (":password") |
Select all elements of type password. For example, $("input:password") selects all <input> elements that are of type password. The equivalent of ":password" is "[type=password]". |
Radio (":radio") |
Select all elements of type radio. For example, $("input:radio") selects all <input> elements that are of type radio. The equivalent of ":radio" is "[type=radio]". |
Reset (":reset") |
Select all elements of type reset. For example, $("input:reset") selects all <input> elements that are of type reset. The equivalent of ":reset" is "[type="reset"]". |
Selected (":selected") |
Select all elements that are selected. The ":selected" selector works for <option> elements. It doesn't work for checkboxes or radio inputs; use ":checked" for those. For example, $("select option:selected") selects all selected <option> elements. |
Submit (":submit") |
Select all elements of type submit. For example, $("input:submit") selects all <input> elements that are of type submit. The equivalent of ":submit" is "[type="submit"]". The ":submit" selector typically applies to <button> or <input> elements. Some browsers implicitly treat the <button> element as type="default" and others (such as Internet Explorer) don't. |
Text (":text") |
Select all elements of type text. For example, $("input:text") selects all <input> elements that are of type text. The equivalent of ":text" is "[type="text"]". As of jQuery 1.5.2, ":text" selects <input> elements that have no specified type attribute (in which case type="text" is implied). |
The following sections demonstrate the :button, :selected, and :text selectors.
The :button Selector
Listing 1 presents an HTML document that demonstrates the :button selector.
Listing 1: Experimenting with the :button selector.
<html>
<head>
<title>Form Selector Demo: ":button"</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.7.2.min.js">
</script>
<style>
.highlighted { background-color: cyan; border: 1px green ridge; }
</style>
</head>
<body>
<form>
File name: <input type="text" name="filename" value="">
<input type="button" value="Choose file..."/>
<p>
<input type="submit" value="Submit">
<button type="reset">Reset</button>
</form>
<script type="text/javascript">
$(function()
{
$("form").submit(function()
{
$(":button").addClass("highlighted");
return false; // Don't submit form.
});
});
</script>
</body>
</html>
Listing 1 specifies a form for entering a filename or (hypothetically) choosing the filename by clicking a button. The form includes two buttons: a button via an <input> element of type button and a button via a <button> element.
The $("form").submit(function() { /* ... */ }); expression binds an event handler to the "submit" JavaScript event for each form that is specified in the document. However, only a single form has been specified.
When you click the Submit button, jQuery invokes the anonymous function passed as an argument to submit(). This function executes $(":button").addClass("highlighted"); to add the CSS highlighted class to each form button.
Figure 1 shows the resulting page before Submit is clicked.
)
Figure 1 The Choose File and Reset buttons are not highlighted.
Figure 2 shows the resulting page after Submit is clicked.
)
Figure 2 The Choose File and Reset buttons are highlighted.
The :selected Selector
Listing 2 presents an HTML document that demonstrates the :selected selector.
Listing 2: Experimenting with the :selected selector.
<html>
<head>
<title>Form Selector Demo: ":selected"</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.7.2.min.js">
</script>
</head>
<body>
<form>
Select your favorite ice cream flavors:
<p>
<select multiple="multiple">
<option value="blueberry">blueberry</option>
<option value="cherry">cherry</option>
<option value="chocolate">chocolate</option>
<option value="mango">mango</option>
<option value="strawberry">strawberry</option>
<option value="vanilla">vanilla</option>
</select>
<p>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$(function()
{
$("form").submit(function()
{
var choices = "";
var len = $('select option:selected').length;
if (len == 0)
{
alert("You must like something!");
return false;
}
$("select option:selected").each(function(index)
{
choices += $(this).text();
if (index < len-2)
choices += ", ";
if (index == len-2)
choices += " and ";
if (index == len-1)
choices += ".";
});
alert("You like "+choices);
return false;
});
});
</script>
</body>
</html>
Listing 2 specifies a form for selecting zero or more favorite ice cream flavors. When you click the Submit button, the anonymous function passed to the submit() method learns which flavors were selected and outputs this list.
The select option:selected contextual selector returns a jQuery object containing all selected <option> elements contained in all <select> elements, of which there is only one.
Method each() iterates over the jQuery object, invoking the anonymous function passed to this method for each selected <option> element. The zero-based index of that element is passed as an argument to the function.
The function builds a choices string by accessing the current selected <option> element's text via $(this).text(), and choosing appropriate punctuation for the string's text with help from the index argument.
Figure 3 shows the resulting page after selecting three flavors and clicking Submit.
)
Figure 3 An alert window displays the favorite flavors list.
The :text Selector
Listing 3 presents an HTML document that demonstrates the :text selector.
Listing 3: Experimenting with the :text selector.
<html>
<head>
<title>Form Selector Demo: ":text"</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.7.2.min.js">
</script>
</head>
<body>
<form>
First name: <input type="text" name="firstname" value=""><br>
Last name: <input type="text" name="lastname" value="">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<script type="text/javascript">
var isEmpty;
$(function()
{
$("form").submit(function()
{
isEmpty = false;
var f = function(index, value)
{
var input = $(this);
if (value == "")
{
input.css("background-color", "red");
isEmpty = true;
}
else
input.css("background-color", "white");
return value;
};
$("input:text").val(f);
return !isEmpty;
});
});
</script>
</body>
</html>
Listing 3 specifies a form for entering a first name and a last name, and then submitting these values. Because these values must be present before the form is submitted, this listing uses jQuery to perform validation before submission.
The anonymous function passed to submit() performs validation by resetting an isEmpty variable to false (indicating no empty text fields), by executing $("input:text").val(f);, and by returning the inverse of isEmpty.
Expression $("input:text").val(f); returns all <input> elements of type text, invoking jQuery's val(callback) method on each returned element. This method invokes the callback function to validate the element.
The callback function has the form function(index, value), where index is the element's position in the returned array of elements, and value is the element's current value. This function's return value replaces the current value.
The function first executes var input = $(this); to obtain a reference to the current element, and then compares value to the empty string. If nothing was entered, the current element's background color is set to red (to notify the user); otherwise, it's set to white.
When the background color is set to red, isEmpty is assigned true to signify that an empty element has been found. When this value is true, the anonymous function passed to submit() must return false so that the form isn't submitted. This is why that function returns !isEmpty.
Figure 4 shows the resulting page after leaving the Last Name text field empty and clicking Submit.
)
Figure 4 The Last Name text field's red background color tells the user to supply a value.