Selectors in JQuery

Sateesh Arveti
15y
38.6k
0
3

Article

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.