使用jQuery获取元素
-
我们可以通过document.getElementById等方法获取DOM对象，但是方法名称长，使用不方便，而且功能有限，不能像CSS选择器那样灵活
-
jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素。讲jQuery不得不提到其选择器，这是jQuery能够快速流行的非常重要的原因，为了方便使用者jQuery刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器
选择器
| 基本选择器 |
|
| $('*') |
匹配页面所有元素 |
| $('#id') |
id选择器 |
| $('.class') |
类选择器 |
| $('element') |
标签选择器 |
| 组合/层次选择器 |
|
| $('E,F') |
多元素选择器，用”,分隔，同时匹配元素E或元素F |
| $('E F') |
后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F |
| $(E>F) |
子元素选择器，用”>”分隔，匹配E元素的所有直接子元素 |
| $('E+F') |
直接相邻选择器，匹配E元素之后的相邻的同级元素F |
| $('E~F') |
普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） |
| $('.class1.class2') |
匹配类名中既包含class1又包含class2的元素 |
| 基本过滤选择器 |
|
| $("E:first") |
所有E中的第一个 |
| $("E:last") |
所有E中的最后一个 |
| $("E:not(selector)") |
按照selector过滤E |
| $("E:even") |
所有E中index是偶数 |
| $("E:odd") |
所有E中index是奇数 |
| $("E:eq(n)") |
所有E中index为n的元素 |
| $("E:gt(n)") |
所有E中index大于n的元素 |
| $("E:lt(n)") |
所有E中index小于n的元素 |
| $(":header") |
选择h1~h6 元素 |
| $("div:animated") |
选择正在执行动画效果的元素 |
| 内容过滤器 |
|
| $('E:contains(value)') |
内容中包含value值的元素 |
| $('E:empty') |
内容为空的元素 |
| $('E:has(F)') |
子元素中有F的元素，$('div:has(a)'):包含a标签的div |
| $('E: parent') |
父元素是E的元素，$('td: parent'):父元素是td的元素 |
| 可视化选择器 |
|
| $('E:hidden') |
所有被隐藏的E |
| $('E:visible') |
所有可见的E |
| 属性过滤选择器 |
|
| $('E[attr]') |
含有属性attr的E |
| $('E[attr=value]') |
属性attr=value的E |
| $('E[attr !=value]') |
属性attr！=value的E |
| $('E[attr ^=value]') |
属性attr以value开头的E |
|
('E[attr=value]') |
属性attr以value结尾的E |
| $('E[attr *=value]') |
属性attr包含value的E |
| $('E[attr][attr *=value]') |
可以连用 |
| 子元素过滤器 |
|
| $('E:nth-child(n)') |
E的第n个子节点 |
| $('E:nth-child(3n+1)') |
E的index符合3n+1表达式的子节点 |
| $('E:nth-child(even)') |
E的index为偶数的子节点 |
| $('E:nth-child(odd)') |
E的index为奇数的子节点 |
| $('E:first-child') |
所有E的第一个子节点 |
| $('E:last-child') |
所有E的最后一个子节点 |
| $('E:only-child') |
只有唯一子节点的E的子节点 |
| 表单元素选择器 |
|
| $('E:type') |
特定类型的input |
| $(':checked') |
被选中的checkbox或radio |
| $('option: selected') |
被选中的option |
简直就是复习CSS选择器，正是得益于此，开发者在众多js库中迅速青睐于jQuery，看个图方便记忆
- 除了使用选择器jQuery还提供了一些方法帮助我们查找当前元素相关元素
.eq(index), .get([index])
- 对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法
$('div').eq(3); // 获取结果集中的第四个jQuery对象
- 我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象
$('div')[2];
$('div').eq(2);
get()不写参数把所有对象转为DOM对象返回
