首页 >web前端 >js教程 >jQuery中选择器的归纳总结

jQuery中选择器的归纳总结

yulia
yulia原创
2018-09-26 15:13:292230浏览

jQuery中的选择器有很多,比如基本选择器,表单选择器,过滤选择器等等,有些不经常使用,就容易忘记,最近对jQuery中的选择器做了一个总结,方便自己可以查看,同时分享给大家,希望可以帮助到你。

基本选择器

//ID选择器  $("#id") 

//元素选择器     $("div")    

//类选择器        $(".classname")  

//组合选择器    $(".classname,.classname1,#id1") 

层次选择器

//子元素选择器     $("#id>.classname") 

//后代元素选择器   $("#id .classname")  

//紧邻下一个元素选择器   $("#id + .classname")

//兄弟元素选择器    $("#id ~ .classname")   

过滤选择器

//第一个li   $("li:first")

//最后一个li    $("li:last")  

//挑选下标为偶数的li   $("li:even") 

//挑选下标为奇数的li    $("li:odd")

//下标等于4的li     $("li:eq(4)")

//下标大于2的li   $("li:gt(2)") 

//下标小于2的li   $("li:lt(2)")    

//挑选除 id="runoob" 以外的所有li  $("li:not(#runoob)")

内容过滤选择器

// 包含 Runob文本的元素   $("div:contains('Runob')") 

//不包含子元素或者文本的空元素   $("td:empty")         

//含有选择器所匹配的元素      $("div:has(selector)") 

//含有子元素或者文本的元素      $("td:parent") 

可见性过滤选择器

//匹配所有不可见元素,或type为hidden的元素  $("li:hidden") 

//匹配所有可见元素     $("li:visible")

属性过滤选择器

//所有含有 id 属性的 div元素   $("div[id]")     

// id属性值为123的div元素   $("div[id='123']")  

// id属性值不等于123的div元素      $("div[id!='123']") 

// id属性值以qq开头的div元素       $("div[id^='qq']")

// id属性值以zz结尾的div元素        $("div[id$='zz']")  

// id属性值包含bb的div元素      $("div[id*='bb']") 

//多属性选过滤,同时满足两个属性的条件的元素       $("input[id][name$='man']")

状态过滤选择器

// 匹配可用的 input  $("input:enabled")   

// 匹配不可用的 input   $("input:disabled") 

// 匹配选中的 input  $("input:checked")   

// 匹配选中的 option  $("option:selected")

表单选择器

//匹配所有 input, textarea, select 和 button 元素   $(":input") 

//所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同    $(":text") 

//所有密码框      $(":password") 

//所有单选按钮  $(":radio")    

//所有复选框   $(":checkbox")

//所有提交按钮   $(":submit") 

//所有重置按钮    $(":reset")  

//所有button按钮    $(":button") 

//所有文件域    $(":file")

以上是jQuery中选择器的归纳总结的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn