注:本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考
$()工厂函数
常见格式:
标签名:$('p') --会取得文档中所有的段落
ID:$('#some-id') --会取得文档中具有对应的some-id ID的一个元素
类:$('.some-class') --会取得文档中带有some-class类的所有元素
jQuery里,$就是jQuery的缩写。在javascript函数库中,$()的使用非常普遍,为了避免同一页面中
同时出现而产生冲突,可以用jQuery来替代$,如jQuery().
CSS选择器
在css样式表文件中定义一个类 horizontal如下:
.horizontal{
float:left;
list-style:none;
margin:10x;
}
$(document).ready(function(){
// 对id为selected-plays的子元素li添加样式horizontal
$('#selected-plays>li').addClass('horizontal');
// 没有horizontal类(:not(.horizontal))
$('#selected-playsli:not(.horizontal)').addClass('sub-level');
});
XPath选择符
$(document).ready(function(){
$('a[@href^="mailto:"]').addClass('mailto');//寻找带有href属性且以mailto开头的锚元素(a)
$('a[@href$=".pdf"]').addClass('pdflink');//取得所有带有href属性并以.pdf结尾的链接
$('a[@href*="mysite.com"]').addClass('mysite');//要取得所有内部链接,即到mysite.com中其他页面的链接,则需要使用星号
});
自定义选择符
1、从匹配的带有horizontal类的div集合中,选择第2个项,那么应该使用下面的代码:
$(‘div.horizontal:eq(1)’)
2、
为奇数行添加样式:
.odd{
background-color:#ffc;/*奇数行的背景颜色为浅黄色*/
}
为偶数行添加样式:
.even{
background-color:#cef;/*偶数行的背景颜色为浅蓝色*/
}
将这两个类添加到表格行
$(document).ready(function(){
$(‘tr:odd’).addClass(‘odd’);//为奇数行添加样式
$(‘tr:even’).addClass(‘even’);//为偶数行添加样式
$(‘td:contains(‘Henry’)’).addClass(‘highlight’);//为含有“Henry”的行添加样式
//针对id为subCompanyIn的表格设置奇数行样式
$('#subCompanyInTabletr:odd').css("background-color","#DBE5F1");
});
Javascript本身从0开始编号,所以第一行为编号为0(偶数),第二行编号为1(奇数)。