前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery中属性选择器的使用

jQuery中属性选择器的使用

作者头像
软件小生活
发布2021-10-08 16:35:53
2.4K0
发布2021-10-08 16:35:53
举报
文章被收录于专栏:软件小生活软件小生活

代码片段如下所示:

代码语言:javascript
复制
<!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>

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-09-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 软件小生活 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档