用JQ有一段时间了,今天对JQ的一些知识进行一些总结。
首先在JQ中分为几大模块:选择器,属性/CSS,操作,遍历,事件,效果,Ajax,还有核心。
一、选择器
1、基本选择器
.class 用法$(“.class”)
element 用法 $(“element”)
#id 用法 $(“#id”)
Selector1,selectorN 用法 $(“Selector1,selectorN”)
2、层级选择器
parent> child 用法$(“parent> child”)
E>F元素组合器和E F 都作为后代组合,但他们有所不同,更具体的是E>F只会选择第一级的后代。
prev+next选择所有紧跟在prev后的next元素
prev ~ siblings 匹配prev后的所有兄弟元素,具有相同的父元素,并匹配过滤siblings选择器。
3、基本筛选
:animated选择所有正在执行动画的元素
:eq(index)在匹配集合中选择索引为index的元素。(index为正数从0开始计数,负数从最后一个开始计数)
:even选择索引为偶数的元素,从0开始计数。
:odd选择索引为奇数的元素,从0开始计数。
:first选择第一个匹配的元素。
:gt选择匹配集合中所有大于给定index的元素。若index为负数,从最后一个元素开始反向计数。从0开始的索引值。
:lt选择匹配集合中所有小于给定index的元素。若index为负数,从最后一个元素开始反向计数。
:header选择所有标题元素。
:lang选择指定语言的所有元素。例如:$(“div:lang(en)”)将匹配<div lang=”en”>和<div lang=”en-us”>
:last选择最后一个匹配的元素。
:not(selector)选择所有元素,去除不匹配给定的选择器的元素。
:root选择该文档的根元素,在HTML中,永远是<html>元素。
:target选择由文档URI的格式化识别码表示的目标元素。
4、内容筛选
:contains(text)选择所有包含指定文本的元素。Text中的文本是区分大小写的。
:empty选择所有没有子元素的元素(包括文本节点)。
:has()例如:$(“div:has(p)”)匹配一个<div>,那么应该有一个<p>存在于<div>后代元素的任何地方,不是直接的子元素也可以。
注意:因为:has()是一个JQ延伸出来的一个选择器。并且不是CSS规范的一部分,使用:has()查询不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。
:parent选择所有含有子元素或文本的父级元素。
5、可见性筛选
:hidden选择所有隐藏的元素。例如:$(“div:hidden”)
:visible选择所有可见的元素。(在文档中占据一定空间,被认为是可见的)
元素可以被认为是隐藏的几个情况:
他们的CSS display值为none;
他们是type=’hidden’的表单元素;
元素的宽和高都显示的设置为0;
一个祖先元素是隐藏的,因此自身不会在页面上显示。
元素visibility:hidden或opacity:0被认为是可见的,因为他们还占据空间。
6、属性
[attribute|=value]选择指定元素值等于给定字符串或该字符串前缀的元素。
[arrribute*=value]选择指定属性具有包含一个给定子字符串的元素。
[attribute~=value]选择指定属性用空格分隔的值中包含一个给定元素值得元素。
[attribute$=value]选择指定属性是以给定值结尾的元素。区分大小写。
[attribute=value]选择指定属性等于给定值的元素。
[attribute!=value]选择不存在指定属性,或指定属性不等于给定值的元素。等同于:not([attr=value])
[attribute^=value]选择指定属性以给定字符串开始的元素。
[attribute] 选择所有指定元素,属性可以是任何值。
[ ][ ] 多条件属性查询。
7、子元素筛选
:first-child选择所有父级元素下第一个子元素。相当于:nth-child(1)
:last-child 选择所有父级元素下最后一个子元素。
:first-of-type选择所有相同元素名称的第一个兄弟元素。
:last -of-type 选择所有相同元素名称的最后一个兄弟元素。
:nth-child(n)选择他们所有父元素的第n个子元素。从一开始计数。
:nth-last-child(n)选择他们所有父元素的第n个子元素。从最后一个开始计数到第一个。
:nth-last-of-type(n)选择他们所有父元素的第n个子元素。从最后一个开始计数到第一个。
:nth-of-type选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。
:only-child如果某个元素是其父元素唯一的子元素,那么他就会被选中。
:nth-of-type如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配。
8、表单
:button匹配所有按钮和类型为按钮的元素。
:checkbox选择类型为复选框的元素。
:checked选择所有勾选的元素。
:disabled选择所有被禁用的元素。
:enabled选择未被禁用的元素。
:focus选择当前获取焦点的元素。
:file选择文件类型为file的元素。
:p_w_picpath选择所有图像类型的元素。
:input选择所有inputtextarea select button 元素。
:password选择所有类型为密码的元素。
:radio选择所有类型为单选框的元素。
:reset选择类型为重置的元素。等价于[type=’reset’]
:select获取select元素中所有被选中的元素。
:submit选择所有类型为提交的元素。
:text选择所有类型为文本的元素。