一.選擇器
1.三個基本選擇器，$("#ID") 、$(".className") 、$("tagName")
2.其他選擇器
//html頁面
<div class="box">box1</div>
<h1>h1</h1>
<div class="box">box2</div>
<div class="box">box3</div>
<ul>
<li>li11111</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li></li>
<li><span>box2</span></li>
</ul>
<div><li></li></div>
<h1>h1</h1>
<h2>h2</h2>
<input type="hidden" name="" class="box">
<input type="text" name="" class="box">
<div class="box">box</div>
<div class="box" style="display: none;">box</div>
<div title="one">1</div>
<div title="two" class="a">2</div>
<div title="three">3</div>
<div class="box">
<input type="text" name="">
<input type="password" name="">
<input type="radio" name="">
<input type="checkbox" name="">
<input type="submit" name="">
<input type="button" name="">
<input type="file" name="">
<input type="hidden" name="">
<textarea></textarea>
<select >
<option>1</option>
<option>2</option>
</select>
<button>btn</button>
</div>
<script type="text/javascript">
//層級選擇器
$("ul li").css("font-size","50px"); //選取ul下的li元素
$("ul li").html("替換内容").css("font-size","50px");
$(".box+h1").css("color","red"); //類名為.box緊挨着的h1元素
$("h1~.box").css("background","yellow"); //選取h1後面所有類名為.box的所有兄弟元素
//過濾選擇器
$("ul li:first").css("background","red"); //選取ul下的第一個li
$("ul li:first").css("background","red"); //選取ul下的第一個li
$("ul li:eq(1)").css("background","green"); //選取ul下索引為1的li，即第二個
$("ul li").eq(1).css("background","yellow"); //上面這行也可以這樣寫，選取ul下索引為1的li,即第二個
$("ul li:odd").css("font-size","100px"); //選取ul下的偶數項li
$("ul li:not(.nob)").css("border","3px solid #000"); //選取ul下的li，除開類名為.nob的其他所有項
$("ul li:lt(2)").css("height","50px"); //選取ul下的索引編号小于2的li，即前2個
$(":header").css("color","pink"); //選中标題标簽，所有h标簽都被選中
//内容過濾
$("li:contains(li1)").css("color","red"); //選取li元素，同時文本内容包含li1的
$("li:empty").css({height:100,background:"red"}); //選取li元素，且文本内容為空的
$("li:has(span)").css("border","1px solid green"); //選取嵌套span标簽的li元素
$("li:parent").css("background","yellow"); //選取父元素下面含有li标簽的父元素
//可見性過濾
$(".box:hidden").css("width","200px"); //注意$符号括号裡面沒有空格，表示要同時滿足2個條件
$(".box:visible").css("background-color","pink"); //選中類名為box的标簽，同時要滿足是可見的
//屬性過濾
$("div[title]").css("background-color","pink"); //從所有div标簽選取帶屬性title的标簽
$("div[title=one]").css("color","yellow"); //從所有div标簽選取帶屬性title且值為one的标簽
$("div[title][class=a]").css("color","red"); //從所有div标簽選取帶屬性title和帶class=a屬性值的标簽
//子元素過濾
$("li:nth-child(2)").css("background-color","red"); //選取每個父元素下第2個li元素
$("li:nth-child(odd)").css("font-size","50px"); //選取每個父元素下奇數項li元素
$("li:first-child").css("color","blue"); //選取每個父元素下第一個li元素
$("li:only-child").css("font-style","italic"); //選取每個父元素下隻有一個li元素的li元素
//表單類型
$(".box :input").css("background-color","pink"); //選取所有input、textarea、select、button元素
$(".box :text").css("font-size","10px"); //選選取所有的單行文本框
$(".box :password").css("font-size","20px"); //選取所有的密碼框
$(".box :radio").css("font-size","30px"); //選取所有的單選框
$(".box :checkbox").css("font-size","40px"); //選取所有的多選框
$(".box :submit").css("font-size","50px"); //選取所有送出按鈕
$(".box :button").css("font-size","60px"); //選取所有的按鈕
$(".box :file").css("font-size","70px"); //選取所有的上傳域
$(".box :hidden").css("font-size","80px"); //選取所有不可見元素
</script>
