jQuery学习笔记（三）：选择器总结

$(‘#info‘);  　　　　　 // 选择id为info的元素，id为document中是唯一的，因此可以通过该选择器获取唯一的指定元素
$(‘.infoClass‘);  　　 // 选择class为infoClass的所有元素
$(‘div‘);  　　　　  // 选择标签名为div的所有的元素
$(‘*‘);   　　　　　　// 选择所有标签元素

$(‘.infoClass:first‘);    // 选择class为infoClass的所有元素集合，并筛选集合中的第一个元素
$(‘.infoClass:last‘);     // 选择class为infoClass的所有元素集合，并筛选集合中的最后一个元素
$(‘.infoClass:odd‘);      // 选择class为infoClass的所有元素集合，并筛选集合中索引为奇数的元素，如1,3,5
$(‘.infoClass:even‘);     // 选择class为infoClass的所有元素集合，并筛选集合中索引为偶数的元素，如0,2,4
$(‘.infoClass:eq(2)‘);    // 选择class为infoClass的所有元素集合，并筛选集合中索引为2的元素
$(‘.infoClass.lt(2)‘);    // 选择class为infoClass的所有元素集合，并筛选集合中索引小于2的元素集合
$(‘.infoClass.gt(2)‘);    // 选择class为infoClass的所有元素集合，并筛选集合中索引大于2的元素集合

$(‘div:contains("info")‘);     // 选择标签为div的所有元素集合，并筛选集合中文本内容包含info字段的元素
$(‘div:empty‘);                // 选择标签为div的所有元素集合，并筛选集合中所有空元素
$(‘div:parent‘);              // 选择标签为div的所有元素集合，并筛选集合中所有非空元素
$(‘div:has(p)‘);               // 选择标签为div的所有元素集合，并筛选集合中后代元素含有p标签的元素

$(‘div:visible‘);            // 选择标签为div的所有元素集合，并筛选集合中可见的元素
$(‘div:hidden‘);             // 选择标签为div的所有元素集合，并筛选集合中不可见的元素

$(‘input[placeholder]‘);               // 选择所有标签为input的元素集合，并筛选包含placeholder属性的元素
$(‘input[placeholder="info"]‘);        // 选择所有标签为input的元素集合，并筛选placeholder属性值为info的元素
$(‘input[placeholder^="info"]‘);       // 选择所有标签为input的元素集合，并筛选placeholder属性值以info开头的元素
$(‘input[placeholder$="tion"]‘);       // 选择所有标签为input的元素集合，并筛选placeholder属性值以tion结尾的元素
$(‘input[placeholder*="mat"]‘);        // 选择所有标签为input的元素集合，并筛选placeholder属性值中包含字段mat的元素
$(‘input[id][placeholder*="mat"]‘);    // 选择所有标签为input的元素集合，并筛选包含id属性并且placeholder属性值中包含字段mat的元素

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

$(‘ul li:first-child‘).css(‘background-color‘, ‘red‘);   // 选择每一个ul标签下的li元素集合中的第一个

$(‘ul li:first‘).css(‘background-color‘, ‘red‘);   // 选择所有ul标签下的li元素集合中的第一个

$(‘ul li:last-child‘);   // 选择每一个ul标签下的li元素集合中的最后一个

$(‘form input‘);           // 选择所有标签为form的元素中，后代元素标签为input的元素
$(‘form>input‘);           // 选择所有标签为form的元素中，子级元素标签为input的元素
$(‘label+input‘);          // 选择所有标签为label的同级元素中，标签为input的元素集合中的第一个
$(‘label~input‘);          // 选择所有标签为label的同级元素中，标签为input的元素集合

$(‘:input‘);                // 选择所有表单输入元素，包括input，textarea，select
$(‘:text‘);                 // 选择所有的type为text的input元素
$(‘:password‘);             // 选择所有的type为password的input元素
$(‘:radio‘);                // 选择所有的type为radio的input元素 
$(‘:checkbox‘);             // 选择所有的type为checkbox的input元素 
$(‘:submit‘);               // 选择所有的type为submit的input元素 
$(‘:image‘);                // 选择所有的type为image的input元素 
$(‘:reset‘);                // 选择所有的type为reset的input元素 
$(‘:button‘);               // 选择所有的type为button的input元素 
$(‘:file‘);                 // 选择所有的type为file的input元素 
$(‘:hidden‘);               // 选择所有类型为hidden的input元素或表单的隐藏域 

$(‘:enabled‘);                  // 选择所有的可操作的表单元素 
$(‘:disabled‘);                 // 选择所有的不可操作的表单元素 
$(‘:checked‘);                  // 选择所有的被checked的表单元素 
$(‘select option:selected‘);    // 选择所有的select 的子元素中被selected的元素 

$(‘#id‘);  　　　　　 // 根据id选择元素
$(‘.class‘);  　　   // 根据class选择元素

$(‘div:first‘);     // 选择div元素集合中的第一个  
$(‘div:last‘);      // 选择div元素集合中的最后一个

$(‘div:odd‘);       // 选择div元素集合中的奇数个元素  
$(‘div:even‘);      // 选择div元素集合中的偶数个元素

$(‘div:gt(i)‘);       // 选择div元素集合中索引大于i的元素  
$(‘div:lt(i)‘);       // 选择div元素集合中索引小于i的元素

$(‘div:empty‘);        // 选择div元素集合中空元素
$(‘div:parent‘);       // 选择div元素集合中非空元素

$(‘div:visible‘);      // 选择div元素集合中可见元素
$(‘div:hidden‘);       // 选择div元素集合中隐藏元素

$(‘ul li:first‘);             // 选择所有ul后代元素li元素集合中的第一个
$(‘ul li:first-child‘);       // 选择每个ul后代元素li元素集合中的第一个

$(‘:disable‘);             // 选择所有可以操作的表单元素
$(‘:enable‘);              // 选择所有不可以操作的表单元素