JQuery基础选择器

Posted 胡卓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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没法知道他们是否可见,因为元素可见性依赖于适用的样式。

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

以上是关于JQuery基础选择器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery基础学习01 jQuery选择器

jQuery基础 ——样式篇(jQuery选择器)

jquery基础

jQuery 基础选择器

JQuery基础选择器

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq