2018-06-26 jq选择器

0.选择器的目的就是为了方便快速找到元素从而操作元素！

1.基本选择器

　　*  -> 所有标签

　　#id ->id选择器

　　.class -> 类选择器

　　h1,h2 -> 组合选择器

2.层级选择器

　　祖先A  后代 -> 祖先A的多个后代

　　parent>children ->parent 的所有children

　　prev+  ->prev的下一个兄弟元素 （平级）

　　prev~ -> prev的后面所有兄弟（平级）

　　　<div id='div1'>
　　　　　<p>111</p>
　　　　　<p>222</p>
　　　　　<div id='div2'>
　　　　　　<p>333</p>
　　　　　　<p>444</p>
　　　　　</div>
　　　</div>
　　　<p>555</p>
　　　<p>666</p>

　　$('#div1 p').css({'color':'#00f'}); //111 222 333 444
　　$('#div1>p').css({'color':'#00f'}); //111 222

　　$('#div1+').css({'color':'#00f'});  //555

　　$('#div1~').css({'color':'#00f'});  //555 666

3.基础选择器

　　:first ->第一个

　　:last -> 最后一个

　　:not -> 除了

　　:even -> 偶数（注意这里的偶数指的是下标，从零开始包含零）

　　:odd ->  奇数 （同上）

　　:eq -> 等于

　　:gt -> 大于

　　:lt -> 小于

　　<h2>111</h2>
　　<h2>222</h2>
　　<h2>333</h2>
　　<h2>444</h2>
　　<h2>555</h2>

　　$('h2:first').css({'color':'#00f'});　　 //111
　　$('h2:last').css({'color':'#00f'}); 　　 //555
　　$('h2:even').css({'color':'#00f'});　　 //111 333 555
　　$('h2:odd').css({'color':'#00f'});　　 //222 444   
　　$('h2:eq(2)').css({'color':'#00f'});　　 // 333
　　$('h2:gt(1)').css({'color':'#00f'});　　 //222 333 444
　　$('h2:lt(1)').css({'color':'#00f'});　　 //111

4.内容选择器　

　　　:has(a) -> 含有a标签的 $('h1 has(span)') //所有含有span标签的h1元素

　　　:parent() ->内容不为空的（标签内部有回车换行则不为空）

　　　:empty() ->内容为空的 （标签内部有回车换行则不为空）

5.属性选择器

　　[name] -> 含有name属性的 $('input[name]') //含有name属性的input标签

　　[name=user]->name属性=user的

　　[name^=u] ->name属性以u开始的

　　[name$=r] ->name属性以r结尾的

　　[name!=user]->name属性不等于user的

　　[name][age]-> 同时含有name和age属性的

6.子元素选择器

　　:first-child -> 第一个子元素

　　$('div h1:first-child') //所有div里面的第一个h1标签

　　:last-child -> 最后一个子元素

　　:only-child -> 只含有一个子元素的子元素

　　:nth-child(2)->第二个子元素（从1开始）

7.表单选择器

　　:input -> 找到所有input元素 $(':input')

　　:text :password :radio :checkbox :button :submit :reset :file :hidden

8.表单属性

　　:checked -> 所有被选中的元素（单选框或者复选框）  $(':checked')

　　:selected ->所有被选中的option元素

　　:enabled -> 所有可用元素

　　:disabled -> 所有不可用元素