jQuery属性选择器优先级

最新推荐文章于 2024-03-21 06:12:33 发布

原创最新推荐文章于 2024-03-21 06:12:33 发布 · 置顶 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #jQuery选择器

web前端专栏收录该内容

1 篇文章

订阅专栏

本文通过实例演示了jQuery中属性选择器的使用方法及其优先级规则，并探讨了在不同情况下选择器如何影响元素样式。

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $(function () {//属性选择器，含有属性，含属性且=等于，含属性!=不等于,含属性^什么开头，含属性$什么结尾，含属性*包含值字符
            $("input[type!= 'text']").addClass("blue");//!= 比[][] 更有优先级  下层代码覆盖不了
            $("input[type$='n'][value='按钮']").addClass("green");//[][]比 =更有优先级  下层代码覆盖不了
            $("input[type='button']").addClass("red");//= 比^ 更加有优先级  下层代码覆盖不了
            $("input[type^='b']").addClass("yellow");//^= 比 *= 更加有优先级  下层代码覆盖不了
            $("input[type*='o']").addClass("blue");//*= 比 $= 更加有优先级 下层代码覆盖不了 
            $("input[type$='n']").addClass("red");// 但最后发现 $=选择器.addClass("XXX")里的某些参数(我写的是类名)
            // 符合$= 比 =，^=,*= 优先级更高
            // 不但$= 出现反优先的情况，再用 ^=,*=,控制变量法 测试优先级：也发现addClass()填写的类名（在css文件中存在）会有反优先的情况
            //结论：以上只是测试部分记录 最后经过多次试验发现：addClass()  里面的参数改变会也会影响优先级！！！！
            //此结论自在jquery-1.8.3.min.js版本

        })
    </script>
</head>
<body>
    <input type="text" /><br />
    <input type="password" /><br />
    <input type="checkbox" /><br />
    <input type="button" value="按钮" /><br />
</body>
</html>