JQuery基础选择器

Posted 2020-10-05 胡卓

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没法知道他们是否可见，因为元素可见性依赖于适用的样式。

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