简介:探索一些CSS和XPath选择符,以及JQuery独有的自定义选择符。介绍JQuery的DOM便历方法
1。DOM
jQuery 最强大的方面之一就是它能够简化DOM遍历任务。
2。工厂函数$()
放到圆括号中的任何元素都将自动执行循环遍历,并且会被保存到一个JQuery对象中。
标签名:$(‘p’)会取得文档中所有在段落。
ID:$(‘#some-id’)会取得文档中具有对应的some-id ID的一个元素。
类:$(‘.some-class’)会取得文档中带亦some-class 类的所有元素。
提示:美元符号$只不过是对标识符jQuery的一种简写方式。如果冲突可将$替换JQuery
3。当在JQuery代码中使用$(document).ready()结构时,位于其中的所有代码都会在DOM加载后立即执行。
例1:$(document).ready(function(){
$(‘#selectedplays>li’).addClass(’horizontal’); /*查找ID为 selected-plays 的元素(#selected-plays)的
子元素(>)中所有的列表项(li)*/
});
>:将horizontal类只添加到位于顶级的项中。
例2:$(document).ready(function(){
$('#selectedplays>li').addClass('horizontal');
$('#selectedplaysli:not(.horizontal)').addClass('sublevel'); /*没有horizontal类(not(.horizontal))*/
})
4。在涉及属性选择符(attribute selector)时,jQuery使用了XPath中的惯例来标识属性,即将属性前置一个@符号并放在一对方括号中。
例如,要选择所有带title属性的链接,可以使用下面的代码:
$('a[@title]')
此外,方括号在XPath语法中还有另外一种用途,即在不带前置@符号的情况下,可以用来指定包含在另一个元素的元素。
例如,取得包含一个ol元素的所有div元素:$('div[ol]')
5。属性选择符允许以类似正则表达式的语法来标识字符串的开始(^)和结尾($)。而且,也可以使用星号(*)表示字符串的任意位置。
例如:以不同的文本颜色来显示不同类型的链接。
(1)首先要在样式表中定义如下样式:
a.mailto{
color:#f00;
}
a.pdflink{
color:#090;
}
a.mysite{
textdecoration:none;
borderbottom:1px dotted #00f;
}
(2)然后,可以使用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');
})
(3)最后,要 取得所有内部链接,即到mysite.com中其他页面的链接,则需要使用星号:
$(document).ready(function(){
$('a[@href^="mailto:"]').addClass('mailto');
$('a[@href$=".pdf"]').addClass('pdflink');
$('a[@href*="mysite.com"]').addClass('mysite');
});
6。自定义选择符,选择符以一个冒号(:)开头。
例如:我们想要从匹配的带有horizontal类的div集合中,选择第2个项,那么应该使用下面的代码:
$('div.horizontal:eq(1)')
注意:因为JavaScript数组采用从0开始的编号方式,所以eq(1)取得的是集合中的第2个元素。
而CSS则是从1开始的,因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div.
自定义选择符 :odd和:even。
例如:通过这两个选择符为表格添加基本的条纹样式。
<table>
<tr>
<td>As You Like It </td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well </td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<td>Macheth</td>
<td>Tragedy</td>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV,Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
我们可以向样式表中添加两个类,一个用于为奇数行添加样式,另一个用于为偶数行添加样式:
odd{
backgroundcolor:#ffc;
}
.even{
backgroundcolor:#cef;
}
最后,编写jQuery代码,将这两个类添加到表格行(<tr>标签)中:
$(document).ready(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
});突出显示可用 :contains()选择符,如:.hightlight{font-weight:bold;color:#f00;}
<script>
$(document).ready(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$('td:contains("Henry")').addClass("hightlight");
});
</script>
7。.get()方法
例如:如果想知道带有id="my-element"属性的元素的标签名,应该使用如下代码:
var myTag=$('#myelement').get(0).tagName; 或者简写为$('#my-element')[0],也就是说,可以在选择符后面直接使用方括号。