jQuery之选择DOM元素
jQuery的选择器非常强大，下面总结了一下jQuery选择器的常用类型。jQuery选择器的类型
- 基本选择器
- 层级选择器
- 属性选择器
- 表单元素选择器
- 基本过滤选择器
- 子代过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
基本选择器
基本选择器包括 *（通配符选择器）、.calss (类名选择器) 、Tag(标签选择器) 、#id（id选择器）
jQuery API 基本选择器地址 https://api.jquery.com/category/selectors/basic-css-selectors/
$('*'); //通配符选择器
$('#id'); //id选择器
$('.class') //类名选择器
$('p'); $('div'); $('span'); //标签选择器
$('p, div, span'); //多个标签选择器，可以选择多种指定标签层级选择器
层级选择器包括 " “(空格) 、 “>”、”+"、"~"
jQuery API层级选择器地址 https://api.jquery.com/category/selectors/hierarchy-selectors/
$('parent child'); //子类选择器，选择父元素子类中的元素，我管它叫做选择子孙
$('parent>child'); //子类选择器，选择下一级的元素，我管它叫选择亲儿子
$('prev+next'); //兄弟选择器，选择紧邻的下一位兄弟元素
$('prev~sibling');//选择该元素后面所有的兄弟元素属性选择器
属性选择器包括 [attr]、[attr= ‘value’]、[attr!=‘value’]、[attr^=‘value’]、[attr$=‘value’]、[attr*=‘value’].
jQuery API属性选择器地址 https://api.jquery.com/category/selectors/attribute-selectors/
//<div class='class class1'></div>
$('[class]');
//$('[attrName]'),选择拥有该属性名的DOM元素
$("[class='class1 class2']");
//$("[attrName='value']"),选择拥有该属性名且拥有指定属性值的DOM元素
$('[class^=c]');$('[class^=class1]');$('[class^=cl]');
//$('[attrName^=value]'), 选择拥有该属性名且指定属性值在最前的DOM元素,不需要写完整的属性名
$('[class$=2]');
//$('[attrName$=value]');选择拥有该属性名且指定属性值在最后的DOM元素,不需要写完整的类名
$('[class*=l]');
//$('[attrName*=value]');选择拥有该属性名且指定属性值的DOM元素,不需要写完整的类名,
//与正则匹配类似，只要属性值中包含该指定属性值就行表单选择器
该选择器针对的是表单元素；包括 :text、:password、:radio、:checkbox、:file、:hidden、:submit、:reset、:button、:image、：checked、:focus;
jQuery表单元素地址 https://api.jquery.com/category/selectors/form-selectors/
$('input:text'); //选择type为text的input标签，选择文本框
$('input:password'); //选择type为text的input标签，选择密码框
$('input:radio'); //选择type为radio的input标签,选择单选框
$('input:checked'); //选择type为checkbox的input标签，选择多选框
$('input:file'); //选择type为text的file标签，
$('input:hidden'); //选择type为hidden的input标签，选择隐藏的按钮,该按钮不被解析
$('input:submit'); //选择type为submit的input标签，选择提交按钮
$('input:reset'); //选择type为reset的input标签，选择刷新按钮
$('input:button'); //选择type为button的input标签，选择按钮
$('input:image'); //选择type为image的input标签,image可作为一个提交按钮；
$('input:checked'); //选择有checked属性的input标签，即默认选择的input标签
$('input:focus'); //选择当前聚焦的input标签基本过滤选择器
：first、：last、:eq(index)、:lt(index)、:gt(index)、:odd()、:even()、not(selector)、:header()、:lang()、：animated()、
jQuery API基本选择器地址 https://api.jquery.com/category/selectors/basic-filter-selectors/
$('target:first'); //选择指定的元素的集合的第一个
$('target:last'); //选择指定的元素的集合的最后一个
$('target:eq(3/2n - 1)'); //按索引值选择指定的元素的集合的对应index值或表达式值的元素
$('target:lt(3)'); //选择指定的元素的集合中索引值小于指定索引值的元素
$('target:gt(3)'); //选择指定的元素的集合中索引值大于指定索引值的元素
$('target:odd()'); //选择指定的元素的集合的奇数为元素，index从0开始，所以实际为选择偶数位的元素
$('target:first'); //选择指定的元素的集合的偶数位元素，实际为奇数为元素
$('target:not(selector)'); //选择指定的元素的集合的非指定元素的其他元素，里面填选择器。例如，$('div:not("#id")');
$(':header("h1")'); //选择标题；如h1,h2,h3
$(':lang()'); //选择指定语言
$(':animated()'); //选择现在正在运动的元素子代过滤选择器
对子元素查找操作，：first-child()、:last-child()、:nth-child()、:only-child()；
jQueryAPI子代过滤选择器地址 https://api.jquery.com/category/selectors/child-filter-selectors/
$('parent:first-child'); //选择第一个子元素
$('parent:last-child()'); //选择最后一个子元素
$('parent:nth-child(index/odd/even/3n+1/2n-1)'); //选择指定index的子元素，可以填表达式
$('parent:only-child()'); //选择只有一个子元素的父元素内容过滤选择器
：contains(text)、:empty()、:parent()、:has(selector);
jQuery API内容选择器地址 https://api.jquery.com/category/selectors/content-filter-selector/
$('target:contains(text)'); //查找innerHTML中有指定文本的元素
$('target:empty()'); //查找innerHTML为空的元素
$('target:parent()'); //查找innerHTML中至少一个节点（任意，可以为文本、注释、元素节点）的元素
$('target:has(selector)'); //查找innerHTML中存在指定子元素的元素，括号里填选择器可见内容过滤选择器
：hidden()、 :visible()
jQueryAPI可见内容过滤选择器地址 https://api.jquery.com/category/selectors/visibility-filter-selectors/
$(":hidden()"); //选择隐藏元素
//可被hidden选择请况
//display: none;
//表单元素input type = "hidden";
//元素的宽高显示的设置为0px,即手动设置0px;
//父元素是隐藏的
$(':visible()'); // 选择可见元素以上选择器当括号内没有参数时可以省略括号
