XPath(XML Path Language,XML路径语言)是在XML文档中识别不同元素或者元素值的一种语言,与CSS在HTML文档中识别元素的方式类似。JQuery库支持一组基本的XPath选择符,如果愿意也可以将他们与CSS选择符一同使用。而且,在JQuery中,无论对什么类型的文档都可以使用XPath和CSS选择符。
在涉及属性选择符(attribute selector)时,JQuery使用了XPath中的惯例来标识属性,即将属性前置一个@符号并放在一对方括号中。也就是说,JQuery没有采用CSS中不够灵活的属性选择符语法。例如,要选择所有带有title属性的链接,可以使用下面的代码:
$('a[@title]')
此外,方括号在XPath语法中还有另外一种用途,即在不带前置@符号的情况下,可以用来指定包含在另一个元素中的元素。例如,我们可以通过下面的选择符表达式,取得包含一个ol元素的所有div元素(注:属性选择符方括号中的字符串,仅作为筛选标准存在,用来辅助选择目标对象;方括号左侧的元素才是属性选择符真正要选择的目标对象。)
$('div[ol]')
为链接添加样式
属性选择符允许以类似正则表达式的语法来标识字符串的开始(^)和结尾($)。而且,也可以使用星号(*)标识字符串中的任意位置。
假设我们想以不同的文本颜色来显示不同类型的链接。那么,首先要在样式表中定义如下样式:
a{ color:#00f; } a.mailto{ color:#f00; } a.pdflink{ color:#090; } a.mysite{ text-decoration:none; border-bottom:1px dotted #00f; }
然后,可以使用JQuery为符合条件的链接添加3个类:mailto、pdflink和mysite。
要取得所有电子邮件链接,需要构造一个选择符,用来寻找所有带href属性([@href])且以mailto开头(^="mailto:")的锚元素(a)。结果如下:
$(document).ready(function(){ $('a[@href^="mailto:"]').addClass('mailto'); });
要取得所有指向PDF文件的链接,需要使用美元符号($)而不是脱字符号(^),来取得所有带href属性并以.pdf结尾的链接,相应的代码如下:
$(document).ready(function(){ $('a[@href^="mailto:"]').addClass('mailto'); $('a[@href$=".pdf"]').addClass('pdflink'); })
最后,要取得所有内部链接,即到mysite.com中其他页面的链接,则需要使用星号:
$(document).ready(function(){ $('a[@href^="mailto:"]').addClass('mailto'); $('a[@href$=".pdf"]').addClass('pdflink'); $('a[@href*="mysite.com"]').addClass('mysite'); })
这里,mystie.com可以出现在href属性值中的任何位置上。如果我们也想选择指向mysite.com内部所有子域名的链接,使用这个选择符特别关键(这里指的是使用顶级域名mysite.com,而不是使用具体的子域名。否则,会排除www之外的任何子域名。)
至此,本节内容全部结束,在下一节内容中,我们会介绍自定义选择符。