首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery选择器总结

2013-08-04 
jQuery选择器小结div stylefont-size: 14px1.选择器1.id选择器://选择 id为 one 的元素$(#one)2.类

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>

热点排行