jQuery表单属性伪类选择器

表单属性 伪类选择器，指的是根据表单元素的属性来选取的一种伪类选择器。在 jQuery 中，常见的 表单属性 伪类选择器如表 2 所示。

上表的这些 表单属性 伪类选择器，在实际开发中用得非常多，大家一定要重视。不过在这一节的学习中有个初步认识就可以了，至于在实际开发中怎么用，我们之后会慢慢接触。

举例：

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function() {

 var result = $( input:checked ).val();

 alert(result); //弹出被选中文本框的值

 /script 

 /head 

 body 

 p 喜欢的水果：

 label input type= checkbox value= 苹果 / 苹果 /label 

 label input type= checkbox value= 西瓜 checked/ 西瓜 /label 

 label input type= checkbox value= 蜜桃 / 蜜桃 /label 

 /body 

 /html 

程序执行效果如图 2 所示。

图 2：:checked 选择器的效果

$( input:checked )表示选取 被选中 的单选框或复选框，实际上只有单选框和复选框才有checked这一个属性。val() 方法用于获取表单元素的 value 属性值，这个我们之后中会详细介绍。

其他 表单属性 伪类选择器的用法和 :checked 的用法一样，这里就不赘述了，小伙伴们可以自行测试。

其他伪类选择器

除了之前介绍的伪类选择器，jQuery还为我们提供了其他用途的选择器，如表 3 所示。

在实际开发中，一般情况下只会用到 :not(selector)、:animated 这两个，其他几乎用不上或者可以被其他选择器替代，所以只需要了解即可。

这一节我们先来了解 :not(selector) 选择器。而对于 :animated 选择器，之后我们再去学习。

举例：:not(selector)

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function() {

 $( li:not(#select) ).css( color , red 

 /script 

 /head 

 body 

 li HTML /li 

 li CSS /li 

 li JavaScript /li 

 li id= select jQuery /li 

 li Vue.js /li 

 /ul 

 /body 

 /html 

程序执行效果如图 3 所示。

图 4：:not(selector) 选择器的效果 $( li:not(#select) ) 表示选取除了 id= select 之外的所有 li 元素。

23789.html

CSShtmljavaJavaScript