jQuery选择器

jQuery可以理解成一个JS的代码库，使用时可以用更少的代码量完成更多的功能

但目前jQuery已经不再广泛使用，只有一些老的项目使用

本篇随笔涵盖了jQuery的选择器部分，大多都是CSS选择器的另一种简便写法，实际效果可参考CSS选择器一文

基本选择器

标签选择器

　　$('标签名')

　　其中可以用$(this).index()明确使用的是该类数组中的第几个元素，或者用$('元素')[index]访问

ID选择器

　　$('#ID名')

类选择器

　　$('.类名')

通配符选择器

　　$('*')

　　效率低，尽可能不用

多项选择器

　　$('选择器1,选择器2,……')

　　类似于CSS里的群组选择器

　　最后返回所匹配到的所有元素的一个类数组，其中数组元素的顺序同HTML中标签先后顺序一致

 

层级选择器

祖先后代选择器

　　$('祖先元素 后代元素')

　　可以选中祖先元素的所有后代元素中为指定元素的元素（包括子元素、孙元素等等），不是像CSS中只选子元素而不选孙元素

　　生成的类数组中，元素顺序符合HTML中元素的先后顺序

直接后代选择器

　　$('父元素>子元素')

　　选中父元素下子元素为指定元素的元素，只会选中子元素而没有孙元素

相邻兄弟选择器

　　$('元素+兄弟元素')

　　选中紧跟在元素后的兄弟元素为特定元素的元素

兄弟选择器

　　$('元素~兄弟元素')

　　选中元素之后同级的所有兄弟元素中为指定元素的元素，而并非只是相邻的

 

属性选择器

　　$('[class]')：选择元素中有class属性名的所有元素

　　$('[attribute=value]')，找出attribute属性值为value的元素

　　$('[attribute!=value]')：找出attribute属性值不为value的元素

　　$('[attribute^=value]')：attribute属性值以value开头的元素（^可以理解为正则中首匹配）

　　$('[attribute$=value]')：attribute属性值以value结尾的元素（$可理解为正则中的尾匹配）

　　$('[attribute*=value]')：attribute属性值包含value的元素

　　$('[attribute1][attribute2]')，可以在其中放多个种类的属性选择器，最后筛选出同时满足其中所有条件的元素

 

过滤器

child

　　$('父元素>子元素:first-child')：找到父元素下第一个子元素为指定类型的元素

　　$('父元素>子元素:last-child')：找到父元素下最后一个子元素为指定类型的元素

　　$('父元素>子元素:nth-child(n)')：找到父元素下第n个子元素为指定类型的元素（n从1开始）

　　$('父元素>子元素:nth-last-child(n)')：找到父元素下倒数第n个子元素为指定类型的元素（n从1开始）

　　$('父元素>子元素:only-child')：找到父元素下只有一个子元素，且为指定类型的元素

type

　　$('父元素>子元素:first-of-type')：找到父元素下的第一个指定类型的子元素（不一定必须是第一个节点）

　　$('父元素>子元素:last-of-type')：找到父元素下的最后一个指定类型的子元素（不一定必须是最后一个节点）

　　$('父元素>子元素:nth-of-type(n)')：找到父元素下的第n个指定类型的子元素（不一定必须是第n个节点）

　　$('父元素>子元素:nth-last-of-type(n)')：找到父元素下的倒数第n个指定类型的子元素（不一定必须是倒数第n个节点）

　　$('父元素>子元素:only-of-type')：找到父元素下的唯一指定类型的子元素（不一定必须只有一个子节点）

参数n

　　取值为整数，从1开始

　　也可取even（偶数），odd（奇数）

　　也可用an+b的形式写（n从1开始），例如3n+1

 

表单选择器

表单元素选择器

　　$(':input')：选择所有表单中的元素

　　$(':text')：匹配所有的单行文本框，功能同$('input[type='text']')一样，其他的input中type（checkbox、radio等）也可用这种方法匹配

表单状态选择器

　　$(':enabled')：选中表单元素中enabled的元素（disabled也可如此使用）

　　$(':checked')：选中表单元素中checked的元素（复选框、单选框等、select中的option）

　　$(':selected')：选中表单元素中被选中的option元素

 

查找&过滤

　　以下为jQuery的内置方法

find

　　$('父元素').find('子元素')

　　查找父元素中的后代元素（不只是子元素）

chidren

　　$('父元素').children('子元素')

　　查找父元素中的子元素（只是子元素）

parent

　　$('子元素').parent()

　　查找子元素的父元素（只是父元素）

　　也有parents的方法（一个子元素的多个父元素），但不推荐使用

next/prev

　　$('元素').next/prev('兄弟元素')

　　查找元素相邻的前一个/后一个兄弟元素

eq

　　$('元素').eq(n)

　　查找当前链式操作中的第n个jQuery对象（其中eq方法里有隐式迭代），可以理解成查找找到的元素中的第n个

　　n可正可负，如果是负数为倒数第n个

siblings

　　$('元素').siblings()

　　找到同级的元素的兄弟元素

filter

　　$('元素').filter()

　　用以在元素的jQuery对象中筛选出和括号内要求一致的元素

　　其中方法内可传入参数包括：字符串（可写入选择器表达式）、jQuery对象、DOM元素、函数