jQuery类css选择器代码详解

深碍√TFBOYSˉ_ 2022-05-17 09:57 153阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery 操作css 选择器

.addClass() 　　为每个匹配的元素添加指定的样式类名　　.addClass(className) 　　　　className 为每个匹配元素所有增加的一

向右看齐/ 2023年06月11日 05:21/ 0 赞/ 7 阅读

相关 css选择器详解

文章目录基本选择器层次选择器伪类选择器 1. 动态伪类选择器： 2.目标伪类选择器

ゝ一世哀愁。/ 2023年01月03日 04:51/ 0 赞/ 111 阅读

相关 CSS 类选择器

CSS 类选择器任务描述相关知识任务描述本关任务是通过类选择器的方式，更改独立于文档元素的属性。 ![在这里插入图片描述][waterma

雨点打透心脏的1/2处/ 2022年11月13日 00:46/ 0 赞/ 206 阅读

相关 css选择器与jquery选择器

[1.css选择器][1.css] [2.jquery选择器][2.jquery] [1.css]: http://www.w3school.com.cn/cssref/

古城微笑少年丶/ 2022年09月24日 09:30/ 0 赞/ 224 阅读

相关 JQuery之CSS选择器

1.选择对象 1).基本 ·\id 根据给定的ID匹配一个元素。例如：$("\id") ·element 根据给定的元素名匹配所有元素。例如：$("div") ·.

╰半橙微兮°/ 2022年09月24日 05:23/ 0 赞/ 223 阅读

相关 CSS选择器详解

选择器是CSS的核心，从最初的元素、class/id选择器，演进到伪元素、伪类，以及CSS3中提供的更丰富的选择器，定位页面上的任意元素开始变得愈发的简单。 1、元素选择器

ゝ一纸荒年。/ 2022年09月22日 13:00/ 0 赞/ 160 阅读

相关 css选择器详解

原文地址：[http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html][http_www.cnblogs.c

客官°小女子只卖身不卖艺/ 2022年08月01日 01:29/ 0 赞/ 177 阅读

相关 JQuery选择器之CSS选择器

核心选择器 <table> <thead> <tr> <th>语法</th> <th>描述</th> </tr> </thead>

系统管理员/ 2022年06月03日 20:13/ 0 赞/ 347 阅读

相关 jQuery类css选择器代码详解

jQuery选择器分类有哪些？ 1) 类css选择器 1.1) 基本选择器 ID选择器、标签选择器、类选择器

深碍√TFBOYSˉ_/ 2022年05月17日 09:57/ 0 赞/ 154 阅读

相关 CSS选择器详解

(1)\\\\ (1)结构伪类选择器 1):first-child、:last-child、:nth-child(index)、:nth-last-child(index)

梦里梦外;/ 2022年02月04日 04:59/ 0 赞/ 278 阅读