jQuery - Selector: XPath Selectors
jQuery Selector Step By Step Tutorial - Part 4: XML Path Language (XPath) is a type of language for identifying different elements of their values within XML documents. To see how jQuery works with XPath, look following sample.
In html document, we have 3 link like this:
<a href="love.html">Love me do</a> <a href="obladi.pdf">Obladi Oblada</a> <a href="mailto:music.rock">Rock 'n Roll The Music</a>
We want to give unique style every links. So, add the styles at css, such as:
a{
color:#FF6600;
}
a.mailto{
color:#00CC00;
}
a.pdf{
color:#FF0000;
}
a.love{
color:#FF00FF;
}
Then, modify your js like following:
// JavaScript Document
$(document).ready(function(){
$('#favorite > li').addClass('category');
$('#favorite li:not(.category)').addClass('songs');
$('a[@href^="mailto:"]').addClass('mailto');
$('a[@href$=".pdf"]').addClass('pdf');
$('a[@href*="love.htm"]').addClass('love');
});
Attribute selectors accept regular-expression-like syntax for identifying the beginning(^), ending($), and asterisk(*) to indicate an arbitrary position within a string.
Now, you may get like this:
| Series this article: jQuery - Selectors: Understanding The $() Factory Function jQuery - Selector: Modifying Style at List Item Levels jQuery - Selector: Styling Sub Level Item jQuery - Selector: XPath Selectors jQuery - Selector: Custom Selectors jQuery - Selector: Choose a Style at Custom Selectors jQuery - Selector: Modify Style for Table Header jQuery - Selector: Styling Sibling jQuery - Selector: Styling Next Cell Tag: jQuery, $(), factory, function, selectors, XPath Category: JavaScript Post : March 21st 2008 Read: 2,805 
blog comments powered by Disqus |