一、常用選擇器
1、標籤選擇器
通過標籤名稱來獲取所有的標籤屬性
<body>
<h1>驚沙獵獵風成陣，白雁一聲霜有信</h1>
<script type="text/javascript">
$("h1").css("background","red");
</script>
</body>
2、類選擇器
通過標籤內的class值來獲取含有該值的class屬性標籤
<body>
<h2 class="test1">山光物態弄春暉，莫爲輕陰便擬歸。</h2>
<script type="text/javascript">
$(".test1").css("background","aqua");
</script>
</body>
3、id選擇器
通過標籤內的id值來獲取含有該值的id屬性標籤
<body>
<h3 id="test2">明月多情應笑我，笑我如今。</h3>
<script type="text/javascript">
$("#test2").css("background","yellow");
</script>
</body>
4、並集、交集、全局選擇器
並集選擇器：
通過標籤、id、class等基礎選擇器來獲取含有改屬性的標籤元素（注：中間用逗號隔開）；
交集選擇器：
格式（標籤+屬性選擇器），來獲取含有此屬性選擇器的標籤
全局選擇器：
通過“ * ”來獲取body標籤
<body>
<h1>驚沙獵獵風成陣，白雁一聲霜有信</h1>
<h2 class="test1">山光物態弄春暉，莫爲輕陰便擬歸。</h2>
<h3 id="test2">明月多情應笑我，笑我如今。</h3>
<p id="test3">春未來時，酒攜不到千巖路。</p>
<script type="text/javascript">
$("h1,h2,#test3").css("background","green");//並集選擇器
//$("h2.test1").css("background","darkorange");//交集選擇器
//$("*").css("background","orange");//全局選擇器，包含body內所有內容
</script>
</body>
二、屬性選擇器
h2[title]：標籤+屬性，獲取所有含有此屬性的指定的標籤元素
[title=test2]：title是屬性名，test2是屬性值，通過屬性和屬性值，來獲取所有含有此屬性值的標籤元素
<body>
<h1>Holle World！</h1>
<h2>Holle World！</h2>
<h2 title="test1">come on</h2>
<h2 title="test2">come on1</h2>
<script>
$(function(){
// $("h2[title]").css("background","aqua");//獲取所有含有title屬性的標籤
$("[title=test2]").css("background","crimson");//獲取所有title屬性值是“test2”的標籤
});
</script>
</body>
三、基礎篩選器
（:first ） ： 匹配所給元素的第一個元素
（:last） ： 匹配所給元素的最後一個元素
（:even） ： 匹配所有索引值爲偶數的元素，從 0 開始計數
（:odd） ： 匹配所有索引值爲奇數的元素，從 0 開始計數
（:eq()） ： 匹配一個給定索引值的元素，從 0 開始計數
（:gt()） ： 匹配所有大於給定索引值的元素，從 0 開始計數
（:lt()） ： 匹配所有小於給定索引值的元素，從 0 開始計數
<body>
<ul>
<li>標籤1</li>
<li>標籤2</li>
<li>標籤3</li>
<li>標籤4</li>
<li>標籤5</li>
</ul>
<script>
$(function(){
// $("li:first").css("background","aqua");//獲取指定標籤的第一個標籤
// $("li:last").css("background","blueviolet");//獲取指定標籤的最後一個標籤
// $("li:even").css("background","chartreuse");//匹配所有索引值爲偶數的指定元素，從 0 開始計數
// $("li:odd").css("background","coral");//匹配所有索引值爲奇數的指定元素，從 0 開始計數
$("li").css("list-style","none");
// $("li:eq(2)").css("font-size","20px");//匹配一個給定索引值的元素，從 0 開始計數
$("li:gt(1)").css("font-size","30px");//匹配所有大於給定索引值的元素，從 0 開始計數
$("li:lt(1)").css("font-size","20px");//匹配所有小於給定索引值的元素，從 0 開始計數
});
</script>
</body>
四、文本的顯示與隱藏
show()： 顯示隱藏的匹配元素。
hide()： 隱藏顯示的元素。
<body>
<p>大家好</p>
<p style="display: none;">我是古天樂</p>
<input type="button" name="show" id="show" value="點我顯示" />
<input type="button" name="hidden" id="hidden" value="點我隱藏" />
<script>
$(function(){
$("[name=show]").on("click",function(){
$("p:hidden").show();
});
$("[name=hidden]").on("click",function(){
$("p:visible").hide();
});
});
</script>
</body>