learning jQuery学习笔记一 -- 选择符

注：本笔记内容摘自《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（奇数）。