jQuery技术

JQuery系列教程之XPath选择符

字号+ 作者:H5之家 来源:H5之家 2017-06-20 08:03 我要评论( )

XPath(XML Path Language,XML路径语言)是在XML文档中识别不同元素或者元素值的一种语言,与CSS在HTML文档中识别元素的方式类似。JQuery库支持一组基本的XPath

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之外的任何子域名。)

    至此,本节内容全部结束,在下一节内容中,我们会介绍自定义选择符。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jquery select 下拉框选择代码

      jquery select 下拉框选择代码

      2017-06-20 12:06

    • 深入理解jQuery的Event机制

      深入理解jQuery的Event机制

      2017-06-20 08:00

    • Hybrid App开发之jQuery基础

      Hybrid App开发之jQuery基础

      2017-06-19 11:03

    • jQuery教程-jQuery中的Ajax操作

      jQuery教程-jQuery中的Ajax操作

      2017-06-19 10:04

    网友点评
    =