jQuery选择器

二、jQuery选择器

当html某个节点不存在时，用JavaScript去获取会报错，而用jQuery却不会报错；

document.getElementById('ttt').style.color = "red"; 如果此时#ttt已被删除，程序会报错。

必须if(document.getElementById('ttt')){document.getElementById('ttt').style.color = "red";}才不会报错。

但是如果用$('#ttt').css('color','red');即使#ttt被删除，程序也不会报错；

2.1、基本选择器

$('#name01') 选择id为name01的元素 ,

$('.name02') 选择类名为.name02的元素 ,

$('div,p,span') 按照标签名选择元素选择 ,

$('p.red')可以标签名与类名进行选择

$(*) 用通配符选择所有元素 ，

2.2、层次选择器

$('div span') 可以结合后代选择器进行选择，选择div下所有的后代（不止是子代）span；注意单引号的位置

$('div>span') 只选择div下所有的子代span；注意单引号的位置

$('.one + .ttt'),选择.one后面的名为ttt元素的同级元素，也是集合；注意单引号的位置

$('.xxx~siblings'),选择.xxx后的所有siblings元素；注意单引号的位置

可以用prev（）与next（）方法来进行更方便的选择；

$('.one').next('yyy')选择.one后的平级的

示例：next能否选择不是紧临的平级元素：不能。

• ttt
• ttt
• ttt $('.test_next .name02').next().css('color','red'); 起作用
• ttt
• ttt $('.test_next .name02').next('.name05').css('color','red');不起作用
• ttt
• ttt
• ttt $('.test_next .name05').nextAll('li').css('color','green');

2.3、过滤选择器

2.3.1基本过滤选择器

$('div:first'),选取所有div中的第一个div；

• text1,$('.myLi:first').css('color','red');
• text2
• text3
• text4
• text5

$('div:last'),选取所有div中的最后一个div；

$('div:not(.name01)'),注意.name01并不用引号包围；

• text text text
• text text text
• text text text
• text text text
• text text text,$('.not_test li:not(.name005)').css('color','blue');

$('li:odd'),选择奇数序号的li元素，计数是从0开始的

$('li:even'),选择偶数序号的li元素，计数是从0开始的

$('li:gt(2)'),选择索引大于2的元素，不包含索引是2的元素

$('li:lt(5)'),选择索引小于5的元素，不包含索引是5的元素

$(':header')，选取所有的标题，h1-h6

$('div:animated'),选择正在运行动画的div

2.3.2内容过滤选择器

$('div:contain("我")')，选取含有文本“我”的div

$('div:empty'),选择没有子元素且没有文本的div，文本也算作是元素

$('div:has('p')'),选取含有p子元素的div元素

• tttt$('.test_has:has(.in_has) ').css('color','red');
• ttt
• ttt
• ttt
• ttt

$('div:parent'),选取含有子元素的div，文本也算作是元素，所以只包含文本也是可以被选中的

2.3.3可见性过滤选择器

$('div:visible'),选择所有可见的div

$(':hidden'),选取所有不可见元素，其中包括input应用了type="hidden",应用了display:none的元素，以及应用了visiblity: hidden的元素；

2.3.4属性过滤选择器

$('div[id]'),$('p[class]'),选择含有id属性的div，选择含有class属性的div，注意[]内部一个引号也没有

$('div[title=ttt]'),选取含有title属性且值为ttt的div，注意[]内部一个引号也没有

$('div[title!=ttt]'),选取title值不等于ttt的div，不含title的div也会被选中，注意[]内部一个引号也没有

$('div[title^=ttt]'),选取含有title属性且title属性值以ttt开始的div，注意[]内部一个引号也没有

$('div[title$=ttt]'),选取含有title属性且title属性值以ttt结束的div，注意[]内部一个引号也没有

$('div[title*=ttt]',选取含有title属性且title属性值含有ttt的div)，注意[]内部一个引号也没有

$('div[attr01][attr02][attr03][attr04]'),用多个属性缩小div可选择的范围，因为多个属性是且的关系

2.3.5子元素过滤选择器

$('div ul li span:nth-child(index/even/odd/equation)'),选取每个父元素（li）的第index个元素/偶数元素/奇数元素（span）。这样选出来的是一个集合（每个）;要注意:nth-child(index)是从1开始计数的

• text text text text text text text text text $('.nth_test li span:nth-child(2)').css('color','red'); 每个li下的第二个span，li是span的父元素
• text text text text text text text text text
• text text text text text text text text text
• text text text text text text text text text

$('div ul:first-child'),选取每个父元素（div）下的第一个元素（第一个ul）；

$('div ul:last-child'),选取每个父元素（div）下的最后一个元素（最后一个ul）；

$('ul li:only-child'),如果ul只有一个子元素是li，那么将会被匹配

:nth-child详细例举：

:nth-child(even);选取每个父元素下索引值是偶数的元素

:nth-child(odd);选取每个父元素下索引值是奇数的元素

:nth-child(2);选取每个父元素下索引值是2的元素

:nth-child(3n);选取每个父元素下索引值是3n的元素，n从0开始，0,3,6,9...,:nth的计数是从1开始的

:nth-child(3n+1);选取每个父元素下索引值是(3n+1)的元素，n从0开始，1,4,7,10...，nth的计数是从1开始的

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $('.nth_test_2 span:nth-child(3n)').css('color','red'); $('.nth_test_2 span:nth-child(3n+1)').css('color','green');

2.3.6表单对象属性过滤选择器

$('#form01:enabled'),选取id是form01的表单内的所有的可用元素； $('#form01:disabled'),选取id是form01的表单内的所有的不可用元素； $('input:checked'),选取所有的（单选框、复选框被选中的）被选中的input元素； $('select:selected'),选取所有被选中的选元素；

2.4表单选择器

$(':input'),选中所有的input,select,textarea,button标签元素

$(':text'),选取所有的单行文本，

$(':password'),选取所有的密码框，

$(':radio'),选取所有的单选框，

$(':checkbox'),选取所有的复选框，

$(':submit'),选取所有的提交按钮，

$(':image'),选取所有的图像按钮，

$(':reset'),选取所有的重置按钮，

$(':button'),选取所有的按钮，

$(':file'),选取所有的上传域，

$(':hidden'),选取所有的不可见元素，

2.5特殊符号注意事项

要注意空格，$('.name01 :hidden')表示的是class为name01内的隐藏元素，而$('name01:hidden')表示的是隐藏的类名为class的元素

2.6小知识积累

if (('.name01').is(':visible')){执行代码};判断.name01可见时，要执行的代码

2.6选择器中的注意对象

2.6.1当选择器中含有特殊符号时

当选择器中含有'.'、'#'、'('、'['符号时，要用转义字符'\'将其转义，例如 $('#b#f')是不正确的，转义成$('#db\#f'),$('#df[1]')不正确，转义成$('#df\[1\]')

2.6.2选择器中含有空格

$('.box :hidden')选中的是类名为box的盒子下的隐藏元素，而$('.box:hidden')选中的是类名为box的隐藏元素