二、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的隐藏元素