jQuery选择器

jQuery选择器
（作者：张承睿，撰写时间：2019年5月12）

Css选择器找到元素后添加样式，JQuery选择器找到元素后添加行为，其中JQuery选择器分为：基本选择器、层次选择器、过滤选择器和表单选择器

基本选择器是通过元素id，class和标签名来获取dom元素，网页中每个id只能使用一次，但是class可以使用多次，用法：
$(‘username’),获取id=username的元素
$(’.left’),获取所有class=left的元素
$(‘p’),获取所有标签为

的元素
$(’*’),选取所有元素
$(‘div,span,p.testClass’),获取所有

,和class=testClass的

标签元素

层次选择器可以通过dom元素间的层次关系来取得特定元素
$(‘div span’)选取

里的所有的元素
$(‘div > span’)选取

元素下的元素名是的元素
$(’.one + div’)选取class为one的下一个

兄弟元素 = $(’.one’).next(‘div’)
$(’#two~div’) 选取id为two的元素后面的所有

兄弟元素 = $(’.two’).nextAll(‘div’)

过滤选择器：
过滤选择器又包括基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器

基本过滤选择器：
:first $(‘div:first’)选取所有

元素中的第一个

元素
:last $(‘div:last’)选取所有

元素中的最后一个

元素
:not(selector) $(‘input:not(.myClass)’)选取class不是myClass的

元素
:even $(‘input:even’)选取索引值为偶数的元素
:odd $(‘input:even’)选取索引值为奇数的元素
:eq(index) $(‘input:eq(1)’)选取索引值等于1的元素
:gt(index) $(‘input:gt(1)’)选取索引值大于1的元素
:lt(index) $(‘input:lt(1)’)选取索引值小于1的元素
:header $(’:header’)获取网页中所有的

…元素
:animated $(‘div:animated’)获取正在执行动画的

元素

内容过滤选择器：
:contains(text) $(“div:coontains(‘我’)”)选取含有文本’我’的

元素
:empty $(“div:empty”)选取不包含子元素（包含文本元素）的

空元素
:has(selector) $(‘div:has§’)选取含有

元素的

元素
:parent $(‘div:parent’)选取拥有子元素(包含文本元素)的

元素

可见性过滤选择器：
:hidden ${(}^{\prime }:hidde{n}^{\prime })选取所有不可见的元素，包含<inputtype{=}^{\prime }hidde{n}^{\prime }/><divstyle{=}^{\prime }display:non{e}^{\prime }/>和<divstyle="visibility:hidden"/>等元素，如果值选取input元素，可以使用$(‘input:hidden’)
:visible $(‘div:visible’)选取所有可见元素

属性过滤选择器：
[attribute] $(‘div[id]’)选取拥有属性id的元素
[attribute=value] $(“div[title=‘test’]”)选取属性title为test的div元素
[attribute!=value] $(“div[title!=‘test’]”)选取属性title不为test的div元素,注意没有属性title的div元素也会被选取
[attribute^=value] KaTeX parse error: Double superscript at position 14: ("div[title^='̲test']")选取属性tit…=value] $("div[title$=‘test’]")选取属性title以test结束的div元素
[attribute*=value] $(“div[title=‘test’]”)选取属性title含有test的div元素
[seletor1][selector2][selectorN] $("div[id][title=$‘test’]")选取属性拥有id且属性title为test结束的div元素

表单对象属性过滤选择器
:enabled $("#form :enabled")选取id为form的表单内所有的可用元素
:disabled $("#form :enabled")选取id为form的表单内所有的不可用元素
:checked $(“input:check”)选取所有被选中的input元素
:selected $(“select:selected”)选取所有被选中的选项元素

表单选择器
:input $(":input") 选取所有的Input、textarea、select和button元素
:test $(":text") 选取所有的单行文本框
:password $(":password")选取所有的密码框
:radio $(":radio")选取所有的单选框
:checkbox $(":checkbox")选取所有的 复选框
:submit $(":submit")选取所有的 提交按钮
:image $(":image")选取所有的 图像按钮
:reset $(":reset")选取所有的重置按钮
:button $(":button")选取所有的按钮
:file $(":file")选取所有的上传域
:hidden $(":hidden")选取所有的不可见元素