本文整理自锋利的jQuery(第二版),难免有些过时,读者可以在jQuery API 1.12 中文文档查看更全面的内容
基本选择器
$("#id") //id选择器
$(".class") //类选择器
$("label") //元素选择器
$("*") //通配符
$(".class,#id") //并列选择器层次选择器
$("body div") //后代选择器
$("body > div") //子代选择器
$(".class + div") //next选择器 返回后面的下一个同辈元素
$("#id ~ div") //同辈选择器 返回后面所有的label同辈
可以用next()代替next选择器
可以用nextAll()代替同辈选择器
siblings()与$(“#id ~ div”)的差别
- $(“#prev ~ div”)返回prev元素后面的所有同辈div元素
- siblings()返回所有同辈div元素,与前后位置无关
过滤选择器
基本过滤选择器
$("div:first") //返回第一个元素
$("div:last") //返回最后一个元素
$("input:not(".hide")") //去除所有与给定选择器匹配的元素
$("td:even") //返回索引为偶数的元素 索引从0开始
$("td:odd") //返回索引为奇数的元素 索引从0开始
$("td:eq(2)") //返回索引等于2的元素 索引从0开始
$("td:gt(2)") //返回索引大于2的元素 索引从0开始
$("td:lt(2)") //返回索引小于2的元素 索引从0开始
$("body:header") //返回所有的标题元素 例如h1 h2 h3
$("body:animated") //返回所有正在执行动画的元素
$("form:focus") //返回所有获得焦点的元素
内容过滤选择器
$("label:contains('text')") //返回含有text文本内容的lebel元素
$(":empty") //返回不包含子元素或者文本内容的元素
$("div:has("ul")") //返回含有ul元素的div元素
$("span:parent") //返回含有子元素或者文本元素的span元素
可见性过滤选择器
$("div:hidden") //返回所有不可见的div元素
$("div:visible") //返回所有可见的div元素
不可见元素包括类型包括:
- 类型为
hidden的表单元素; - 样式
display:none; - 样式
visibility:none.
属性过滤选择器
$("div[id]") //返回有id属性的div元素
$("input[name=age]") //返回name属性等于age的input元素
$("input[name!=age]") //返回name属性不等于age的input元素
$("input[name^=age]") //返回name属性以age开头的input元素
$("input[name$=age]") //返回name属性以age结束的input元素
$("input[name*=age]") //返回name属性含有age的input元素
$("input[name|= btn]") //返回name属性等于btn或者以btn为前缀(以"-"分割)的input元素
$("input[class~= btn]") //返回name属性用空格分割的值中包含字符btn的input元素 eg:<input class="btn btn-info">
$("div[id][title$='ed']") //返回拥有id属性和title属性以ed结尾的div元素
子元素过滤选择器
$(":nth-child(even/index/add)") //返回每个父元素匹配的子元素 索引从1开始
$(":first-child") //返回每个父元素的第一个子元素 索引从1开始
$(":last-child") //返回每个父元素的最后一个子元素 索引从1开始
$(":only-child") //如果子元素是父元素的位移子元素,则返回
表单对象属性过滤选择器
$("#form :enabled") //返回id为form的表单内所有的可用元素
$("#form :disabled") //返回id为form的表单内所有的不可用元素
$("#form :checked") //返回id为form的表单内所有被选中的元素 eg:单选框 复选框
$("#form :selected") //返回id为form的表单内所有被选中的选项元素 eg:下拉列表
表单选择器
$(":input")
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":hidden")