#jQuery选择器
请列举出在CSS中学习过的选择器的类型
jQuery选择器的优势有哪些？
jQuery选择器包括哪几大类？
通过位置选取元素的jQuery选择器有哪些？
课件
1jQuery选择器
2jQuery选择器分类
jQuery选择器功能强大，种类也很多，分类如下
通过CSS选择器选取元素
基本选择器
层次选择器
属性选择器
通过过滤选择器选择元素
基本过滤选择器
可见性过滤选择器
3jQuery选择器注意事项2-1
总结
代码
示例1：基本选择器.#
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;}
/**
* Created by zongjuan.wang on 2016/6/15.
*/
$(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","#083499");
/* 获取并设置所有<dt>、<dd>、class为intro的元素字体颜色 */
$(".intro,dt,dd").css("color","#ff0000");
$("*").css("font-weight","bold");//设置所有元素的字体加粗显示
})
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
</head>
<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>
示例2：层次选择器
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;}
#jdPrice p{ display:inline;}
/**
* Created by zongjuan.wang on 2016/6/15.
*/
$(document).ready(function(){
//$(".textRight p").css("color","red"); //后代选择器
//$(".textRight>p").css("color","red"); //子选择器
// $("h1+p").css("text-decoration","underline"); //相邻元素选择器
$("h1~p").css("text-decoration","underline"); //同辈元素选择器
})
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
</head>
<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>
示例3：属性选择器
body,ul,li,div,section,header{margin: 0;padding: 0;}
ul,li{list-style: none;}
body{
font-family:"微软雅黑";
font-size: 12px;
line-height: 28px;
}
#news{
border: 1px solid #cccccc;
width: 280px;
overflow: hidden;
margin: 5px auto 0 auto;
}
#news header{
border-bottom: 1px solid #cccccc;
font-size: 16px;
line-height: 40px;
padding-left:15px;
color: #666666;
font-weight: bold;
}
#news header a{text-decoration: none; color: #666666; float: right; padding-right: 10px;}
#news ul li{padding-left: 10px;}
#news ul li a{color: #686868; text-decoration: none; display: inline-block;}
#news ul li a:hover{color: #b02f4a;}
#news ul li a span{font-size: 13px; font-weight: bold; margin-right: 5px;}
/**
* Created by zongjuan.wang on 2016/6/16.
*/
$(document).ready(function(){
//$("#news a[class]").css("background","#c9cbcb"); //带有class的属性
//$("#news a[class='hot']").css("background","#c9cbcb"); //带有class的属性且值为hot
//$("#news a[class!='hot']").css("background","#c9cbcb"); //class的属性且值不是hot
//$("#news a[href^='www']").css("background","#c9cbcb"); //href值以www开头
//$("#news a[href$='html']").css("background","#c9cbcb"); //href值以html结尾
$("#news a[href*='k2']").css("background","#c9cbcb"); //href值包含k2
})
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东快报</title>
<link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
<header>京东快报<a href="#" class="more">更多 > </a></header>
<ul>
<li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a></li>
<li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a></li>
<li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元抢平板！品牌配件199-100</a></li>
<li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a></li>
<li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a></li>
</ul>
</section>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/news.js"></script>
</body>
</html>
示例4：基本过滤选择器
*{padding:0;margin:0;}
html,body{font-family:"微软雅黑";}
.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}
ul{list-style:none;}
li{padding-left:15px;line-height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}
h2{font-size:16px;padding-left:20px;line-height:40px;}
/**
* Created by zongjuan.wang on 2016/6/17.
*/
$(document).ready(function(){
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
//li 最后一个 没有边框
$(".contain li:last").css("border","none");
//改变第一个li的字体大小和颜色
// $(".contain li:first").css({"font-size":"16px","color":"#e90202"});
//设置偶数行背景颜色
// $(".contain li:even").css("background","#f0f0f0");
//设置奇数行背景颜色
//$(".contain li:odd").css("background","#cccccc");
//设置前两个li的字体颜色（从0开始,小于2）
$(".contain li:lt(2)").css({"color":"#708b02"});
//设置后两个li的字体颜色（从0开始，大于3）
$(".contain li:gt(3)").css({"color":"#b66302"});
//改变第3个li的背景颜色（从0开始
//$(".contain li:eq(2)").css({"background":"#02acaa"});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
</head>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul>
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/games.js"></script>
</body>
</html>
示例5：可见性过滤选择器show/hide
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
<style type="text/css">
#txt_show {display:none; color:#00C;}
#txt_hide {display:block; color:#F30;}
</style>
</head>
<body>
<p id="txt_hide">点击按钮，我会被隐藏哦~</p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p>
<input name="show" type="button" value="显示隐藏的P元素" id="show"/>
<input name="hide" type="button" value="隐藏显示的P元素" id="hide" />
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("p:hidden").show();
})
$("#hide").click(function(){
$("p:visible").hide();
})
})
</script>
</body>
</html>
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
