Selectors in JQuery
In last article, we had looked into JQuery's history and benefits. In this article, we will look into the selectors available for accessing elements of DOM. Before that, get a copy of JQuery 1.4 minified version from https://jquery.com/ . Now, add downloaded jquery-1.4.2.min.js file to below html file named as "JQuerySelectors.html".
<html>
<head>
<title>JQuery Sample HTML Page</title>
<script src="jquery-1.4.2.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#div1').hide();
});
</script>
</head>
<body>
<div>
<div id="div1">This is a Section.</div>
<div>This is next Section.</div>
<div>This is Last Section.</div>
</div>
</body>
</html>
First, we are including JQuery file using script tag. Then, we wrote custom script to hide div1. We always need to place JQuery script tag first before any custom scripts, to make JQuery framework available for the document.
The basic operation in JQuery is selecting an element in DOM. This is done with the help of $() construct with a string parameter containing any CSS selector expression. $() will return zero or more DOM elements on which we can apply a effect or style.
$(document).ready() indicates that code in it need to executed once the DOM got loaded. It won't wait for the images to load for executing the JQuery script. We created an anonymous function inside ready() function to hide div1.
We can rewrite $(document).ready() as jQuery (document).ready(), since $ is an alias for jQuery. Always use jQuery in place of $, if you are using more than one JavaScript library to resolve conflicts with JQuery library. The methods called on $(), will implicitly applied on all the elements returned by it without need of explicit looping. Let's say, $('.myclass').hide() will hide all elements with class as myclass with implicit looping.
As we discussed earlier, $() accepts a string parameter having tag name [like div, p] or Element Id or class name as shown in below table:
Selector |
JQuery Syntax |
Description |
Tag Name |
$('div') |
All div tags in the document |
ID |
$('#TextId') |
Selects element with ID as TextId. It starts with # followed Element Id. |
Class |
$('.myclass') |
Selects all elements with class as myclass. It starts with '.' followed by class name |
For complete list of selector's syntax, refer https://www.w3.org/TR/css3-selectors/ or refer below table:
Pattern |
Meaning |
* |
any element |
E |
an element of type E |
E[foo] |
an E element with a "foo" attribute |
E[foo="bar"] |
an E element whose "foo" attribute value is exactly equal to "bar" |
E[foo~="bar"] |
an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" |
E[foo^="bar"] |
an E element whose "foo" attribute value begins exactly with the string "bar" |
E[foo$="bar"] |
an E element whose "foo" attribute value ends exactly with the string "bar" |
E[foo*="bar"] |
an E element whose "foo" attribute value contains the substring "bar" |
E[foo|="en"] |
an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" |
E:root |
an E element, root of the document |
E:nth-child(n) |
an E element, the n-th child of its parent |
E:nth-last-child(n) |
an E element, the n-th child of its parent, counting from the last one |
E:nth-of-type(n) |
an E element, the n-th sibling of its type |
E:nth-last-of-type(n) |
an E element, the n-th sibling of its type, counting from the last one |
E:first-child |
an E element, first child of its parent |
E:last-child |
an E element, last child of its parent |
E:first-of-type |
an E element, first sibling of its type |
E:last-of-type |
an E element, last sibling of its type |
E:only-child |
an E element, only child of its parent |
E:only-of-type |
an E element, only sibling of its type |
E:empty |
an E element that has no children (including text nodes) |
E:linkE:visited |
an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) |
E:activeE:hoverE:focus |
an E element during certain user actions |
E:target |
an E element being the target of the referring URI |
E:lang(fr) |
an element of type E in language "fr" (the document language specifies how language is determined) |
E:enabledE:disabled |
a user interface element E which is enabled or disabled |
E:checked |
a user interface element E which is checked (for instance a radio-button or checkbox) |
E::first-line |
the first formatted line of an E element |
E::first-letter |
the first formatted letter of an E element |
E::before |
generated content before an E element |
E::after |
generated content after an E element |
E.warning |
an E element whose class is "warning" (the document language specifies how class is determined). |
E#myid |
an E element with ID equal to "myid". |
E:not(s) |
an E element that does not match simple selector s |
E F |
an F element descendant of an E element |
E > F |
an F element child of an E element |
E + F |
an F element immediately preceded by an E element |
E ~ F |
an F element preceded by an E element |
We can select elements based on attributes using below syntax:
$('div [attr-name^=test]') - Selects all div tags with attribute value equal to test.
Now, we will look into custom selectors provided by JQuery. Custom selectors starts with :. Few of them are :even, :odd, :eq etc. We can use :even, :odd for styling alternate rows in a table using below syntax:
$('tr:odd').addClass('alternate');// Adds CSS class
Or
$('tr:nth-child(even)').addClass('alternate');
We can use custom selectors with form's elements like checkbox, textbox etc as shown below:
$(':button:disabled') - Select all disabled buttons.
Selector |
Match |
:text, :checkbox, :radio, |
Input elements with a type attribute equal to the selector |
:image, :submit, :reset, : password, :file |
name (excluding the colon). For example, :text selects <input type="text"> |
:input |
Input, text area, select, and button elements |
:button |
Button elements and input elements with a type attribute equal to button |
:enabled |
Form elements that are enabled |
:disabled |
Form elements that are disabled |
:checked |
Radio buttons or checkboxes that are checked |
:selected |
Option elements that are selected |
I am ending the things here. In next article, we will look into chaining and DOM elements access.