jquery之选择器和筛选器

jquery之选择器

根据给定的id、class或者tagName匹配一个元素。

使用任何的元字符（如!"#$%&'()*+,./:;<=>?@[\]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\\

一、        基本选择

id:$(“#id”);

class:$(“.class”);

tagName:$(“tagName”);

对于含有特殊字符的名称如：!"#$%&'()*+,./:;<=>?@[\]^`{|}~这些的要加\\转义。

如：id值为box[a]

Jquery代码：$(“box\\[a\\]”);

 

jquery支持类似于css的选取器写法。

如：$(“#id,.class,tagName”);

表示选择该id、该class和该标签名的所有标签组成的一个集合。

二、        层级选择

1.    祖级选择器

如：$(“.box p”);

表示匹配class名字为box下的所有p标签，box与p的关系可以是父级关系，也可以是祖级关系。

2.    父级选择器

如：$(“.box>p”);

表示匹配class名字为box下的子集p标签，box与p的关系是父级关系。

3.    next单一选择器

如：$(“.box+p”);

表示匹配class名字为box后的p标签，即.box的next标签是p。(仅有1个)。

4.    next多个选择器

如：$(“.box~p”);

表示匹配class名字为box后的所有p标签，即.box的next后所有的p标签。

三、        基本筛选器

1.    jquery之:first

如：$(“li:first”);

表示匹配第一个li标签，等价于$(“li”).eq(0);

2.    jquery之:not(selector)

如：$(“input:not(:checked)”);

表示匹配没有被选中的所有复选框input标签。

3.    jquery之:even

如：$(“li:even”);

表示匹配下标为偶数的li标签

4.    jquery之:odd

如：$(“li:odd”);

表示匹配下标为奇数的li标签

5.    jquery之:eq(index)

如：$(“li:eq(4)”);

表示匹配下标为4的li标签，也就是第5个li标签，等价于$(“li”).eq(4);

6.    jquery之:gt(index)

如：$(“li:gt(0)”);

表示匹配下标值大于0的li标签。

7.    jquery之:lang(language)

如：$(“li:lang(en)”);

表示匹配语言值为en和他们后代的li标签，但不包括<li lang=”fr”></li>，同时也包括<li lang=”en-us”></li>

8.    jquery之:last

如：$(“li:last”);

表示匹配最后一个li标签，长度为1

9.    jquery之:lt(index)

如：$(“li:lt(5)”);

表示匹配下标值小于5的li标签。

10.  jquery之:header

如：$(“:header”);

表示匹配所有的h1、h2…..h7标签

11.  jquery之:animated

如：$(“div:animated”);

表示匹配所有正在执行动画效果的div标签

12.  jquery之:focus</