您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

jQuery表单属性伪类选择器

时间:03-07来源:作者:点击数:

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

表 2:“表单属性”伪类选择器
选择器 说明
:checked 选取所有被选中的表单元素,一般是单选框或复选框
:selected 选取被选中的表单元素的选项,一般是下拉列表
:enabled 选取所有可用的表单元素
:disabled 选取所有不可用的表单元素
:read- only 选取所有只读的表单元素
:focus 选取所有获得焦点的表单元素

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

举例:

<!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>
    </p>
</body>
</html>

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

:checked选择器的效果
图 2::checked 选择器的效果

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

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

其他伪类选择器

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

表 3:其他伪类选择器
选择器 说明
:not(selector)
选取除了某个选择器之外的所有元素
:animated 选取所有正在执行动画的元素
:root 选取页面根元素,即 html 元素
:header 选取 h1~h6 的标题元素
:target 选取锚点元素
:lang(language) 选取特走语言的元素

在实际开发中,一般情况下只会用到 :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>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li id="select">jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

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

:not(selector) 选择器的效果
图 4::not(selector) 选择器的效果

$("li:not(#select)") 表示选取除了 id="select" 之外的所有 li 元素。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门