建议学习时长： 30分钟
学习方式：深入
学习目标
- 知道如何用 jQuery 选取元素。
- 知道在选取元素的元素上过滤和添加元素。
详细介绍
用选择器选取元素
$(选择器 [, 父元素])
如：
$('#save-btn');// 所有 id 为 save-btn 的
$('.btn', $('form'));// form 元素下类名包含 btn 的元素
$('.box h2.title'); // 所有类名包含 box 的元素下的类名包含 title 的 h2
jQuery 支持的选择器包括：
- CSS 1-3 定义的选择器。
- jQuery 自定义的选择器。
注意：
对于 jQuery 自定义的选择器，为了性能，先用 CSS 定义的选择器选，再从结果集中筛选时用 jQuery 自定义的选择器。如：
// 不推荐
$('.form:visible');
$('.form :selected');
$('.list:eq(3)');
// 推荐
$('.form').filter(':visible');
$('.form').find(':selected');
$('.list').eq(3);
一些有用的选择器
表单类
是否可见
内容过滤
-
:contains(文本) 如：
$("div:contains('John')") - :empty 没有子元素或没有文本内容的元素
- :has(选择器) 有指定子元素的元素
其他
- :not(选择器) 不满足指定选择器的元素
- :animated 正在做动画的元素
- :eq(下标值) 在兄弟节点中的位置等于下标值的的元素。下标从 0 开始。
- :gt(下标值) 在兄弟节点中的位置大于下标值的的元素。下标从 0 开始。
- :lt(下标值) 与 :gt 相反。
选择器中包含元字符的处理
选择器的元字符有：!"#$%&'()*+,./:;<=>?@[\]^{|}~。
选择器中如果要使用选择器的元字符，必须用 \ 来转义。如：选择 id 为 foo.bar 的元素，要使用 $("#foo\\.bar")。如果使用 $("#foo.bar")，则选择的是 id 为 foo 并且有 bar 的类名的元素。
从层级中选取元素
从父元素和祖系元素中找
- .closest([选择器])
- .parent([选择器])
- .parents([选择器])
- .offsetParent() 找最近的父级定位元素（position 不为 static 的元素）
| closest | parents | parent |
|---|---|---|
| 从当前元素开始 | 从父级开始 | 从父级开始 |
| 向上查找直到找到匹配的 | 向上查找直到文档的根节点 | 向上查找一层 |
| 为执行操作的每个jQuery对象返回最多一个元素 | 为执行操作的每个jQuery对象返回0或多一个元素 | 为执行操作的每个jQuery对象返回最多一个元素 |
从子元素中下找
- .find([选择器])
- .children([选择器])
- .contents() 元素下的内容：包括文本节点和注释节点。常常也用来做选取 iframe 的内容，如
$('#frameDemo').contents().find('a');
// 等效与
$('#frameDemo')[0].contentWindow.$('a');
从兄弟元素中找
过滤掉不满足条件的元素
$(".btn")
.filter(function(index) {
return index > 2 && $(this).is(':visible');
});
选中集合中添加元素
add
自定义选择器
例如
$.extend($.expr[':'], {
notEmpty: function(el,index, meta, stack) {
// element- DOM元素
// index - 堆栈中当前遍历的索引值
// meta - 关于你的选择器的数据元
// stack - 用于遍历所有元素的堆栈
return $(el).val() !== "";
}
});
$(':text:notEmpty') //所有值不为空的输入框
