常用jQuery

一、选择器

$(“selector”)

1. 基本选择器

1.1 ID选择器

$("#id")
根据id匹配元素

1.2 标签选择器

$(“element”)
根据标签匹配元素

1.3 类选择器

$(".class")
根据类匹配元素

1.4 通配选择器

$("*")
匹配页面上所有元素

2. 层级选择器

2.1 祖先后代选择器

$(“ancestor descendant”)
匹配给定元素下的所有后代元素

2.2 直接后代选择器

$(“parent > child”)
匹配给定父系元素下的所有子元素

2.3 相邻选择器

$(“prev + next”)
匹配所有紧跟在prev元素后的同级元素

2.4 同父兄弟选择器

$(“prev ~ siblings”)
匹配相同prev元素下的所有同级兄弟元素

3. 属性选择器

3.1 属性名

$(“selector[attribute]”)
匹配相应属性名的元素

3.2 属性值等于/不等于

[attribute=“value”] / [attribute!=“value”]
匹配相应属性值等于 / 不等于的元素

3.3 属性值以某值开头/结尾/包含

[attribute^=“value”] / [attribute$=“value”] / [attribute*=“value”]
匹配相应属性值内包含某些值的元素

二、筛选器

$(“selector : sizer”)

1. 首尾元素筛选

• :first 匹配第一个元素
• :last 匹配最后一个元素

2. 排除筛选

:not(selector)
匹配去除所有给定选择器外的元素

3. 奇偶筛选

索引值从0开始

• :odd 匹配所有索引值为奇数的元素
• :even 匹配所有索引值为偶数的元素

4. 比较筛选

索引值从0开始

• :eq 匹配等于索引值的元素
• :gt 匹配大于索引值的元素
• :lt 匹配小于索引值的元素

5. 内容

5.1 文本包含

:contains
匹配包含相应文本的元素

5.2 元素包含

:has
匹配包含相应选择器的元素

5.3 内容空白

:empty
匹配不包含文本和子元素的空元素

6. 子元素

从1开始计数

6.1 子元素首尾位置

:first-child / :last-child
匹配选择器的第一个、最后一个元素

6.2 子元素指定位置

:nth-child(n|even|odd|formula)
匹配选择器的指定位置元素,()中参数包含数值、奇偶、或是包含n的公式

6.3 子元素类型首尾位置类型

:first-of-type / :last-of-type
匹配选择器的第一个、最后一个元素类型的元素

6.4 子元素类型指定位置

:nth-of-type
匹配选择器的指定位置相应类型的元素,()中参数包含数值、奇偶、或是包含n的公式

如果选择器子元素其中有一位类型不是指定选择器的类型，
:nth-child对这一对象进行计数并返回空对象，
:nth-of-type能跳过这一对象直接从下一个相同类型的子元素开始计数

7. 表单

7.1 input相关

:input / :text / :submit 等
匹配 input 相关元素

7.2 表单对象属性

• :enabled /:disabled
  匹配可用、不可用的元素
• :checked
  匹配所有被选中的元素(包括复选框、单选框、下拉框)
• :selected
  匹配所有选中的元素(下拉框)

三、方法

$(“selector”).fn()

1. 属性

prop(“name”|“name”,“value” |fn) / removeprop( )
添加/移除元素属性(属性名|属性名,属性值|函数)

2. 类名

• addClass(class|fn) / removeClass()
  添加/移除元素的类名
• toggleClass()
  切换类名(存在即删除，不存在即添加)

3.内容

• html(val|fn)
  匹配元素的html内容，不含参数时获取当前内容，传入参数时将原来的内容置换为参数内容
• text()
  匹配元素的文本内容，其他同上
• val(val|fn|arr)
  匹配元素的值(元素包含value属性)，参数包含值、函数、数组，不传入参数时获取当前value,传入参数时设置value值

4. 筛选

4.1 过滤

• each(fn)
  遍历相应对象的每个元素，相当于for in 函数
• eq(index)
  获取元素的第几个对象，从0开始计数，index取负值表示倒数
• first()/last()
  获取元素的首尾对象
• filter()
  筛选出包含指定对象/表达式的元素
• map(fn(){callback})
  将所选元素转换成其他数组

4.2 查找

• children()
  查找元素中所有子元素，参数可增加限制条件
• closest()
  从当前元素向上级元素进行匹配，查找到相应的元素位置位置并返回
• find()
  查找所有匹配的元素
• next()
  查找当前元素紧跟之后的同级元素，参数可增加限制条件
• prev()
  查找当前元素紧跟之前的同级元素，参数可增加限制条件
• siblings()
  查找所有同级兄弟元素
• parent()
  查找直接父系元素
• parents()
  查找所有祖系元素

5. CSS样式

css(“name”|“name”,“val”|fn)
添加修改css样式

6. 事件

6.1 页面载入

ready(fn)
DOM载入时进行的操作，页面载入时通常简写为$(function(){})

6.2 事件处理

• on(“event”,fn)
  添加绑定事件，相当于addEventListener
• off()
  移除事件
• trigger(“event”|“event”,fn)
  直接触发事件

6.3 事件切换

• hover(out|over,out)
  鼠标悬浮事件(进入/离开)
• toggle()
  切换显示和隐藏，参数可以添加速度、效果和执行函数

6.4 相关事件

• blur(fn) 失去焦点触发
• focus(fn) 获得焦点触发
• select(fn) 选择input或textarea文本时触发
• scroll(fn) 滚动元素时触发
• submit(fn) 提交表单时触发

7. 文档处理

7.1 内部插入

• append(content|fn)
  向元素内部后增加内容(可以是元素、文本)
• prepend(content|fn)
  向元素内部前增加内容(可以是元素、文本)

7.2 外部插入

• after()
  向元素外部后增加内容(可以是元素、文本)
• before()
  向元素外部后增加内容(可以是元素、文本)

7.3 删除

• empty() 清空所有匹配子元素的内容
• remove() 删除所有匹配的子元素

8. 效果

8.1 基本

• show()
  显示元素，参数包含速度、效果、执行函数
• hide()
  隐藏元素，参数效果同上

8.2 滑动

• slideDown() /slideUp()
  下滑显示/上滑隐藏,参数效果同上
• slideToggle()
  上下滑动显示隐藏进行切换

8.3 延迟

delay(fn,time)
设置延迟，可以定义时间

9. 请求

$.ajax() 请求参数包含

• async
  请求是否异步，默认是true
• url: address
  请求发送地址
• type:“POST”|“GET”
  请求类型,分为post和get
• data:{}
  发送至服务器的数据 dataType 服务器响应的数据类型
• contentType:“application/x-www-form-urlencoded”
  返回文件内容类型，目前为默认
• error：
  请求失败执行函数
• success: function(Result){ }
  请求成功获取执行函数结果