Post
Ask Question

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 http://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 http://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:link
E: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:active
E:hover
E: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:enabled
E: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. I hope this article will be helpful for all.


Similar Articles