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:hiddenopacity: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选择所有类型为文本的元素。