工厂函数$()

$('p')  取得文档中所有段落
$('#some-id')  取得文档中ID为some-id的一个元素
$('.some-class')  取得文档中类为some-class的所有元素

CSS选择符

jQuery支持CSS规范1到3中所有的选择符，开发应该遵循渐进增强和平稳退化。即使无Javascript开启的时候，也要和开启时候功能基本相同，只是没有那么美观。

给一个ul下面的第一层li添加样式。

[javascript]
$(document).ready(function ()
{
$('#selected-plays > li').addClass('horizontal');
});
[/javascript]

注意这里>是“子元素”选择符号.
另外一种方法:

[javascript]
$(document).ready(function ()
{
$('#selected-plays').children().addClass('horizontal');
});
[/javascript]

这里的children()是jQuery中DOM遍历方法，只对第一层孩子有效。

自定义选择符号not用法：给不具有.horizontal的li添加（实际就是除了第一层孩子之外）

[javascript]
$(document).ready(function ()
{
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
});
[/javascript]

属性选择符[]

$('img[alt]')即选定了所有img标签的alt属性。
[]内的属性可以使用过滤器：
^=  开头是。。。
*=  任意部分是。。。
$=  结尾是。。。

把开头是mailto的链接添加额外标志（如加一个信封icon）

[javascript]
$(document).ready(function ()
{
$('a[href^=mailto]').addClass('mailto');
});
[/javascript]

把结尾时pdf的标签加一个额外标志（如一个pdf图标）

[javascript]
$(document).ready(function ()
{
$('a[href$=pdf]').addClass('pdflink');
});
[/javascript]

自定义选择符

自定义选择符，以:开头，都是从下标0开始的。
:eq() 下标等于 下标0开始
:nth-child() 第几个孩子，从1开始下标
:first-child() 第一个孩子
: odd() 选择奇数的下标
:even() 选择偶数的下标
:contains() 文本内容包含，属于DOM遍历的

给表格的奇数行，偶数行应用“白-黑”交替的效果

[javascript]
$(document).ready(function ()
{
$('tr:odd').addClass('alt');
});
[/javascript]

为了解决多个表格造成的Bug

[javascript]
$(document).ready(function ()
{
$('tr:nthchild(odd)').addClass('alt');
});
[/javascript]

DOM遍历

以DOM树上的结构作为视角进行选择等操作。

$('tr').filter(':odd').addClass('alt')

filter()也可以应用函数，比如实现外链接额外CSS样式：

[javascript]
$(document).ready(function ()
{
$('a').filter(function ()
{
return this.hostname && this.hostname != location.hostname;
}
).addClass('external');});
[/javascript]

 

为含Henry的下一单元格添加标记

[javascript]
$(document).ready(function ()
{
$('td:contains(Henry)').next().addClass('red');
});
[/javascript]

选择Henry所在行的标记（Henry是在td中，先选择tr，再选择tr所有的孩子td）

[javascript]
$(document).ready(function ()
{
$('td:contains(Henry)').parent().next().addClass('red');
});
[/javascript]

直接访问DOM

$('#my-element').get(0).addClass('class')

或者

$('#my-element')[0].addClass('class')