第一 羣組選擇器：
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 是唯一性的，準確度不變，性能提升