Jquery（一）选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/ldaolong/article/details/84683537

不是基于最新版本，有待更新。

优势：

1.写法简洁

2.支持css1到css3

3.完善的处理机制。如避免不必要的错误和空的判断

元素查找方法

1.id选择器: $("#myELement")

2.element选择器（遍历html元素）: $("div")

3.class选择器: $(".myClass")

4. * 选择器（遍历所有元素）: $("*")

5.并列选择器: 例如：将p元素和div元素的margin设为0 => $('p, div').css('margin', '0');

层叠选择器：

1.$("div span") 选择所有的div元素中的span元素

2.parent > child（直系子元素）: $('div > span').css('color', '#FF0000');

3.prev + next（下一个兄弟元素，等同于next()方法）:

$('.item + div') => 选取class为item的下一个div兄弟元素

4.prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

例如： $('.inside ~ div') => 选取class为inside之后的所有div兄弟元素

基本过滤选择器：

内容过滤选择器：

选择器	描述	返回	实例
:contains(text)	选取含有文本内容为text的元素	集合元素	$("div:contains('ss')")
:empty	选取不包含子元素或者空元素	集合元素	$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$("div:has(p)") 选择所有含有p标签的div元素
:parent	选取含有子元素或者文本的元素	集合元素	$("td:parent") 选择所有的以td为父节点的元素数组

可视化过滤选择器：

选择器	描述	返回	实例
:hidden	选取所有不可见的元素	集合元素	$("div:hidden") 选择所有的被hidden的div元素
:visible	选取所有可见的元素	集合元素	$("div:visible") 选择所有的可视化的div元素

属性过滤选择器：

选择器	描述	返回	实例
[attribute]	选取拥有此属性的元素	集合元素	$("div[id]") 选择所有含有id属性的div元素
[attribute=value]	选取属性的值为value的元素	集合元素	$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
[attribute!=value]	选取属性的值不为value的元素	集合元素	$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
[attribute^=value]	选取属性的值以value开头的元素	集合元素	$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
[attribute$=value]	选取属性的值以value结尾的元素	集合元素	$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
[attribute*=value]	选取属性的值含有value的元素	集合元素	$("input[name*='man']") 选择所有的name属性包含'news'的input元素
[attribute\|=value]	选取属性等于给定字符串或以改字符串为前缀（字符串后紧跟链接符'-'）的元素	集合元素
[attribute~=value]	选取属性用空格分隔的值中包含一个给定值的元素	集合元素
[attribute1][attribute2][atrributeN]	用属性选择器合并一个复合属性选择器	集合元素	$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器：

选择器	描述	返回	实例
:nth-child(index/even/odd/equation)	选取每个父元素下的第index个子元素或者奇偶元素。index从1算起	集合元素	$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
:first-child	选取每个父元素的第一个元素	集合元素	$("div span:first-child") 返回所有的div元素的第一个子节点的数组
:last-child	选取每个父元素的最后一个元素	集合元素	$("div span:last-child") 返回所有的div元素的最后一个节点的数组
:only-child	如果某个元素是它父元素中唯一的子元素，那么它将会被匹配	集合元素	$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器：

选择器	描述	返回	实例
:input	选择所有的text input元素	集合元素
:text	选择所有的表单输入元素	集合元素
:password	选择所有的password input元素	集合元素
:radio	选择所有的radio input元素	集合元素
:checkbox	选择所有的checkbox input元素	集合元素
:submit	选择所有的submit input元素	集合元素
:image	选择所有的image input元素	集合元素
:reset	选择所有的reset input元素	集合元素
:button	选择所有的button input元素	集合元素
:file	选择所有的file input元素	集合元素
:hidden	选择所有类型为hidden的input元素或表单的隐藏域	集合元素

表单元素过滤选择器：

选择器	描述	返回	实例
:enabled	选择所有的可操作的表单元素	集合元素
:disabled	选择所有的不可操作的表单元素	集合元素
:checked	选择所有的被checked的表单元素	集合元素	$("input :checked")
:selected	选取所有被选中的选项元素	集合元素	$("select option:selected") 选择所有的select 的子元素中被selected的元素