Jquery选择器API

JQuery

1、选择器的基本查询条件

1) #id ：根据给定的ID匹配一个元素。

2) .class ：根据给定的class属性匹配元素

3) element ：根据个给定的元素名称匹配所有元素

4) * ：匹配所有元素

5) Selector1,selector2,selectorN ：将每个选择器匹配的元素合并后一起返回

例子：

1） Sizzle(‘input#dept_name’) ：查询id为dept_name的input元素

2） Sizzle(‘-100per’)：查询class属性为input-100per 的input元素

3） Sizzle(‘input’)：查询input元素

4） Sizzle(‘*’) ：查询所有元素

5) Sizzle(‘-100per,input#dept_name’) ：查询class属性为input-100per 和id属性为dept_name的input的所有元素

2、查询层级关系的元素

1）ancestor descendant ：在给定的祖先元素下匹配所有的后代元素(子孙后代)

2) parent >child ：在给定的父类元素下匹配所有的子元素(父子关系)

3) prev + next ：匹配所有紧接在prev元素后面的next元素(并列关系，第一个next元素)

4) prev ~ siblings ：匹配prev元素之后的所有的siblings元素(兄弟关系，之后的所有元素，之前的不算)

3、简单查询元素(条件查询)

1) :first ：匹配找到的第一个元素(所有集合中的第一个元素)

2) :last ：匹配找到的最后一个元素(所有集合中的最后一个元素)

3) :eq(index) ：查询某个位置的元素(从0开始)

4) :even ：查询所有偶数序号的元素(所有集合中偶数序号，从0开始)

5) :odd ：查询所有奇数序号的元素

6) :qt(n) ：查询index大于n的元素 (不包括等于)

7) :lt(n) ：查询index小于n的元素(不包括等于)

8) :not() ：去除所有与给定选择器匹配的元素

9) :header ：匹配如 h1, h2, h3之类的标题元素

10) :animated ：匹配所有正在执行动画效果的元素

例子：

1) Sizzle(‘-100per:lt(2)’)：查询序号小于2的class属性为input-100per的所有input元素

2) Sizzle(‘-100per:gt(2)’)：查询序号大于2的class属性为input-100per的所有input元素

3) Sizzle(‘-100per:even’)：查询所有奇数

4) Sizzle(‘-100per:odd’)

5) Sizzle(‘-100per:not(#usedname)’)

6) Sizzle(‘-100per:first’) ：查询第一个class属性为input-100per的input元素

7) Sizzle(‘-100per:last’)： 查询最后一个class属性为input-100per的input元素

8) Sizzle(‘-100per:eq(2)： 查询第二个class属性为input-100per的input元素

9) Sizzle(‘:header’)：查询到所有的h1，h2，h3之类的标题元素

4、按内容查询页面元素

1) :contains() ：匹配包含给定文本的元素

2) :empty ：匹配所有不包含子元素或者文本的空元素

3) :has ：匹配含有选择器所匹配的元素的元素

4) :parent ：匹配含有子元素或者文本的元素()

例子：

1) Sizzle(‘input:contains(用户名)’) ：查找包含有“用户名”字符串的input元素

2) Sizzle(‘:empty’) ：查找不包含子元素的空元素

3) Sizzle(‘:has(dept_name)’) ：查找到包含有dept_name的元素

4) Sizzle(‘input:parent’) ：查找到input的父元素

5、按可见性查询页面元素

1) :hidden ：匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

2) :visible ：匹配所有的可见元素

例子：

1) Sizzle(‘input:hidden’) ：匹配所有的属性为hidden的input元素

2) Sizzle(‘div:visible’) ：匹配所有的属性为visible的div元素

6、属性查询

1) [attribute] ：匹配包含给定属性的元素。(@已经被废除)

2) [attribute=value] ：匹配给定的属性是某个特定值的元素

3) [attribute!=value] ：匹配所有不含有指定的属性，或者属性不等于特定值的元素(此选择器

等价于:not([attribute=value]))

4) [attribute^=value] ：匹配给定的属性是以某些值开始的元素

5) [attribute$=value] ：匹配给定的属性是以某些值结尾的元素

6) [attribute*=value] ：匹配给定的属性是以包含某些值的元素

7) [selector1][selector2][selectorN] ：复合属性选择器，需要同时满足多个条件时使用。

例子：

1) Sizzle(‘input[class=input-100per]’)：查找所有的class属性为input-100per的input元素

2) Sizzle(‘input[class!= input-100per]’)：查找所有的class属性不等于input-100per的input元素

3) Sizzle(‘input[class^=input]’)：查找所有的class属性以input开头的input元素

4) Sizzle(‘input[class$=100per]’)：查找所有的class属性以100per结尾的input元素

5) Sizzle(‘input[class*=input]’)：查找所有的class属性以包含class属性包含input的input元素

6) Sizzle(‘input[class]’)：查找所有含有class属性的input元素

7) Sizzle(‘input[class][id=dept_name]’)：查找含有class属性，并且id等于dept_name的input元素

7、查询子元素

1) :nth-child ：匹配其父元素下的第N个子或奇偶元素(:eq()只匹配一个元素，而这个将为每一个父元素匹配子元素，:nth-child从1开始，而:eq()从0算起，可以使用:nth-child(even))

2) :first-child：匹配第一个子元素(':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素)

3) :last-child：匹配最后一个子元素(':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素)

4) :only-child：如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配。

例子：

1) Sizzle(‘div input:nth-child(2)’) ：查找div下的第二个input元素

2) Sizzle(‘div input:first-child’) ：查找div下的第一个input 元素

3) Sizzle(‘div input:last-child’) ：查找div下的最后的一个input元素

4) Sizzle(‘div input:only-child’) ：查找只有一个input元素的div元素

8、表单查询

1) :input ：匹配所有 input, textarea, select 和 button 元素

2) :text ：匹配所有的单行文本框

3) :password：匹配所有密码框

4) :radio：匹配所有单选按钮

5) :checkbox：匹配所有复选框

6) :submit：匹配所有提交按钮

7) :image：匹配所有图像域

8) :reset：匹配所有重置按钮

9) :button：匹配所有按钮

10) :file：匹配所有文件域

11) :hidden：匹配所有不可见元素，或者type为hidden的元素

例子：

1) Sizzle(‘:input’) ：查找所有input元素

2) Sizzle(‘:text’) ：查找所有的单行文本框

3) Sizzle(‘:password’) ：查找所有的密码输入框

4) Sizzle(‘:radio’)：查找所有的单选框

5) Sizzle(‘:checkbox’)：查找到所有复选框

6) Sizzle(‘:submit’)：查找到所有的提交按钮

7) Sizzle(‘:image’)：查找到所有的图像域

8) Sizzle(‘:reset’)：查找到所有的重置按钮

9) Sizzle(‘:button’)：查找到所有的按钮元素

10) Sizzle(‘:file’)：查找到所有的文件域

11) Sizzle(‘div:hidden’)：查找到所有type为hidden的div元素

9、表单对象属性：

1) :enabled：匹配所有可用元素

2) :disabled：匹配所有不可用元素

3) :checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

4) :selected：匹配所有选中的option元素

例子：

1）Sizzle(‘input:enabled’)：匹配所有可用的input元素

2）Sizzle(‘input:disabled’)：匹配所有不可用的input元素

3) Sizzle(‘input:checked’)：匹配所有的被选中的复选框元素

4) Sizzle(‘select:selected’)：匹配所有的被选中的option元素

10、使用技巧：

1) 在使用中如果has里面使用contains，在contains包括里面不能带括号。

例子：

1) Sizzle(‘-tree-container > -tree-item > a:contains(it)’)

如果用:

Sizzle(‘-tree-container div:has(a:contains(it)’) 如果it包含括号，jquery会将it里面的括号当做默认的关键字来处理