jQuery类css选择器代码详解

jQuery选择器分类有哪些？

1) 类css选择器
  1.1) 基本选择器
       ID选择器、标签选择器、类选择器
       并集选择器、交集选择器、全局选择器
  1.2) 层次选择器
       后代选择器：使用空格作为分隔符
       子选择器：使用>作为分隔符
       相邻元素选择器：使用+作为分隔符
       同辈元素选择器：使用~作为分隔符
  1.3) 属性选择器
       [attribute]：指定属性名的选择器
       [attribute=value]：指定属性名的值等于value的值的选择器
       [attribute!=value]：属性名的值不等于value
       [attribute^=value]：属性名的值以value开头
       [attribute$=value]：属性名的值以value结尾
       [attribute*=value]：属性名的值包含value
       [attribute1][attribute2][attributeN]：复合属性选择器，要求同时满足多个

jQuery基本选择器示例:


<style type="text/css">
#box {background-color:#FFF; border:2px solid #000; padding:5px;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
    $(function(){
        $("h2").click(function(){
            //$("#box").css("background-color","yellow");//ID选择器
            //$("h3").css("background-color","yellow");//标签选择器
            //$(".title").css("background-color","yellow");//类选择器
            //$("h2,dt,.title").css("background-color","yellow");//并集选择器  ||
            //$("h2.title").css("background-color","yellow");//交集选择器  &&
            $("*").css("background-color","yellow");//全局选择器
        });
    });
</script>

</head>
<body>
    <div id="box"> id为box的div
        <h2 class="title">class为title的h2</h2>
        <h3 class="title">class为title的h3</h3>
        <h3>热门排行</h3>
        <dl>
            <dt><img src="../img/case_1.gif" width="93" height="99" alt="斗地主" /></dt>
            <dd class="title">斗地主</dd>
            <dd>休闲游戏</dd>
            <dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
        </dl>
    </div>
</body>

jQuery层次选择器示例:

<style type="text/css">
* {margin:0; padding:0; line-height:30px;}
body {margin:10px;}
#menu {border:2px solid #03C; padding:10px;}
a {text-decoration:none; margin-right:5px;}
span {font-weight:bold; padding:3px;}
h2 {margin:10px 0;}
</style>

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
    $(function(){
        $("h2").click(function(){
            //$("#menu span").css("background-color","yellow");//后代选择器
            //$("#menu>span").css("background-color","yellow");//子选择器
            //$("h2+dl").css("background-color","yellow");//相邻元素选择器
            $("h2~dl").css("background-color","yellow");//同辈元素选择器
        });
    });
</script>

</head>
<body>
    <div id="menu">
        <h2>全部旅游产品分类</h2>
        <dl>
            <dt>北京周边旅游<span>特价</span></dt>
            <dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd>
        </dl>
        <dl>
            <dt>景点门票</dt>
            <dd><a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a></dd>
            <dd><a href="#">山水</a> <a href="#">双休</a></dd>
        </dl>
        <span>更多分类</span>
    </div>
</body>

jQuery属性选择器示例:

<style type="text/css">
#box {background-color:#FFF; border:2px solid #000; padding:5px;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
    $(function(){
        $("h2").click(function(){
            //$("h2[title]").css("background-color","yellow");//设置h2元素有title属性的背景色
            //$("[class=odds]").css("background-color","yellow");//设置class=odds的背景色
            //$("[id!=box]").css("background-color","yellow");//设置id!=odds的背景色
            //$("[title^=h]").css("background-color","yellow");//设置title属性值以h开头的背景色
            //$("[title$=p]").css("background-color","yellow");//设置title属性值以p结尾的背景色
            //$("[title*=s]").css("background-color","yellow");//设置title属性值包含s的背景色
            $("li[class][title*=y]").css("background-color","yellow");//设置包含class属性且title属性值包含y的li元素的背景色
        });
    });
</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>

jQuery类css选择器代码详解

猜你喜欢