JQuery选择器大概分为四大类:基本选择器,层次选择器,过滤选择器,表单选择器;
一:基本选择器
基本选择器一般包括ID,元素名,类名,以及显示页面所有元素。前面三个都好理解,显示所有元素用$("*")即可,需要说明的一点,可以合并匹配元素,如
$("div ,span")表示选择div 和span 元素。
二:层次选择器
DOM元素间的主要层次关系包括后代、父子、相邻、兄弟关系
例子: $("div span") 匹配div下面的所有span元素,
$("div>span")匹配div的子元素span,
$("div").next() 匹配div相邻的元素,也可以用$("div+next")表示,
$("div").nextAll()匹配div之后的所有兄弟元素,也可以用$("div~siblingd)表示,需要说明的是,$("div").siblings("div")获取所有的相邻div元素。
三:过滤选择器
过滤选择器根据过滤规则进行元素的匹配,书写时都以冒号(:)开头。
例子:
基本过滤器:$("li:first") 匹配第一个li元素,
$("li:last") 匹配最后一个li元素,
$("li:not(.Notclass)") 匹配除了类为Notclass的所有li元素,
$('li:even")匹配所有索引值为偶数的li元素,
$('li:odd")匹配所有索引值为奇数的li元素,
$('li:eq(1)")匹配指定索引值得li元素,从0开始计数,
$('li:gt(1)")匹配所有大于指定索引值的li元素,从0开始计数,
$('li:lt(1)")匹配所有小于指定索引值的li元素,从0开始计数,
内容过滤器: $('div:contains('A')")匹配包含指定文本的div元素,区分大小写
$('div:empty")匹配不包含元素或者文本的div元素,
$('div:has(span)")匹配包含有span元素的div元素,
$('div:parent")匹配含有子元素或者文本的div元素,
可见性过滤器: $("div:hidden")匹配所有隐藏的div元素,包括display=none,visibility=hidden,type=hidden,
$("div:visible")匹配所有显示的div元素,
属性过滤器:属性过滤器包括'[]'
$("div[title='A']")匹配title属性等于A的div元素,
$("div[title!='A']")匹配title属性不等于A的div元素,
$("div[title^='A']")匹配title属性为A开始的div元素,
$("div[title$='A']")匹配title属性为A结束的div元素,
$("div[title*='A']")匹配title属性包含有A的div元素,
$("div[title='A'][name='B']")匹配title属性为A,同时name属性为B的div元素,
子元素过滤器:$("li:nth-child(4)")匹配li元素下的第四个子元素,
$("li:first-child")匹配li元素下的第一个子元素,
$("li:last-child")匹配li元素下的最后一个子元素,
$("li:only-child")匹配只有一个子元素的li元素,
表单对象属性过滤选择器:$("input:enabled")匹配表单中所有属性可用的input元素,
$("input:disabled")匹配表单中所有属性不可用的input元素,
$("input:checked")匹配表单中所有被选中的input元素,
$("option:selected")匹配表单中所有被选中的option元素
四:表单选择器
使用表单选择器,可以更加方便的、高效的使用表单,基本都是通过type类型确定
:input 获取所有input、 textarea 、select元素,
:text 获取所有单行文本框,
:password 获取所有密码框,
:radio 获取所有单选按钮,
:checkbox 获取所有复选框,
:submit 获取所有的提交按钮,
:image 获取所有图像域,
:reset 获取所有重置按钮,
:button 获取所有按钮,
:file 获取所有文件域