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 -> 所有不可用元素