JQuery中的属性过滤选择器

最新推荐文章于 2022-11-09 20:11:17 发布

一只极度渴望成长的Giser

最新推荐文章于 2022-11-09 20:11:17 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript、JQuery练习文章标签： JQuery中的属性过滤选择器

本文链接：https://blog.youkuaiyun.com/qq_32077521/article/details/99815503

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文通过一个实战案例，详细解析了jQuery中属性选择器的使用方法，包括如何选择具有特定属性、属性值等于、不等于、以某个字符开始、结束或包含的元素，以及如何同时选择具有多个属性的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" id="txt1" name="txt1" />
    <input type="text" id="txt2" name="txat1" />
    <input type="text" name="" />
    <input type="text" id="txt4" name="atxt2" />
    <input type="text" id="txt5" name="txt3a" />
    <input type="text" name="txt3a" />
    <script type="text/javascript">
        $(function () {
            //得到所有含有name属性的input标签
            $("input[name]").css({ "border": "1px solid red" });
            //得到所有含有name属性，并且name属性等于txt1的标签
            $("input[name=txt1]").css({ "border": "1px solid blue" });
            //得到包含name属性，但name属性不等于txt1的所有元素
            $("input[name!=txt1]").css({ "border": "1px solid red" });
            //得到包含name属性，并且name属性以a开头的元素
            $("input[name^=a]").css({ "border": "1px solid red" });
            //得到包含name属性，且name属性以a结尾的
            $("input[name$=a]").css({ "border": "1px solid red" });
            //得到包含name属性，并且name属性中包含a的
            $("input[name*=a]").css({ "border": "1px solid red" });
            //得到同时具有多个属性的元素
            $("input[name][id][type]").css({ "border": "1px solid red" });
            //得到name属性为""的
            $("input[name=]").css({ "border": "1px solid red" });
        });
    </script>
</body>
</html>