jQuery四大選擇器，以及例子來充分理解
阿新 • • 發佈：2018-12-26
1. jQuery選擇器的優勢：
(1) 程式碼更簡單
(2) 支援CSS1到CSS3選擇器
(3) 完善的處理機制
2. jQuery選擇器的分類
（1） 基本選擇器
基本選擇器是jQuery中使用最多的選擇器，它又元素Id、class、元素名、多個元素符組成。
（2） 層次選擇器
層次選擇器通過DOM元素間的層次關係來獲取元素，主要的層次關係包括父子、後代、相鄰、兄弟關係。
（3） 過濾選擇器
① 簡單過濾選擇器
過濾選擇器是根據某類過濾規則進行元素的匹配，書寫時都以(:)開頭；簡單過濾選擇器是過濾選擇器中使用最廣泛的一種。
② 內容過濾選擇器
內容過濾選擇器是根據元素中的文字內容或所包含的的子元素特徵獲取元素，其文字內容可以模糊或絕對匹配進行元素定位。
③ 可見性過濾選擇器
可見性過濾選擇器根據元素是否可見的特徵來獲取元素
④ 屬性過濾選擇器
⑤ 子元素過濾選擇器
⑥ 表單物件屬性過濾選擇器
此選擇器主要是對所選擇的表單元素進行過濾，例如選擇被選中的下拉框，多選框等元素。
（4） 表單選擇器
eg：HTML部分程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('#btn1').click(function(){ $('#form1 input:enabled').val('這裡可用的文字框變化了..'); return false; }) $('#btn2').click(function(){ $('#form1 input:disabled').val('這裡不可用的文字框變化了..'); return false; }) function mm(){ var length=$(' input:checkbox[checked]').length; $('div').eq(0).html('有'+length+'個被選中了'); } mm(); $(' input:checkbox').click(mm); $('select').mousedown(function(){ $('div').eq(0).html('被選中的有:'); }) }) </script> </head> <body> <h3> 表單物件屬性過濾選擇器.</h3> <form id="form1" action="#"> <button type="reset">重置所有表單元素</button> <br /><br /> <button id="btn1">對錶單內 可用input 賦值操作.</button> <button id="btn2">對錶單內 不可用input 賦值操作.</button> <br /><br /> <!-- 測試的元素 --> 可用元素：<input name="add" value="可用文字框" /> <br/> 不可用元素： <input name="email" disabled="disabled" value="不可用文字框" /><br/> 可用元素： <input name="che" value="可用文字框" /><br/> 不可用元素： <input name="name" disabled="disabled" value="不可用文字框" /><br/> <br/> 多選框： <br/> <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 <input type="checkbox" name="newsletter" value="test2" />test2 <input type="checkbox" name="newsletter" value="test3" />test3 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 <input type="checkbox" name="newsletter" value="test5" />test5 <div></div> <br/><br/> 下拉列表1： <br/> <select name="test" multiple="multiple" style="height:100px"> <option>浙江</option> <option selected="selected">湖南</option> <option>北京</option> <option selected="selected">天津</option> <option>廣州</option> <option>湖北</option> </select> <br/><br/> 下拉列表2： <br/> <select name="test2"> <option>浙江</option> <option>湖南</option> <option selected="selected">北京</option> <option>天津</option> <option>廣州</option> <option>湖北</option> </select> <br/><br/> <div></div> </form> </body> </html>
style.css部分程式碼如下：
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}結果截圖如下：
