jQuery基础系列（一）：jQuery选择器

本系列说明：此系列主要总结jQuery基础知识，会持续更新，内容也会逐渐深入，欢迎关注！
jQuery选择器可以归类分为基本选择器，层级选择器，过滤选择器和表单选择器。通过jQuery选择器我们能够更快更方便的选择到对应的元素或者元素组，进行相关DOM节点操作。

一：jQuery基本选择器

1.id选择器   $('#id')
    eg:$('#app')
2.class选择器   $('.class')
    eg:$('.blue')
3.element选择器   $('element')
    eg:$('p')
4.*选择器(*表示指定条件下所有元素)   $('*')
    eg:$('*')
5.并列选择器   $('#id,.class,element...')
    eg:$('div,.blue,#app')

二：jQuery层级选择器

1.直系子元素选择器（parent>child）
    eg:$('div>span') 直接被div包括的span元素
2.祖孙元素选择器（grandparent parent child）
    eg:$('div p span') 逐级查询，首先div下查找p，然后p里面查找span
3.相邻兄弟元素选择器（prev+next）
    eg:$('p+div') 选择到和p元素相同父元素且p后面的第一个div元素,类似于next()方法
4.所有兄弟元素选择器（prev~siblings）
    eg:$('p~div') 选择到和p元素相同父元素且在p后面的所有div元素，类似jQuery的nextAll()方法

三：jQuery过滤选择器

1. 基本过滤选择器
（1）:first和:last（取第一个，最后一个元素）
    eg:$('p:first')，$('.active:first')，$('p:last')，$('.active:last')
（2）:not（取非元素）
    eg:$('div:not(.active)')
（3）:even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）
    eg:$('div:even')	$('div:odd')
（4）:eq(x) （取指定索引的元素，从0开始）
    eg:$('li:eq(2)')
（5）:gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
    eg:$('li:lt(2)')	$('li:gt(2)')
（6）:header（取H1~H6标题元素）
    eg:$(':header')
2. 内容过滤选择器
（1）:empty（取不包含子元素或文本为空的元素）
    eg:$('P:empty')
（2）:contains(text)（取包含指定字符串的元素）
    eg:$(':contains(text)')
（3）:has(selector)（取包含某些元素在内的元素）
    eg:$('p:has(span)')	 $('div:has(span,p,a)')
（4）:parent（取包含子元素或文本的元素，取的是该元素）
    eg:$('div:parent')
 3. 可见性过滤选择器
 （1）:hidden（取不可见的元素，即display:none或type=hidden的表单元素）
    eg:$('div:hidden')
 （2）:visible（取可见的元素）
    eg:$('div:visible')
 4. 属性过滤选择器
 (1)[attribute]（取拥有attribute属性的元素）
    eg:$('a[title]')
 (2)[attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
    eg:$('a[class=item]')	$('a[class!=item]')
 (3)[attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）
    eg:$('a[title^=jQuery]')	$('a[title$=jQuery]')	$('a[title*=jQuery]')
 (4)[selector1][selector2]（复合型属性过滤器，同时满足多个条件）
    eg:$('a[title^=jQuery][class=item]')
 5. 子元素过滤选择器
 (1):first-child（第一个子元素）和:last-child（最后一个子元素）
    eg:$('div:first-child')		$('div:last-child')  第一个和最后一个div元素
 (2):only-child（当该元素有且仅有一个子元素时）
    eg:$('div:only-child') 有且只有一个子元素的div元素
 (3):nth-child(x)（第x个元素，first-child和last-child为特殊）
    eg:$('div:nth-child(x)')第X个元素	$('div:nth-child(even)')和$('div:nth-child(odd)')    从1开始，获取第偶数个或第奇数个div元素
       $('div:nth-child(xn+y)')其中x>=0,y>=0

四：jQuery表单选择器（以下内容仅针对表单对象）

(1):enabled和:disabled（取可用或不可用元素，针对input, select, textarea元素）
    eg:$('input:enabled')	$('input:disabled')
(2):checked（取选中的input的type为radio单选框或者checkbox复选框）
(3):selected（取select下拉列表被选中的元素）
(4):input（取input,textarea,select,button元素）
(5):text（取单行文本框元素input的type="text"）和:password（取密码框元素input的type="password"）
(6):radio（取单选框元素input的type="radio"）
(7):checkbox（取复选框元素input的type="checkbox"）
(8):submit（取提交按钮元素input的type="checkbox"）
(9):reset（取重置按钮元素input的type="reset"）
(10):button（取按钮元素input的type="button"）
(11):file（取上传域元素input的type="file"）
(12):hidden（取不可见元素input的type="hidden"）