Sunday, August 28, 2011

Selectors in JQuery

JQuery provides a simple way to select single element or group of elements. You can access element by type (div, span, p), id, CSS class and attribute etc.

Basic Selector


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

Action

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


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.




: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

Action

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

Action

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.



Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)