jQuery选择器小结
<div style="font-size: 14px">
1.选择器
1.id选择器:
//选择 id为 one 的元素
$('#one')
2.类选择器:
//选择 class 为 mini 的所有元素
$('.mini')
3.标签选择器
//选择 元素名是 div 的所有元素
$('div')
4.选择所有元素
$('*')
5.多选择器
//选择 所有的span元素和id为two的div元素
$('span,#two')
2.层次选择器
1.//选择 body内的所有div元素.
$('body div')
2.//在body内的选择 元素名是div 的子元素.
$('body > div')
3. //选择 所有class为one 的下一个div元素.
$('.one + div')
4.//选择 id为two的元素后面的所有div兄弟元素.
$('#two ~ div')
3.过滤选择器
1. //选择第一个div元素.
$('div:first')
2.//选择最后一个div元素.
$('div:last')
3.//选择class不为one的 所有div元素.
$('div:not(.one)')
4. //选择 索引值为偶数 的div元素。
$('div:even')
5. //选择 索引值为奇数 的div元素。
$('div:odd')
6. //选择 索引等于 3 的div元素
$('div:eq(3)')
7. //选择 索引大于 3 的div元素
$('div:gt(3)')
8. //选择 索引小于 3 的div元素
$('div:lt(3)')
9. //选择 所有的标题元素.比如h1, h2, h3等等...
$(':header')
10.//选择 当前正在执行动画的所有元素.
$(':animated')
4.内容过滤选择器
1.//选取含有文本"di"的div元素.
$('div:contains(di)')
2.//选取不包含子元素(或者文本元素)的div空元素.
$('div:empty')
3. //选取含有class为mini元素 的div元素.
$('div:has(.mini)')
4.//选取含有子元素(或者文本元素)的div元素.
$('div:parent')
5.可见性过滤选择器
1.//选取所有不可见的元素.包括<input type="hidden"/>.
$('div:hidden')
2.//选取所有可见的元素.
$('div:visible')
6.属性选择器
1.//选取含有 属性title 的div元素.
$('div[title]')
2.//选取 属性title值等于 test 的div元素.
$('div[title=test]')
3.//选取 属性title值不等于 test 的div元素.
$('div[title!=test]')
4.//选取 属性title值 以 te 开始 的div元素.
$('div[title^=te]')
5.//选取 属性title值 以 est 结束 的div元素.
$("div[title$=est]")
6.//选取 属性title值 含有 es 的div元素.
$("div[title*=es]")
7.//组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素.
$("div[id][title*=es]")
7.子元素过滤选择器
1.//选取每个父元素下的第2个子元素
$('div.one :nth-child(2)')
2//选取每个父元素下的第一个子元素
$('div.one :first-child')
3.//选取每个父元素下的最后一个子元素
$('div.one :last-child')
4.//如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$('div.onenly-child')
8.表单对象过滤选择器
1.//重置表单元素
$(":reset")
2.//对表单内 可用input 赋值操作.
$("#form1 input:enabled")
3.//对表单内 不可用input 赋值操作.
$("#form1 input:disabled")
4.//使用:checked选择器,来操作多选框.
$(":checkbox")
5.//使用:selected选择器,来操作下拉列表.
$("select :selected")
9.表单选择器
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
</div>