一：基礎選擇器：
//根據指定的id匹配對應的元素
$('#btn1').click(function () );
//如果控制項id值中含有特殊符號，在選擇器中可以使用\\來解析
$('#btn\\1').click(function () );
//根據標籤名稱匹配指定的標籤
$('input').click(function () );
//根據指定的類名來匹配元素
$('.cls1').css('border', '1px solid blue'); //類選擇器類名在控制項中的時候不帶點在選擇器中的時候帶點.
//匹配所有的元素
$('*').css('border', '1px solid blue');//匹配頁面上所有的元素
//將多個選擇器的結果組合起來返回
$('div.cls1,span,#btn,input').css('border', '1px solid blue');//組合選擇器將多個選擇器的到的結果合併到乙個結果中
二：層級選擇器：
//在匹配給定的根元素下所有元素
$('form input').css('border', '1px solid blue');
//匹配指定根元素下的所有子元素
$('form > input').css('border', '1px solid blue');
//匹配緊跟在lable後邊的input標籤
$('lable + input').css('border', '1px solid blue');
//匹配所有lable後邊的所有標籤元素
$('lable ~ input').css('border', '1px solid blue');
三：基本選擇器：
//獲取指定標籤下第乙個元素
$('li:first').css('border', '1px solid blue');
$('li').first().css('border', '1px solid blue');
//獲取指定標籤下的最後乙個元素
$('li:last').css('border', '1px solid blue');
$('li').last().css('border', '1px solid blue');
//去除所有指定選擇器所匹配的元素
$('input:not(:checked)').css('border', '1px solid blue');
$('input:not(#btn1)').css('border', '1px solid blue');
//匹配所有索引值為偶數的元素
//1,3,5列對應的索引值為0,2,4
$('li:even').css('border', '1px solid blue');
//匹配所有索引值為奇數的元素
$('li:odd').css('border', '1px solid blue');
//匹配乙個指定索引值的元素（索引為1，表示第二個人元素） $('li:eq(1)').css('border', '1px solid blue');
//匹配所有大於給定索引值的元素
//索引值為2，表示第三行以後的所有元素
$('li:gt(2)').css('border', '1px solid blue');
//匹配所有小於給定索引值的元素
//索引值為2，表示第三行以前的元素
$('li:lt(2)').css('border', '1px solid blue');
//匹配h1到h6之間的所有標題元素
$(':header').css('border', '1px solid blue');
//匹配所有正在執行動畫效果的元素
$('#run').click(function () ,1000);)
});四：內容選擇器：
//匹配所有包含指定文字的元素
$("div:contains('yyj')").css('border', '1px solid blue');
//匹配所有不包含子元素，不包含文字的空元素
$('div:empty').css('border', '1px solid blue');
//選擇含有選擇器選定的元素的元素
$("div.has('yh')").css('border', '1px solid blue');
//匹配含有子元素或者含有文字的元素
$('div:parent').css('border', '1px solid blue');
五：可見性選擇器：
//選擇所有空間type屬性為hidden的元素
$('tr:hidden').css('border', '1px solid blue');
//匹配所有可見元素
$('tr:visible').css('border', '1px solid blue');
//匹配含所有指定屬性的元素
$('div[id]').css('border', '1px solid blue');
/匹配某一屬性是某一特定值的元素
$('input[name="myname"]').attr('checked',true);
//匹配所有不包含指定屬性或者屬性不等於指定值得元素
$('input[name!="myname"]').attr('checked',true);
//匹配給定的屬性是以某些字元開始的元素
$('input[name^="my"]').attr('checked',true);
//匹配給定的屬性是以某些字元結束的元素
$('input[name$="name"]').attr('checked',true);
//匹配指定的屬性值包含某字串的元素
$('input[name*="my"]').attr('checked',true);
//復合選擇器，需要同時滿足多個條件的元素
$('input[id][name$="name"]').attr('checked',true);
6：子元素選擇器：
//在每乙個ul中檢視第二個li
$('ul li:nth-child(2)').css('border', '1px solid blue');
//在每乙個ul中檢視第乙個li
$('ul li:first-child').css('border', '1px solid blue');
//在每乙個ul中檢視最後乙個li
$('ul li:last-child').css('border', '1px solid blue');
//在ul中查詢含有唯一li的元素
$('ul li:only-child').css('border', '1px solid blue');
7：表單選擇器：
//檢視所有含有input標籤的元素
$(':input').css('border', '1px solid blue');
//檢視所有單行文字框
$(':text').css('border', '1px solid blue');
//檢視所有密碼框
$(':password').css('border', '1px solid blue');
//檢視所有的單選按鈕
$(':radio').css('border', '1px solid blue');
//檢視所有的核取方塊
$(':checkbox').css('border', '1px solid blue');
//檢視所有的提交按鈕
$(':submit').css('border', '1px solid blue');
//檢視所有的影象域
$(':image').css('border', '1px solid blue');
//檢視所有的重置按鈕
$(':reset').css('border', '1px solid blue');
//檢視所有的按鈕
$(':button').css('border', '1px solid blue');
//檢視所有的檔案域
$(':file').css('border', '1px solid blue');
//檢視所有的隱藏域tr
$('tr:hidden').css('border', '1px solid blue');
8:表單物件選擇器：
//檢視所有可以利用的input標籤
$('input:enable').css('border', '1px solid blue');
//檢視所有不可用的input標籤元素
$('input:disabled').css('border', '1px solid blue');
//檢視所有選中的核取方塊
$('input:checked').css('border', '1px solid blue');
//檢視所有選中元素的屬性
$('select option:selected').css('border', '1px solid blue');
jQuery選擇器小結
學習jquery首當其衝的就是要學習jquery的選擇器，同時還要區分jquery物件與dom物件的區別 下面小猿就來簡單小結一下jquery選擇器 1.基本選擇器 one css background bbffaa mini css background bbffaa div css backgr...
JQuery選擇器小結
雖然近幾年隨著reactjs vuejs等框架的流行，jquery使用的頻率不是很高了。但是如果維護一些舊專案還是存在大量使用jquery的地方。這裡總結一下jquery選擇器的各種寫法，以備不時之需。選擇器描述 返回示例 idid選擇器 單個元素 canclebtn 選取id為canclebtn的...
Jquery選擇器小結
1 id id選擇器 2 div 元素選擇器 3 classname 類選擇器 4 classname,classname1,id1 組合選擇器 id classname 子元素選擇器 id classname 後代元素選擇器 id classname 緊鄰下乙個元素選擇器 id classname...