通过CSS选择器选取元素:
基本选择器
层次选择器
属性选择器
通过过滤选择器选择元素:
基本过滤选择器
可见性过滤选择器
标签选择器: 基本过滤选择器,可见性过滤选择器ement 。根据给定的标签名匹配元素 。$(“h2” )选取所有h2元素
类选择器 :.class, 根据给定的class匹配元素, $(" .title")选取所有class为title的元素
ID选择器 :#id 。根据给定的id匹配元素。 $(" #title")选取id为title的元素
并集选择器 selector1,selector2,…,selectorN 。将每一个选择器匹配的元素合并后一起返回。
(
"
d
i
v
,
p
,
.
t
i
t
l
e
"
)
选
取
所
有
d
i
v
、
p
和
拥
有
c
l
a
s
s
为
t
i
t
l
e
的
元
素
全
局
选
择
器
∗
。
匹
配
所
有
元
素
。
("div,p,.title" )选取所有div、p和拥有class为title的元素 全局选择器 *。 匹配所有元素 。
("div,p,.title")选取所有div、p和拥有class为title的元素全局选择器∗。匹配所有元素。("*" )选取所有元素
1:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
</head>
<style>
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;}
</style>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减,抽奖赢魅蓝note3、JDRead阅读器!</p>
<p id="author">[美] 加·泽文(Gabrielle Zevin) 著;孙仲旭,李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价: <span>¥24.10</span> [6.9折] <p>[定价:<span>¥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息:<span>手机专享价</span> <span>¥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00,满200.00减60.00,满300.00减100.00</dd>
</dl>
<p id="ticket">领 券:<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/book.js"></script>
</body>
</html>