jQuery中属性选择器的使用

软件小生活

发布于 2021-10-08 16:35:53

2.4K0

发布于 2021-10-08 16:35:53

文章被收录于专栏：软件小生活

代码片段如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器的使用</title>
    <style>
</style>
</head>
<body>
<button>获取具有href属性的 DOM 对象</button><br>
<button>获取属性值为www.baidu.com对象</button><br>
<button>获取属性值不为www.baidu.com对象</button><br>
<button>获取属性值以www开头的对象</button><br>
<button>获取属性值以cn结尾的对象</button><br>
<button>获取属性值包涵it的对象</button><br>
<button>获取属性值包涵www的对象并且title包含"是"的对象</button><br><br><br>

<div class="divItem">
    <a href="www.baidu.com" title="谁啊？">www.baidu.com百度</a><br/>
    <a href="www.888it.com">www.888it.com做技术888</a><br/>
    <a href="www.it.com" title="我是title的内容">www.it.com做技术</a><br/>
    <a href="sina.com.cn">sina.com.cn新浪</a><br/>
    <a>我没有href</a>
</div>



</body>
<script src="../js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function () {
    $("button").eq(0).click(function () {
        $("a[href]").css({
            color:"red"
        })
    })

    $("button").eq(1).click(function () {
        $("a[href='www.baidu.com']").css({
            backgroundColor:"red",
        })
    })


    $("button").eq(2).click(function () {
        $("a[href!='www.baidu.com']").css({
            backgroundColor:"red",
        })

    })

    $("button").eq(3).click(function () {
        $("a[href^='www']").css({
            backgroundColor:"red",
        })

    })

    $("button").eq(4).click(function () {
        $("a[href$='cn']").css({
            backgroundColor:"red",
        })

    })
    $("button").eq(5).click(function () {
        $("a[href*='it']").css({
            backgroundColor:"red",
        })

    })

    $("button").eq(6).click(function () {
        $('a[title*="是"][href^="www"]').css({
            backgroundColor:"red",
        })

    })

    // $('button').eq(6).click(function () {
    //     $('a[href^="www"][title*="是"]').css({
    //         'color':'red'
    //     });
    // });


})
</script>
</html>

效果展示如下：图的顺序为以上代码的按钮的顺序结果。