Tuesday, October 18, 2011

jquery selector

A tag name: $('p') gets all paragraphs in the document.
An ID: $('#some-id') gets the single element in the document that has the corresponding some-id ID.
A class: $('.some-class') gets all elements in the document that have a class of some-class.
following code will be explained,example from learning jquery
$('#selected-plays > li').addClass('horizontal');

the line used the child combinator(>) to add the horizontal class to all top-level items only,it says find each list item(li) that is a child (>) of an element within an ID of selected-plays(#selected-plays).
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
get every list item(li) that is a descendant of an element with an ID of selected-plays(#selected-plays) and Does not have a class of horizontal(:not(.horizontal)).

$('a[@title]')
this is use XML Path Language (XPath),it says select all links that have a title attribute
$('div[ol]')
this is use XPath also,it says get all div elements that contain an ol element

$('a[@href^="mailto:"]').addClass('mailto');
this will look for all anchor elements(a) with href attribut([@href]) that begins(^)with mailto(^="mailto:")

$('a[@href$=".pdf"]').addClass('pdflink');
this will get all links with an href attribute that ends with .pdf,this is use a dollar sign($)

$('a[@href*="mysite.com"]').addClass('mysite');
this will get all links to other pages on mysite.com,this is use asterisk(*)

$('div.horizontal:eq(1)')
select second item from matched set of divs with a class of horizontal(this is custom selectors)

$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
$('td:contains("Henry")').addClass('highlight');
another three useful custom selectors




No comments:

Post a Comment