jquery选择器一般使用$(selector)的方法,这个命令非常简单但是作为参数的selector的jquery选择器分类繁多,包括:基本选择器,过滤选择器,层次选择器和表单选择器。线面分别介绍一下:
1、基本选择器
基本选择器有如下几类:
选择器 | 定义 | 示例 |
* | 选取所有元素 | $("*")选取所有元素 |
element | 根据标签名选取元素 | $("p")选取所有的p元素 |
#id | 根据id属性值选取元素 | $("#core") |
.class | 根据class属性值选取元素 | $(".clear") |
前三个好理解,在第四个中,用.class选取的元素中,只要class中包含这一类,进包含。例如 class="top clear" 和class = “clear” 都会被选择。
与element #id选择相比,.class执行效率很低。
2、选择过滤器
过滤选择器可以附加在所有选择器后面,通过特定的过滤规则来筛选出一部分元素。
过滤器一般分为以下几种:
1、基本过滤选择器
基本过滤选择器,是基本的对元素位置的判断,判断在哪个位置,然后选择即可。
:first |
:last |
:even |
:odd |
:eq(index) |
:gt(index) |
:lt(index) |
:not(selector) |
:header |
:animated |
例如,我们选择在第一个位置的P,就是p:first,在第5个位置的p,就是p:eq(4),或者从第六个开始,第9个结束的p,则是p(:gt(5),:lt(9))
也就是说,基本过滤选择器是直接对位置进行选择,位置是绝对的位置,只计算所选元素的位置。例如,p:firsst是指在所有的p中,选择第一个p。
2,子元素过滤选择器
:first-child |
:last-child |
:only-child |
:nth-child(odd) |
:nth-child(even) |
:nth-child(index) |
子元素过滤选择器可以理解为对相对位置的选择,即根据某个元素的相对位置,来选择某个元素。
对于子元素过滤选择器来说,位置是相对来说的,元素是从父元素里面包含的所有元素来计算的,而且索引值从第一个值开始。
例如:p:first-child 是指,p作为子元素中的第一个,这个子元素不仅仅包括p,所有的子元素都包含在内。例如:
<div>
<h3>主题一</h3>
<p>内容段落1</p>
<p>内容段落2</p>
<p>内容段落3</p>
</div>
p:first-child 是不存在的,因为p没有作为第一个孩子,而是从第二个孩子开始。
3、内容选择过滤器
:contains |
:has |
:parent |
:empty |
4、可见性选择过滤器
:hidden
:visible
5、属性选择过滤器
属性是直接根据属性值进行过滤的选择器。常见的方法是ele[属性 = value]
这样就可以直接选择了。
在基本选择器中,直接就有根据class属性来进行选择的方法,即利用. 来选择。
属性选择器中也有 [class = value] 来进行选择的方法,但是属性值选择的方法,跟基本选择器的方法,有所不同:
[attr] |
[attr=value] |
[attr!=value] |
[attr~=value] |
[attr^=value] |
[attr$=value] |
[attr*=value] |
属性选择器有点类似于正则表达式,完全匹配上的才能选择到。
attr=value 表示选择只能有这个属性值的。
attr~=value 表示选择其中有一个是value的,其他类似。
3、层次选择器
层次选择器是先选择一个元素,然后再从这个元素中选择元素,可以理解为通过两个选择来进行定位。
其中主要有四个:
s1 s2 |
s1 > s2 |
s1 + s2 |
s1 ~ s2 |
四种不同的方法来进行不同的选择:
s1 s2是从后代里选,表示s2从s1的后代里寻找符合条件的
s1>s2 是从子元素里选,表示只选择子元素里符合条件的,所以s1 s2 包含了 s1 > s2
s1 + s2 和s1 ~ s2 是从兄弟中选,其中s1+s2是选择第一个兄弟,s1~s2选择所有的兄弟。