jQuery - 属性选择器

最新推荐文章于 2025-08-06 16:42:26 发布

weixin_34221773

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xtdxs/p/6612608.html

本文介绍了一个使用jQuery实现的属性选择器示例，通过点击事件改变HTML列表中特定元素的背景颜色，展示了如何针对不同属性进行选择。

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

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">

    <title>属性选择器</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <style type="text/css">
        #box {
            background-color: #FFF;
            border: 2px solid #000;
            padding: 5px;
        }

        h2 {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("h2").click(function() {
                //改变含有title属性的<h2>元素的背景颜色
//                $("h2[title]").css("background","red");
                //改变class属性的值为odds的元素的背景颜色
//                $("[class='odds']").css("background","yellow");
                //改变id属性的值不为box的元素的背景颜色
//                $("[id!='box']").css("background","red");
                //改变title属性的值中以h开头的元素的背景颜色
//                $("[title^='h']").css("background","yellowgreen");
                //改变title属性的值中以jp结尾的元素的背景颜色
//                $("[title$='jp']").css("background","blue");
                //改变title属性的值中含有s的元素的背景颜色
//                $("[title*='s']").css("background","green");
                //改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色
                $("li[class][title*='y']").css("background","pink");
            });
        });
    </script>
</head>
<body>
<div id="box">
    <h2 class="odds" title="cartoonlist">动画列表</h2>
    <ul>
        <li class="odds" title="kn_jp">名侦探柯南</li>
        <li class="evens" title="hy_jp">火影忍者</li>
        <li class="odds" title="ss_jp">死神</li>
        <li class="evens" title="yj_jp">妖精的尾巴</li>
        <li class="odds" title="yh_jp">银魂</li>
        <li class="evens" title="hm_da">黑猫警长</li>
        <li class="odds" title="xl_ds">仙履奇缘</li>
    </ul>
</div>
</body>
</html>