jQuery Basics part 2

Basic Selector

JQuery	Example Code	Description	Output
$('element')	$('blockquote').css('color','red');	it select all elements with the give tag name. in this example it will return all <blockquote> elements in the document.	Here is example text for the first selector example. Here is second block quote text...
$('#id')	$('#item1').css('color','red');	it select single element with the give id. if more than one element has been assigned same id, first match result will be return.	First line inside the <span id="item1" > Second line inside the <span id="item2" > First line inside the <span id="item1" >
$('.class')	$('.myCss').css('color','red');	it select all the elements with given class.	First line for testing. Second line for testing.

JQuery

Example Code

Description

Action

Output

$('element')

$('blockquote').css('color','red');

it select all elements with the give tag name. in this example it will return all <blockquote> elements in the document.

Here is example text for the first selector example.

Here is second block quote text...

$('#id')

$('#item1').css('color','red');

it select single element with the give id. if more than one element has been assigned same id, first match result will be return.

First line inside the <span id="item1" >
Second line inside the <span id="item2" >
First line inside the <span id="item1" >

$('.class')

$('.myCss').css('color','red');

it select all the elements with given class.

First line for testing.
Second line for testing.

Basic Filters

JQuery	Example Code	Description	Output
:first	$('#basicList li:first').css('background-color','yellow');	:first selects the first matched element. '#basicList li:first' selects the first element of list.	Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7
:last	$('#basicList li:last').css('background-color','red');	:last selects the last matched element. '#basicList li:last' selects the last element of list.
:not(selector)	$('#basicList li:not(li:first)').css('background-color','pink');	:not(selector) selects all elements that do not match the given selector. '#basicList li:not(li:first)' selects all element other than first element.
:even	$('#basicList li:even').css('background-color','blue');	:even selects the even elements. it uses zero-indexed. so this command will select first, third, fifth,..... so on.
:odd	$('#basicList li:odd').css('background-color','green');	:old selects the old elements. it also uses zero-indexed. So this command will select second, fouth, sixth,..... so on.
:eq(index)	$('#basicList li:eq(3)').css('background-color','yellow');	:eq(index) selects the element at index n with in the set. this example code will select 4th element in the list.
:gt(index)	$('#basicList li:gt(3)').css('background-color','red');	:gt(index) select all elements at an index grater than index number for filtering.
:lt(index)	$('#basicList li:lt(3)').css('background-color','purple');	:lt(index) select all elements at an index less than index number for filtering.

Filter By Content

Jquery

Example Code

Description

Action

Output

:contains(text)

$('#p1 span:contains(too)').css('background-color','yellow');

it selects all the <span> which contains word 'too'

Text in the span 1..... Text in the span 2 too

:empty

$('#list:empty').addClass('emptyUL');

:empty return those element who does not has child elements.

UL with no childs

Child 1
Child 2

:has(selector)

$('#list2 li:has(a)').css('background-color', 'red');

The expression $('li:has(a)') matches a <li> if a <a> exists anywhere among its descendants, not just as a direct child.

Item 1
Item 2 Click here

:parent

$('#table1 td:parent').css('background-color', 'red');

:parent is the inverse of :empty. :parent select those who has atleast one child element.

Cell 1
	Cell 4

Child Filters

:nth-child(index/even/odd/equation)

JQuery	Example Code	Description	Output
:nth-child(even)	$('#Ul2 li:nth-child(even)').css('background-color', 'red');	....	List# 1 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 List# 2 Item 1
:nth-child(odd)	$('#Ul2 li:nth-child(odd)').css('background-color', 'blue');	...
:nth-child(n)	$('#Ul2 li:nth-child(3)').css('background-color', 'yellow');	...
:nth-child(equation)	$('#Ul2 li:nth-child(3n)').css('background-color', 'yellow');	....
:first-child	$('#Ul2 li:first-child').css('background-color', 'purple');	....
:last-child	$('#Ul2 li:last-child').css('background-color', 'brown');	....
:only-child	$('#tdChildList li:only-child').css('background-color', 'gray');	....

Attribute Filters

JQuery	Example Code	Description	Output
[Attribute Name]	$('#tdAtt a[id]').css('background-color','yellow');	select the elements that has specific attribue.	Click here 1 Click here 2 Click here 3 Click here 4
[AttributeName="value"]	$('#tdAtt a[rel="2"]').css('background-color','red');	Select the elements that has specific attribute with a value exactly equal to value.
[AttributeName!="value"]	$('#tdAtt a[rel!="2"]').css('background-color','brown');	Select the elements that has specific attribute with a value not equal to value.
[AttributeName^="value"]	$('#tdAtt a[href^="http://"]').css('background-color','blue');	Selects elements that have the specified attribute with a value beginning exactly with a given string.
[AttributeName$="value"]	$('#tdAtt a[href$=".com"]').css('background-color','gray');	Selects elements that have the specified attribute with a value ending exactly with a given string.
[AttributeName*="value"]	$('#tdAtt a[href*="www"]').css('background-color','pink');	Selects elements that have the specified attribute with a value containing the a given substring.