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

如：$(“form:focus”);

表示匹配当前form表单获取焦点的元素。

13.  jquery之:root

如：$(“:root”);

表示选择当前文档的根元素，永远是html标签

14.  jquery之:target

如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。 例如，给定的URI http://example.com/#foo， $( "p:target")，将选择<p id="foo">元素。

四、        内容选择器

1.    jquery之:contains(text)

如：$(“div:contains(‘hello’)”);

表示选择内容包含’hello’的div标签。但是对于<div>hell<p>o</p></div>，仍然可以选中这个div标签

2.    jquery之:empty

如：$(“div:empty”);

表示选择不含子元素或空文本(不包含空格)的div标签

3.    jquery之:has(selector)

如：$(“div:has(‘p’)”);

表示子集(祖级)有p标签的div标签。has经测试传class名字不生效

4.    jquery之:parent

如：$(“div:parent”);

表示选择含子元素或文本(包含空格)的div标签,与:empty相反

5.    jquery之:hidden

如：$(“input:hidden”);

表示匹配所有不可见的input标签或者type为hidden的input标签。(不可见只针对于display:none，对visibility:hidden不生效)

6.    jquery之:visible

如：$(“input: visible”);

表示匹配所有可见的input标签。(针对visibility:hidden同样视为可见)

五、        属性选择器

1.    jquery之[attribute]

如：$(“div[id]”);

表示匹配含有id的div元素。支持自定义属性。

2.    jquery之[attribute=value]

如：$(“div[id=’a’]”);

表示匹配id为a的div元素。支持自定义属性。

3.    jquery之[attribute!=value]

如：$(“div[id!=’a’]”);

表示匹配id不为a的div元素。支持自定义属性。

等价于$(“div:not(id=’a’)”);

4.    jquery之[attribute^=value]

如：$(“div[id^=’a’]”);

表示匹配id值以’a’开始的div元素。支持自定义属性。

5.    jquery之[attribute$=value]

如：$(“div[id$=’a’]”);

表示匹配id值以’a’结尾的div元素。支持自定义属性。

6.    jquery之[attribute*=value]

如：$(“div[id*=’a’]”);

表示匹配id值包含’a’的div元素。支持自定义属性。

7.    jquery之[attrSel1] [attrSel2][attrSelN]

如：$(“div[id^=’a’][id$=’b’][id*=’c’]”);

表示匹配id值以’a’开始、以’b’结尾、包含’c’的div元素。支持自定义属性。(且关系)

六、        子元素选择器

1.    jquery之:first-child

如：$(“ul li:first-child”);

表示匹配每个ul中的第一个li，不同于:first只匹配第一个li

2.    jquery.之:first-of-type

<div id="n1">     <div id="n2" class="abc">         <label id="n3">label1</label>         <span id="n4">span1</span>         <span id="n5" class="abc">span2</span>         <span id="n6">span3</span>     </div>     <div id="n7">         <span id="n8" class="abc">span1</span>         <span id="n9">span2</span>     </div> </div>

如：$(“span:first-of-type”);

表示匹配同级第一个span标签，所以id为n4和n8的被匹配到。

再如：$(“.abc:first-of-type”);

这次匹配到的是id为n2和n8的标签。

等价于:nth-of-type(1)

3.    jquery之:last-child

如：$(“ul li:last-child”);

表示匹配每个ul中最后一个li，不同于:last只匹配最后一个li

4.    jquery之:last-of-type

与first-of-type相反。

5.    jquery之:nth-child(index)

如：$(“ul li:nth-child(2)”);

表示查找每个ul下的第2个li。下标是以1开始的。

<ul> <div>         <li></li>         <li></li> </div> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul>

注意：$(“ul li:nth-child(2)”);匹配到的是三个。

6.    jquery之:nth-last-child()

这个与nth-child()相反，下标是从后往前数的。1代表最后一个。

7.    jquery之:nth-last-of-type()

<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul>

如：$(“ul li:nth-last-of-type(1)”).css(“color”,”red”);

可传odd、even等。同时可传公式如(3n+2),n以0开始自增。

8.    jquery之:nth-of-type()

与:nth-last-of-type()相反,不再赘述。

9.    jquery之:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

<ul> <li>1</li> </ul> <ul> <span>2</span> <li>3</li> </ul>

$(“li:only-child”).css(“color”,”red”);

10.  jquery之:only-of-type

<ul> <li>1</li> </ul> <ul> <span>2</span> <li>3</li> </ul> <ul> <span>4</span> <li>5</li> <li>6</li> </ul>

如：$(“li:only-of-type”).css(“color”,”red”);

七、        表单选择器

1.    jquery之:input

会匹配到<input><textarea><button><select>标签。

猜测可能是这些标签可以用value取值，button可以设置value。

2.    jquery之:text

匹配的是单行文本框。貌似只有type类型为text的input标签。

3.    jquery之:password

匹配的是密码框。貌似只有type类型为password的input标签。

4.    jquery之:radio

匹配的是单选框。貌似只有type类型为radio的input标签。

5.    jquery之:checkbox

匹配的是复选框。貌似只有type类型为checkbox的input标签。

6.    jquery之:submit

匹配的是提交按钮。包括button标签和type为submit的input标签。

7.    jquery之:image

匹配type为image的input标签和<img>标签。

8.    jquery之:reset

匹配type为reset的input标签。

9.    jquery之:button

匹配的是提交按钮。包括button标签和type为button的input标签。

10.  jquery之:file

匹配type为file的input标签。

11.  jquery之:enabled

针对可用的input、textarea、button、select标签。

12.  jquery之:disabled

针对不可用的input、textarea、button、select标签。

13.  jquery之:checked

匹配被选中的复选框。

14.  jquery之:selected

如：$(“:selected”)返回被选中的option的jquery对象。

最后

以上就是能干黑猫为你收集整理的jquery之选择器和筛选器jquery之选择器的全部内容，希望文章能够帮你解决jquery之选择器和筛选器jquery之选择器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。