第一 群组选择器：
css:
p{
color:red;
}
div{
color:red;
}
strong{
color:red;
}
jquery:
$(function(){
$("p,strong,div").css("color","black");
});
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="box">div</div>
<div>div</div>
<div>div</div>
<p class="pox">p</p>
<p>p</p>
<p>p</p>
<strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>
</body>
</html>
css:
div,strong,p{
color:blue;
}
jquery:
$(function(){
$("#box,.pox,strong").css("color","blue");
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础核心</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="box">div</div>
<div>div</div>
<div>div</div>
<p class="pox">p</p>
<p>p</p>
<p>p</p>
<strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>
</body>
</html>
后代选择器，子，孙子都行
ul li a{
color:green;
}
$(function(){
$('ul li a').css('color','red');
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础核心</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<ul>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
</body>
</html>
三 通配符
在全局使用*号会极大限度消耗资源。
$('ul li *').css("color","red");
等价于这个群组 // $('ul li strong,ul li em,ul li a').css("color","red");
调试方法：
// alert($('*').size());
// alert($('*')[0].nodeName); HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础核心</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><em>首页</em></li>
<li><strong>首页</strong></li>
<ul>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<p>shouye<p>
<p>shouye<p>
<span>center<span>
<span>center<span>
</body>
</html>
双class处理，例子
.box.pox{
color:red;
}
$(function(){
$('.box.pox').css("color","blue");
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础核心</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<span class="box pox">hh </span>
</body>
</html>
警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选
越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。比如：
$('div#box ul li a#link'); //让jQuery 内部处理了不必要的字符串
$('#link'); //ID 是唯一性的，准确度不变，性能提升