欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery中选择器的归纳总结

程序员文章站 2022-03-08 21:43:16
...
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中选择器的归纳总结的详细内容,更多请关注其它相关文章!

相关标签: jQuery,选择器