[jQuery]jQuery学习笔记(一) – 选择元素

选择元素

通过CSS选择符在页面中查找元素;扩展jQuery标准的CSS选择符;让选择页面元素更灵活的DOM遍历方法。

使用$()函数

有3种基本的选择符:标签名、ID和类。

基本的选择符
选择符 CSS jQuery 说明
标签名 p{} $(‘p’) 取得文档中所有的段落
ID #some-id{} $(‘#some-id’) 取得文档中ID为some-id的某个元素
.some-class{} $(‘.some-class’) 取得文档中类为some-class的所有元素

在将方法连缀到$()工厂函数后面时,包装在jQuery对象中的元素会被自动、隐式地循环遍历。

CSS选择符

.addClass()函数和子元素组合符(>)

当在jQuery代码中使用$(document).ready()时,位于其中的所有代码都会在DOM加载后立即执行。

第2行代码使用子元素组合符(>)将horizontal类只添加到位于ID#selected-plays所在的标签之下的次级标签<li>。addClass()的效果是将CSS类加到所选定的标签上。

 

如若没有那个子元素组合符(>),则本行代码是针对位于ID#selected-plays所在的标签之下的所有<li>标签都生效。

 

本段代码中,第2行代码是选定ID为#selected-plays的标签的次级<li>标签添加.horizontal类;第3行代码是选中#selected-plays标签下所有不含.horizontal类的<li>标签,为这些标签添加.sub-level类。使用的是:not(.horizontal)的筛选方法。

属性选择符

属性选择符是CSS选择符中特别有用的一类选择符。顾名思义,属性选择符通过HTML元素的属性选择元素,例如链接的title属性或图像的alt属性。例如,要选择带有alt属性的所有图像元素,可以使用以下代码:

为链接添加样式

属性选择符使用一种从正则表达式中借鉴来的通配符语法,以^表示值在字符串的开始,以$表示值在字符串的结尾。而且,而是用型号*表示要匹配的值可以出现在字符串中的任意位置,用感叹号!表示对值取反。

第2行,对所有的电子邮件链接添加类,读取a标签中href属性开头为”mailto:”的a标签们,然后向这些标签添加样式.mailto。
第3行,对所有的指向.pdf格式文件的下载链接添加类,读取a标签中href属性结尾为”.pdf”的a标签们,然后向这些标签添加样式.pdflink
第4行,对所有开头为http,且链接中包含”henry”的a标签添加.henrylink类。

自定义选择符

jQuery中的多数自定义选择符都可以让我们从已经找到的元素中选出一或多个元素。自定义选择符通常跟在一个CSS选择符后面,基于已经选择的元素集的位置来查找元素。

自定义选择第几项操作

自定义选择符的语法与CSS中的伪类选择符的语法相同,即选择符以冒号(:)开头。例如,我们想要从带有horizontal类的<div>集合中选择第2项,那么应该使用下面的代码:

JavaScript数组采用从0开始的编号方式,而CSS则是从1开始的。所以eq(0)是第1个元素,eq(1)是第2个元素。(个人认为用C语言数组记忆就可以了,a[0]是第一个元素,同理)

选择偶数或奇数行操作

这里第2行代码的意思是为奇数行添加样式,然而,:even是取偶数,奇数要用:odd。而前文说了,JavaScript从0开始,而CSS从1开始,所以应该用偶数。

但有一个例外:

:nth-child()是jQuery中唯一从1开始计数的选择符。

选择包含某个子串的标签

对于包含Henry的<td>标签增加样式类highlight。

基于表单的选择符

表单选择符
选择符 匹配
:input 输入字段、文本区、选择列表和按钮元素
:button 按钮元素或type属性值为button的输入元素
:enable 启用的表单元素
:disabled 禁用的表单元素
:checked 勾选的单选按钮或复选框
:selected 选择的选项按钮

与其他选择符类似,组合使用表单选择符可以更有针对性。例如,使用$(‘input[type=”radio”]:checked’)可以选择所有选中的单选按钮(而不是复选框),而使用$(‘input[type=”password”],input[type=”text”]:disabled’)则可以选择所有密码输入字段和禁用的文本输入字段。

DOM遍历方法

很多情况下,取得某个元素的氟元素或者祖先元素都是基本的操作,而这正是jQuery的DOM遍历方法的用武之地。有了这些方法,我们可以轻而易举地在DOM树中上下左右地自由漫步。

.filter()方法

$(‘tr:even’).addClass(‘alt’)这行代码用于添加alt类,可以通过.filter()方法重写成下面这样:

$(‘tr’).filter(‘:even’).addClass(‘alt’);

.filter()的功能也十分强大,因为它可以接受函数参数。通过传入的函数,可以执行复杂的测试,以决定相应元素是否应该保留在匹配的集合中。

例如:假设我们要对所有的外部链接添加一个类 a.external{},jQuery中没有针对这种需求的选择符,但有筛选函数,就仍可以执行隐式迭代。

第3行代码可以筛选出符合下面两个条件的<a>元素

  • 必须包含一个带有域名(this.hostname)的href属性。这个测试可以排除mailto及类似链接;
  • 链接指向的域名(还是this.hostname)必须不等于页面当前所在域的名称(location.hostname)

.filter()方法会迭代所有匹配的元素,对每个元素都调用传入的函数并测试函数的返回值。如果函数返回false,则从匹配集合中删除相应元素;如果返回true,则保留相应元素。

.next()方法

找到标签后寻找其下一个标签的方法.next()。

.nextAll()方法

找到标签后将其之后的标签全部选中。

.next()和.nextAll()方法分别有一个对应方法,即.prev()和.prevAll()。此外,.siblings()能够选择处于相同DOM层次的所有其他元素,无论这些元素处于当前元素之前还是之后。

.addBack()方法

要在这些单元格中再包含原来的单元格(即包含Henry的那个单元格),可以添加.addBack()方法

另一种方式,.parent()和.children()方法

先通过.parent()方法在DOM中上溯一层到达<tr>,然后再通过.children()选择该行的所有单元格。

关于parent(),其可选择一个参数,用以寻找其唯一的父元素的元素集合。

文档中的例子:

html:

js:

结果:

这里我们可以看到,返回值为Hello Again的父元素,含有.selected样式的<div>标签。这是因为parent()函数中的参数.selected指定了父类的样式。

连缀

在jQuery中,可以通过一行代码取得多个元素集合饼对这些元素集合执行多次操作。jQuery的这种连缀能力不仅有助于保持代码简洁,而且在替代组合重新指定选择符时,还有助于提升脚本性能。

这行长长的代码可以写成:

将它分开放倒多行饼添加明确的注释,从长远来看则可以节省更多的时间。

访问DOM元素

jQuery提供了.get()方法,用于直接访问DOM元素。

如果想知道带有id=”my-element”属性的元素的标签名,应该使用如下代码:

var myTag = $(‘#my-element’).get(0).tagName;

也可以简写为:

var myTag = $(‘#my-element’)[0].tagName;

也就是说,可以在选择符后面直接使用方括号。