您的当前位置:首页正文

jQuery中选择器的归纳总结

2020-11-27 来源:二三四教育网

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")

显示全文