XPath 是在XML 文档中识别不同元素或者元素值的一种语言,与CSS在HTml文档中识别元素的方式类似。
在涉及属性选择符是,jQuery使用了Xpath中的惯例来标识属性,即将属性前置一个@符号并放在一对方括号中,也就是说,Jquery没有采用CSS中不够灵活的属性选择符语法。例如 ,要选择所以带title属性的链接,可以使用下面代码 :$('a[@title]')
此外,方括号在Xpath语法中还有另一中用途,即在不带前置@符号情况下,可以用来指定包含在另一个元素中的元素。例如, 我们可以通过下面的选择符表达式,取得包含一个ol元素的所有div元素: $('div[ol]')
为连接添加样式
属性选择符允许以类似正则表达式的语法来标识字符串的开始(^)和结尾($)。而且也可以使用(*)表示字符串中的任意位置。
下面我们看看Jquery为符合条件的链接添加3个类:mailto、pdflink和mysite。
alice.css
1
.emphasized
2
{
3
font-style:italic;
4
border:1px solid #888;
5
padding:0.5em;
6
}
7
.horizontal
8
{
9
float:left;
10
list-style:none;
11
margin:10px;
12
}
13
14
.sublevel
15
{
16
background-color:#ffc;
17
}
18
a
19
{
20
color:#00f;
21
}
22
a.mailto
23
{
24
color:#f00;
25
}
26
a.pdflink
27
{
28
color:#090;
29
}
30
a.mysite
31
{
32
text-decoration:none;
33
border-bottom:1px dotted #00f;
34
}
35

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

alice.js
1
$(document).ready(function() {
2
$('#selectedplays>li').addClass('horizontal');//使用子元素组合符(>)将horizontal类只添加到位于顶级的项中。#selectedplays>li:查找在ID为selectedplays元素的子元素(>)中所有的列表项(li)
3
$('#selectedplays>li:not(.horizontal)').addClass('sublevel');//与上相反
4
5
6
$('a[@href^="mailto:"]').addClass('mailto');//取得所有电子邮件链接,用来寻找所有带href属性([@href])且以mailto开头(^="mailto:")的锚
7
8
$('a[@href$=".pdf"]').addClass('pdflink');//取得所有带href属性并以.pdf结尾的链接,必须是使用$
9
$('a[@href*="mysite.com"]').addClass('mysite');//取得所有内部链接,必须使用*
10
});

2

3

4

5

6

7

8

9

10

apsx
1
<ul id="selectedplays">
2
<li>Comedies
3
<ul>
4
<li><a href="http://www.mysite.com/asyoulikeit/">As You Like It</a></li>
5
<li>All's Well That Ends Well</li>
6
<li>A Midsummer Night's Dream</li>
7
<li>Twelfth Night</li>
8
</ul>
9
</li>
10
<li>Tragedies
11
<ul>
12
<li><a href="hamlet.pdf">Hamlet</a></li>
13
<li>Macbeth</li>
14
<li>Romeo and Juliet</li>
15
</ul>
16
</li>
17
<li>Histories
18
<ul>
19
<li>Henry IV(<a href="mailto:henryiv@king.co.uk">email</a>)</li>
20
<ul>
21
<li>Part I</li>
22
<li>Part II</li>
23
</ul>
24
<li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
25
<li>Richard II</li>
26
</ul>
27
</li>
28
</ul>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步