jQuery Selectors

JQuery CSS Element Selector

Description

The element selector selects all the elements that have a tag name of T.

Syntax:

Here is the simple syntax to use this selector :

$(‘tagname’) 

 

Parameters

Here is the description of all parameters used by this selector:

tagname : Any standard HTML tag name like div,p,em,img,lietc

Returns

Like any other JQuery selector, this selector also returns an array filled with the found elements.

Example

$(‘p’) selects all elements with a tag name of p in the document

$(‘div’) selects all elements with a tag name of div in the document.

Following example would select all the divisions and display them one :

<html>

<head>

<title>The Selector Example</title>

<script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”>

</script>

<script type=”text/javascript” language=”javascript”>

$(document).ready(function()) {

/* This would select all the divisions */

vardivs = $(“div”);

for(i=0;i<divs.length;i++)

{

alert(“Found Division:” + divs[i].innerHTML);

}

}};

</script>

</head>

<body>

<div class=”div1” id=”divid1”>

<p class = “para1” id=”pid1”>This is first paragraph. </p>

<p class=”para2” id=”pid2”> This is second paragraph.</p>

<p class=”para3” id=”pid3”>This is third paragraph. </p>

</div>

<br/>

<div class=”div2” id = “divid2”>

<p>This is second division of the DOM. </p>

</div>

<br/>

<div class=”div3” id=”divid3”>

<p>This is a para inside third division</p>

</div>

</body>

</html> 

 

JQuery CSS Element ID Selector

Description

The element ID selector selects a single element with the given id attribute.

Syntax 

Here is the simple syntax to use this selector

$(‘#elementid’)

Parameters

Here is the description of all the parameters used by this selector :

elementid

This would be an element ID. If the id contains any special characters like periods or colons you have to escape those characters with backslashes

Returns

Like any other JQuery selector, this selector also returns an array field with the found element.

Example

$(#myid) selects element with the given id myid.

$(‘div#yourid’) selects a single division with the given id yourid.

Following example would select second division and display its cotent:

<html>

<head>

<title> The selecter Example</title>

<scrit type=”text/javascriptsrc=”/jquery/jquery-1.3.2.min.js”>

</script>

<script type=”text/javascript” language=”javascript”>

$(document).ready(function()) {

vardivs=$(“#divid2”);

alert(“Found Division:.” + divs[0].innerHTML)

}};

</script>

</head>

<body>

<div class= “div1” id=”divid1”>

<p class=”para1” id=”pid1”>This is first paragraph </p>

<p class=”para2” id =”pid2”>This is second paragraph</p>

<p class=”para3” id=”pid3”>This is third paragraph</p>

</div>

<br/>

<div class=”div2” id=”divid2”>

<p>This is second division of the DOM.</p>

</div>

<br/>

<div class =”div3” id =”divid3”>

<p>This is a para inside third division</p>

</div>

</body>

</html>

 

jQuery CSS Element Class Selector

Description

The element class selector all the elements which match with the given class of the elements.

Syntax

Here is the simple syntax use this selector:

$(‘.classid’)

Parameters

Here is the description of all parameters used by this selector.

classid: This is class ID available in the document.

Returns

Like any other jQuery selector, this selector also returns an array filled with the found elements.

Example

$(‘.big’) selects all the elements with the given class ID big.

$(‘p.small’) selects all the paragraphs with the given class ID small.

$(‘big.small’) selects all the elements with a class of big and small.

Following example would select all divisions with class.big and display its content:

<html>

<head>

<title> the selector Example</title>

<script type=”text/javascrpit” language =”javascrpit”>

$(document ).ready (function(){

vardivs=$(“div”);

for(i=0;i<divs.length;i++){

alert(“Found Division :”+divs[i].innerHTML);

}

});

</script>

</head>

<body>

<div class=”big” id=”divid1”>

<p class=”para1” id=”pid1”>This is first paragraph. </p>

<p class=”para2” id=”pid2”>This is second paragraph. </p>

<p class=”para3” id=”pid3”>This is third paragraph. </p>

</div>

<br/>

<div class =”big” id =”divid2”>

<p> This is second division of the DOQ.</p>

<p> This is Second para inside second division.</p>

</div>

<br/>

<div class=”medium” id =”divid3”>

<p> This is a para inside third division.</p>

</div>

</body>

</html>

 

jQuery CSS Universal Selector

Description

The universal selector selects all the elements available in the document.

Syntax

Here is the simple syntax to use this selector:

$(‘*’)

Parameters

Here ia the description of all the parameters used by this selector.

*:A symbolic star.

Returns

Like any other jQuery selector, this selector also returns an array filled with the found elements.

Example

$(‘*’) selects all the elements available in the document

Following example would select all the elements available and would display them one by one:

<html>

<head>

<title> The selector Example</tittle>

<script type=”text/JavaScript” language=”javascript”>

$(document).ready(function(){

var elements=$(“*”);

for(i=0; i<elements.length; i++){

alert(“Found element:”+elements[i].innerHTML);

}

});

</script>

</head>

<body>

<div class=”big” id =”divid2”>

<p>This is second division of the DOM</p>

<p>This is second para inside second division </p>

</div>

<br/>

<div class=”medium” id =”divid3”>

<p>This is a para inside third division</p>

</div>

</body>

</html>

 

jQuery-CSS Multiple Elements E,F,G Selector

 

Description

This Multiple Elements selects the combined results of all the specified selectors E,F or G.

You can specify any number of selectors to combine into a single result. Here order of the DOM elements in the jQuery object aren’t necessarily identical. 

 

Syntax

Here is the simple syntax to use this selector:

$(‘E, F, G,…..’)

 

Parameters

Here in the description of all parameters used by this selector:

E:Any valid selector

F:Any valid selector

G: Any valid selector

Returns

Like any other JQuery selector, this selector also returns an array filled with the found elements.

Example

$(‘div,p’) : selects all the elements matched by div or p.

$(‘p strong ,.myclass’) : selects all the elements matched by strong that are descendants of an element matched by p as well as all elements that have a class of myclass.

$(‘p strong ,#myid’) :selects asingle elements matched by strong that is descendant of an element matched by p as well as elemera whose id is myid.

Following example  would select elements with class ID big and element with ID divid3:

<html>

<head>

<title> The selector Example </title>

<script type=”text/javascrpit” src=”/jquery/jquery-1.3.2.min.js>

</script>

<script type=”text/javascrpit” language=”javascript”>

$(document).ready (function() {

var elements =$(“.big, #divid3”);

for(i=0;i<elements.length; i++){

alert(“Found element:”+elements[i].innerHTML);

}

});

</script>

</head>

<body>

<div class =”big” id=”divid1”>

<p class=”para1” id =”pid1”>This is first paragraph</p>

<p class=”para2” id =”pid2”>This is second paragraph</p>

<p class=”para3” id =”pid3”>This is third paragraph</p>

</div>

<br/>

<div class =”big” id =”divid2”>

<p>This is second division of the DOM</p>

<p>This is second para inside second division </p>

</div>

<br/>

<div class =”medium” id =”divid3”>

<p>This is a para inside third division </p>

</div>

</body>

</html>

SelectorExampleSelects
*$(“*”)All elements
#id$(“#lastname”)The elements with id=lastname
.class$(“.intro”)All the elements with id=lastname
element$(“p”)All p elements
.class.class$(.intro.demo)All elements with the classes “intro” and “demo”
:first$(“p:first”)The first p element
:last$(“p:last”)The last p element
:even$(“tr.even”)All even tr elements
:odd$(“tr.odd”)Alll odd tr elements
:eq(index)$(“ulli:eq(3)”)The fourth element in list (index starts at 0)
:gt(no)$(“ulli:gt(3)”)list elements with an index greater than 3
:lt(no)$(“ulli:lt(3)”)list elements with an index less than 3
:not(selector)$(“input:not(:empty)”)All the inputs elements that are not empty.
:header$(“:header”)All header elements h1, h2….
:animated$(“:animated”)All animated elements
:contains(text)$(“:contains(‘W3Schools’)”)All elements which contains the text.
:empty$(“:empty”)All elements with no child (elements) nodes
:hidden$(“p:hidden”)All hidden p elements
:visible$(“table:visible”)All visible tables
s1,s2,s3$(“th,td,.intro”)All elements with matching selectors
[attribute]$(“[href]”)All element with a href attribute.
[attribute=valve]$(“[href=’default.htm’]”)All elements with a href attribute value equal to “default.htm”
[attribute!=value]$(“[href1=’default.htm’]”)All elements with a href attribute value not equal to “default.htm”
[attribute$=valve]$(“[href$=’.jpg’]”)All elements with a  href attribute value ending with “.jpg”
:input$(“.input”)All input elements
:text$(“.text”)All input elements with type=”text”
:password$(“:password”)All input elements with type=”password”
:radio$(“:radio”)All input elements with type =”radio”
:checkbox$(“:checkbox”)All input elements with type =”checkbox”
:submit$(“:submit”)All input elements with type=”submit”
:reset$(“:reset”)All input elements with type=”reset”
:button$(“:button”)All input elements with type=”button”
:image$(“:image”)All input elements with type=”image”
:file$(“:file”)All input elements with type=”file”
:enabled$(“:enabled”)All  enabled input elements
:disabled$(“:disabled”)All disabled input elements
:selected$(“:selected”)All selected input elements
:checked$(“:checked”)All selected input elements

 

 

Similar to above syntax and examples, following example would give you understanding on using different type of other useful selectors

$(‘*’)    2 This selector selects all elements in the document.

$(“p>*”)2 This selector selects all elements that are children of a paragraph element.

$(“#specialID”)2:This selector function gets the element with id=”specialID”.

$(“.specialClass”)2 This selector gets all the elements that have the class of specialClass.

$(“li:not(.myclass)”)2Selects all elements matchbody <li> that do not have class=”my class”.

$(“a#specialID.specialClass”)2This selector matches links with an id of specialID and a class of specialClass.

$(“p a.specialClass”)2 This selector matches links with a class of specialclass declared with in <p> elements.

$(“ulli:first”)2 This selector gets only the first <li> elementof the <ul>.

$(“container p”)2 Selects all elements matched by <p> that are descendants of an element that has an id of container.

$(“li>ul”)2Select all elements matched by <ul> that are children of an element matched by <li>

$(“strong+em”)2Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>

$(“p~ul”) 2Selects all elements matched by <ul> that follow a sibling element matched by <p>.

$(“code, em, strong)2Selects all elements matched by <code> or <em>or <strong>.

$(“p strong ,.myclass”)2 Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass.

$(“.empty”)2 Selects all elements that have no children.

$(“p:empty”)2Selects all elements matched by <p> that have no children.

$(“div[p]”)2Selects all elements matched by <div> that contain an element matched by <p>

$(“p[.my class]”)2Selects all elements matched by <p> that contain an element with aclass of myclass.

$(“a[@rell]”)2Selects all elements matched by<a> that have a rel attribute.

$(“input[@name=myname]”)2Selects all elements matched by <input> that have a name value exactly equal to myname.

$(“input[@name^=myname]”)2Selects all elements matched by <input> that have a name value beginning with myname.

$(“a[@rel$=self]”)2Selects all elements matched by <p> that have a class value ending with bar.

$(“a[@href*=domain.com]”)2 Selects all elements matched by <a> that have an href value containing domain.com.

$(“li:even”)2Selects all elements matched by <li>that have an even index value.

$(“tr:odd”)2Selects all elements matched by <tr> that have an odd index value.

$(“li:first”)2Selects all the first<li> element.

$(“li:last”)2Selects all the last <li> element.

$(“li:visible”)2Selects all the element matched by<li> that are visible.

$(“li:hidden”)2Selects all elements matched by <li> that re hidden.

$(“:radio”)2Selects all radio buttons in the form.

$(“:checked”)2Selects all checked boxex in the form.

$(“:input”)2Selects only form elements (input, select, textarea, button).

$(“:text”)2 Selects only text elements(input[type=text]).

$(“li:eq(2)”)2 Selects the third <li> element.

$(“li:eq(4)”)2 Selects the fifth <li> element

$(“li:lt(2)”)2Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.

$(“p:lt(3)”)2Selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.

$(“li:gt(1)”)2 Selects all elements matched by <li>after the second one.

$(“p:gt(2)”)2Selects all element matchen by <p> after the third one.

$(“div/p”)2 Selects all elements matched by <p> that are children of an element matched by<div>

$(“div//code”)2 Selects all elements matched by <code> that are descendants of an element matched by <div>.

$(“//p//a”)2Selects all elements matched by<a> that are descendants of an element matched by <p>

$(“li:first-child)”)2 Selects all elements matched by <li> that are the first child of their parent.

$(“li:last-child)”)2 Selects all elements matched by <li> that are the last child of their parent.

$(“:parent”)2Selects all elements that are the parent of another element ,including text.

$(“li:contains (second)”)2 Selects all elements matched by <li> that contain the text second.

 

You can use all the above selectors with any HTML/XML element in generic way .For example if selector $(“li:first”) works for <li> element then $ (“p:first”) would also work for <p> element.