jQuery常用的属性选择器

最新推荐文章于 2024-04-11 18:05:03 发布

飞翔的荷兰人103

最新推荐文章于 2024-04-11 18:05:03 发布

阅读量198

点赞数

分类专栏： jQuery 文章标签： jquery js 前端

本文链接：https://blog.csdn.net/jhaglkl/article/details/105847322

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

列举一些常用的属性选择器，一切都在代码中，就不列了！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
   
</head>
<body>
    <form>
        <input type="text">
        <input type="password">
        <input type="checkbox" name="hobby"><label>游泳</label>
        <input type="checkbox" name="hobby"><label>篮球</label>
    </form>
    <div abc="3" hobby="abcde" toggle='book-1' class="div1 div2">1</div>
    <div  hobby="abc" toggle='book-2' class="div2 div3 div1">2</div>
    <div abc="4" hobby="ade" toggle='book' class="div2 div1 div3">3</div>
    <div abc="4" hobby="ade" toggle='book3' class="div3 div4">4</div>
    <div abc="4" hobby="ade" toggle='book3' class="div32">5</div>
    <script>
        $("input[type=text]").css("color","red");

        选择有type属性的元素
        $("[type]")
        $("[abc]").css("color","red");

        选择有type和name属性的元素
        $("[type][name]").next("label").css("color","red");

        选择某个属性是某个值的元素
        $("[abc=3]").css("color","red");

        选择属性是hobby并且值是以a字母开始的元素
        $("[hobby^=a]").css("color","red");

        选择属性是hobby并且值是以e字母结束的元素
        $("[hobby$=e]").css("color","red");

        选择属性是hobby但是值不等于ade的所有元素，如果属性没有也会被选中
        $("div[hobby!=ade]").css("color","red");

        选择属性是toggle，并且这个属性的值是book起头，后面紧跟-的值
        $("[toggle|=book]").css("color","red");


        原生js中变量和函数名都必须使用驼峰式命名,因为js是区分大小写
        html和css是不区分大小写,所以在html和css中,自定义的名称无法使用驼峰式命名,使用-连接两个单词
        php中变量名区分大小写，所以使用驼峰式命名，函数名不区分大小写，单词直接使用_连接

        选择属性是class，属性值中包含div3或者等于div3.包含div3在这里是指div3是一个独立的单词，前后有空格隔开
        $("[class~=div3]").css("color","red");

        选择属性是class，属性值的字符串中含有div3字符的，可以不是一个独立的单词
        $("[class*=div3]").css("color","red");



    </script>
</body>
</html>

如果有没找到的选择器可以看一下下面的！
jQuery常用选择器