《jQuery基础教程》读书笔记–第二章

工厂函数$()

$('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')

Leave a Reply

Your email address will not be published.