四、基本选择器

一、本课目标

• 了解jQuery选择器及分类
• 掌握jQuery的基本选择器

二、jQuery选择器

2.1简介

jQuery选择器类似于CSS选择器，用来选取网页中的元素。
示例代码：

$("h3").css("background", "#09F");

• 获取并设置网页中所有

  元素（跟h3标签、h3节点是一个意思）的背景

• “h3”为选择器语法，必须放在$()中
• .css()是为jQuery对象设置样式的方法

2.2jQuery选择器分类

jQuery选择器功能强大，种类也很多，分类如下：
1、通过CSS选择器选取元素

• 基本选择器
• 层次选择器
• 属性选择器

2、通过过滤选择器选择元素

• 基本过滤选择器
• 可见性过滤选择器

三、基本选择器

image.png

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。

3.1标签选择器

标签选择器根据给定的标签名匹配元素。

3.2类选择器

类选择器根据给定的class匹配元素

3.3ID选择器

ID选择器根据给定的id匹配元素

3.4并集选择器

并集选择器用来合并元素集合

3.5全局选择器

全局选择器可以获取所有元素
示例代码：
html文件：

    
    
    



    

    

        
岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]
        
自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！
        
[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译
        

            
京东价： ￥24.10 [6.9折] 
[定价：￥35.00]
 (降价通知)
            
促销信息：手机专享价 ￥9.90
            

                
以下促销可在购物车任选其一
                
加价购 满99.00元另加6.18元即可在购物车换购热销商品
                
满减 满100.00减20.00，满200.00减60.00，满300.00减100.00
            
            
领 券：105-6  200-16
        
    

css文件：

body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;}
body{
    font-family: "微软雅黑";
    font-size: 12px;
    line-height: 28px;
}
#book{
    margin: 5px auto 0 auto;
    width: 650px;
    overflow: hidden;
}
.imgLeft{
    float:left;
    width: 210px;
}
.imgLeft img{width: 200px;}
.textRight{
    float: right;
    width: 440px;
}
#book h1{font-size: 16px; line-height: 50px;}
.textRight dl{padding-left: 5em;}
.textRight dl dd{display: none;}
#jdPrice p{ display:inline;}

js文件：

$(document).ready(function(){
    $("dt").click(function(){  // 获取dt标签并为其添加click事件
        $("dd").css("display", "block");   // 获取dd标签并设置为显示
    })
    $("h1").css("color", "blue");// 获取并设置h1的的字体颜色为蓝色
    // 设置class为price元素的背景颜色与内边距
    $(".price").css({"background":"#efefef", "padding":"5px"});
    // 设置ID为author的元素的文字颜色
    $("#author").css("color", "yellow");
    // 并集选择器
    $("dt, dd, .intro").css("color", "red");
    // 全局选择器
    $("*").css("font-weight", "bold");
})

四、总计

image.png