JQuery基础选择器

jQuery选择器类似css选择器，所以学习起来也更加容易

1.基础选择器

1.All Selector("*")

描述：选择所有元素

语法：$("*")

注意：实践证明，由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也许谨慎使用

2.Class Selector(".class")

描述：选择给定样式类名的所有元素

语法：$(".class")

3.Element Selector("element")

描述：根据给定的(html)标记名称选择所有元素

语法：$("element")

4.ID Selector("#id")

描述：选择一个给定属性的单个元素。

语法：$("#id")

5.Multiple Selector("selector1,selector2,selectorN")

描述：将每个选择器匹配到的元素合并后一起返回

语法：$("selector1,selector2,selectorN")

2.属性选择器

1.Attribute Contains Prefix Selector [name|="value"]

描述：选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连接符"-"）的元素

语法：$("[attribute|=\'value\']")

注意：引号是可选的，可以是一个不带引号的单词或一个带引号的字符串

2.Attribute Contains Selector [name*="value"]

描述：选择指定属性具有包含一个给定的子字符串的元素 （选择给定的属性是以包含某些值的元素）

语法：$("[attribute*=\'value\']")

3.Attribute Contains Word Selector [name~="value"]

描述：选择指定属性用空格分隔的值中包含一个给定值的元素。

语法：$("[attribute~=\'value\']")

注意：前后都要用空格分隔

4.Attribute Ends Width Selector[name="value"]

描述：选择指定属性是给定值的元素

语法：$("[attribute=\'value\']")

5.Attribute Not Equal Selector[name!="value"]

描述：选择不存在指定属性，或者指定的属性值不等于给定值的元素

$("[attribute!=\'value\']")

6.Attribute Ends Width Selector[name$="value"]

描述：选择指定属性是给定值结尾的元素，这个比较是区分大小写的。

语法：$("[attribute$=\'value\']")

7.Attribute Starts Width Selector[name^="value"]

描述：选择指定属性是给定值开始的元素。

语法：$("[attribute^=\'value\']")

8.Has Attribute Selector[name]

描述：选择所有具有指定属性的元素，该属性可以是任何值。

语法：$("[attribute]")

9.Multiple Attribute Selector[name1="value1"][name2="value2"]

描述：选择匹配所有指定的属性筛选器的元素。

语法：$("[attributeFilter1][attributeFilter2][attributeFilterN]")

3.基础过滤

1.:animated Selector

描述：选择所有正在执行动画效果的元素

语法：$(":animated")

2.:eq()Selector

描述：在匹配的集合中选择索引值为index的元素

语法：

(1) $(":eq(index)") :index:要匹配元素的索引值（从0开始计数）

(2) $(":eq(-index)") :index:呀匹配元素的索引值（从0开始计数），从最后一个元素开始倒计数。

3.even Selector

描述：选择索引值为偶数的元素，从0开始计数，也可查看odd(奇数).

语法：$(":even")

注意：这是基于0的索引，所以even是选择第一个元素，第三个元素，依次类推在匹配。

4.first Selector

描述：选择第一个元素

语法：$(":first")

5.focus Selector

描述：选择当前获取焦点的元素。

语法：$(":focus")

6.header Selector

描述：选择所有标题元素，像h1,h2,h3等.

语法：$(":header")

7.last Selector

描述：选择最后一个元素

语法：$(":last")

8.:gt() Selector

描述：选择匹配集合中所有大于给定index(索引值)的元素。

语法：$(":gt(index)")或$(":gt(-index)")

9.:lt() Selector

描述：选择匹配集合中所有小于给定index(索引值)的元素。

语法：$(":lt(index)")或$(":lt(-index)")

10.:not() Selector

描述：选择所有元素去除不匹配给定的选择器元素。

语法：$(":not(selector)")

4.子元素过滤

1.first-child Selector

描述：选择所有父级元素下的第一个元素。

语法：jQuery(":first-child")

2.last-child Selector

描述：选择所有父级元素下的最后一个元素。

语法：jQuery(":last-child")

3.first-of-type Selector

描述：选择所有相同的元素名称的第一个兄弟元素。

语法：jQuery(":first-of-type")

4.last-of-type Selector

描述：选择所有相同的元素名称的最后一个兄弟元素。

语法：jQuery(":last-of-type")

5.nth-child() Selector

描述：选择的所有父元素的第n个子元素。

语法：jQuery(":nth-child(index/even/odd/equation)")

5.内容过滤

1.:contains() Selector

描述：选择所有包含指定文本的元素

语法：jQuery(":contains(text)")

注意：text:用来查找的一个文本字符串，这是区分大小写的。匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。

2.:empty Selector

描述：选择所有没有子元素的元素（包括文本节点）

语法：jQuery(":empty")

3.:has() Selector

描述：选择元素其中至少包含指定选择器匹配的一种元素

语法：jQuery(":has(Selector)")

4.:parent Selector

描述：选择所有含有子元素或者文本的父级元素

语法：jQuery(":parent")

6.表单

1.:button Selector

描述：选择所有按钮元素和类型为按钮的元素。

语法：jQuery(":button");

2.:checkbox Selector

描述：选择所有类型为复选框的元素。

语法：jQuery(":checkbox")

3.:checked Selector

描述：匹配所有勾选的元素

语法：jQuery(":checked")

4.:disabled Selector

描述：选择所有被禁用的元素

语法：jQuery(":disabled")

5.:enabled Selector

描述：选择所有可用的（注：未被禁用的元素）元素

语法：jQuery(":enabled")

6.:file Selector

描述：选择所有类型为文件的元素

语法：jQuery(":file")

7.:focus Selector

描述：选择当前获取焦点的元素

语法：jQuery(":focus")

8.:image Selector

描述：选择所有图像类型的元素

语法：jQuery(":image")

9:input Selector

描述：选择所有input,textarea,select和button元素

语法：jQuery(":input")

10.:password Selector

描述：选择所有类型为密码的元素

语法：jQuery(":password")

11.:radio Selector

描述：选择所有类型为单选框的元素

语法：jQuery(":radio")

12.:submit Selector

描述：选择所有类型为提交的元素

语法：jQuery(":submit")

7.层级

1.Child Selector ("parent > child")子元素选择器

描述：选择所有指定"parent"元素中指定的"child"的直接子元素

语法：jQuery("parent > child")

注：

parent：任何有效的子元素

child：用来筛选子元素的选择器

2.descendant Selector(后代选择器)

描述：选择给定的祖先元素的所有后代元素

语法：jQuery("ancestor descendant")

注：

ancestor；任何有效的选择器。

descendant：一个用来筛选后代元素的选择器

3.next adjacent selector("prev + next")相连选择器

描述：选择所有紧接在"prev"元素后面的"next"元素

语法：jQuery("prev + next")

注：

prev：任何有效的选择器

next：用于筛选跟在"prev"后面的元素的选择器

4.Next Siblings Selector("prev ~ siblings")

描述：匹配"prev"元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤"siblings"选择器

语法：jQuery("prev ~ siblings")

注：

prev：任何有效的选择器

siblings：一个选择器来过滤第一选择器以后的兄弟元素

("prev + next")和("prev ~ siblings")之间最值得注意的不同点是他们各自的可及之范围，前者只达到紧随的同级元素，后者扩展了该达到跟随其呃所有同级元素

8.jQuery扩展

:animated Selector : 选择所有正在执行动画效果的元素

Attribute Not Equal Selector[name!="value"]：选择不存在指定属性，或者指定的属性值不等于给定值的元素

:button Selector : 选择所有按钮元素和类型为按钮的元素。

:checkbox Selector : 选择所有类型为复选框的元素

:eq() :even :file :firt :gt() :has() :header :hidden :image :input :last

:lt() :parent :password :radio :reset :selected :submit :text :visible

9.可见性过滤

1.hidden selector

描述：选择所有隐藏的元素

语法：jQuery(":hidden")

补充：

元素以下几种情况可以被认为是隐藏：

1）他们的css display值是none。

2）他们是type="hidden"的表单元素。

3）他们的宽度和高度都设置为0。

4）一个祖先元素是隐藏的，因此该元素是不会在页面上显示。

2.visible selector

描述：选择所有可见元素。

语法：jQuery(":visible")

如果元素占据文档中一定空间，元素被认为是可见的。可见元素的宽度或高度，是大于零的。

所以元素的visibiliy:hidden 或 opacity:0被认为是可见的，因为他们仍然占用空间布局。

不在文档中的元素被认为是隐藏的；jQuery没法知道他们是否可见，因为元素可见性依赖于适用的样式。

隐藏元素上做动画，元素被认为是可见的，知道动画结束。显示元素上做动画，在动画的开始处钙元素被认为是可见的。