jquery复习

jquery复习

1 选择器

1.1 基本选择器

• Id选择器：$(“#id”)

• class选择器：$(“.class”)

• 元素选择器：$(“element”)

• 复合选择器：.one .two

  • 取交集。多个选择器用空格分隔

• 群组选择器：.one,.two

  • 取并集。多个选择器用逗号分割

1.2 层次选择器

• 后代元素选择器 ：fu hou

  • 两个选择器用空格分隔。获取当前祖元素符合条件的子代元素及其子孙代元素

• 子代元素选择器：father > son

  • 两个选择器用>分隔。获取当前元素符合条件的子代元素

• 紧邻下一个元素选择器：pre + next

  • 两个选择器用+分隔。匹配紧挨着pre的nest元素

• 兄弟元素选择器：one ~ two

  • 两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素
  • 注意区别于：siblings() 与前后位置无关, 只要是同辈节点就可以选取

2 过滤选择器

2.1【1】基础过滤选择器：9个

• selector:first

  • 获取匹配到的第一个元素

• selector:last

  • 获取匹配到的最后一个元素

• selector:not(selTwo)

  • 获取所有匹配的元素除了selTwo元素

• selector:event

  • 获取所有已选择到的元素中，所有索引值为偶数的元素

• selector:odd

  • 获取所有已选择到的元素中，所有索引值为奇数的元素

• selector:eq(index)

  • 获取所有已选择到的元素中，索引值为index的元素

• selector:lt(num)

  • 获取所有已选择到的元素中，所有索引值小于num的元素

• selector:gt(num)

  • 获取所有已选择到的元素中，所有索引值大于num的元素

• selector:header

  • 获取所有标题元素，h1-h6

2.2 【2】内容过滤选择器：4个

• selector:contains(text)

  • 匹配含有该文本的元素

• selector:has(selector2)

  • 匹配含有该选择器的元素

• selector:empty

  • 匹配不含子节点的元素（不含子代元素和文本）

• selector:parent

  • 匹配含子节点的元素

2.3【3】可见度过滤选择器

• selector:hidden

  • 匹配所有的不可见元素

• selector:visible

  • 匹配所有的可见元素

2.4【4】属性过滤选择器

• selector[attribute]

  • 含有该属性的元素

• selector[attribute=value]

  • 含有该属性，并属性值等于value

• selector[attribute!=value]

  • 含有该属性，并属性值不等于value

• selector[attribute^=value]

  • 含有该属性，并属性值以value开头

• selector[attribute$=value]

  • 含有该属性，并属性值以value结尾

• selector[attribute*=value]

  • 含有该属性，并属性值含有value

2.5【5】子元素过滤选择器

• selector:nth-child(index/even/odd/equation)

  • index：从1开始。注意于基础过滤选择器eq(num)：是从0开始。

• selector:first-child

  • 获取匹配的第一个子代元素

• selector:lasr-child

  • 获取匹配的最后一个子代元素

• selector:only-child

  • 获取唯一的子元素（独生子女：只含有一个子元素才会匹配）

2.6【6】表单属性过滤选择器

• :checked 选取所有被选中的元素，用于复选框、单选框、下拉框
  :selected 选取所有被选中的元素，该选择器只适用于
  :focus 选取当前获取焦点的元素
  :text 选取所有的单行文本框()
  :password 选取所有的密码框
  :input 选取所有的,,,元素。
  注意，$(":input")是选中可以让用户输入的标签元素；而$(“input”)是选择名字为input的标签元素。
  :enable 选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(,,,,,)
  :disable 选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。
  :radio 选取所有的单选框
  :checkbox 选取所有的多选框
  :submit 选取所有的提交按钮
  :image 选取所有的input类型为image的表单元素
  :reset 选取所有的input类型为reset的表单元素
  :button 选取所有的input类型为button的表单元素
  :file 选取所有的input类型为file的表单元素

3 DOM操作

3.1 添加节点

3.1.1 内部插入法

序号	方法	含义
1	append(content)	在每个匹配元素的内部结尾处追加内容（content成为其子元素）。 A.append(B) B就成为A的子元素
2	appendTo(content)	将每个匹配的元素都追加到指定元素的内部结尾处（content成为其父元素）。 A.appendTo(B) B就成为A的父元素。
3	prepend（content）	在每个匹配元素的内部开始处加内容 。
4	prependTo（content）	将每个匹配的元素都加到指定元素的内部开始处。

3.1.2 外部插入法

序号	方法	含义
1	after(content)	在每个匹配的元素后面追加元素 。（content在其后，兄弟元素）
2	insertAfter(content)	将每个匹配元素追加到指定元素的后面。
3	before（content）	在每个匹配的元素前面加元素 。（content在其前，兄弟元素）
4	insertBefore(content)	将每个匹配元素追加到指定元素的前面。

3.2 删除节点

序号	方法	含义
1	remove()	从DOM中删除所有匹配的元素 节点被删除后，其包含的子节点同时被删除 返回值是已删除字节的引用
2	empty()	清空节点 清空元素中所有子节点，不含属性节点

3.3 复制节点

序号	方法	含义
1	clone()	克隆匹配的 DOM 元素，返回值为克隆后的副本。 但此时复制的新节点不具有任何行为
2	clone(true)	复制元素的同时也复制元素中的的事件

3.4 替换节点

序号	方法	含义
1	A.replace With(B)	把A都替换成B
2	AreapleAll(B)	把B替换成A