jQuery常用API

1. jQuery选择器

1.1 jQuery基础选择器

名称	用法	描述
ID 选择器	$(“#id”)	获取指定 ID 元素
全选选择器	$(“*”)	匹配所有元素
类选择器	$(“.class”)	获取同一类 class 的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

1.2 jQuery 层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	使用 > 符号，获取子一代层级元素
后代选择器	$(“ul li”)	使用空格，后代选择器，获取 ul 下的所有 li 元素

1.3 隐式迭代

• 遍历内部 DOM 元素的过程
• 将匹配到的所有元素进行循环遍历

1.4 jQuery 筛选选择器

语法	用法	描述
:list	$(“li:list”)	获取第一个 li 元素
:last	$(“li:last”)	获取最后一个 li 元素
:eq(index)	$(“li:eq(2)”)	获取第二个 li 元素，索引号从0开始
:odd	$(“li:odd”)	获取索引号为奇数的 li 元素
:even	$(“li:even”)	获取索引号为偶数的 li 元素

1.5 jQuery 筛选方法

语法	用法	描述
parent()	$(“li”).parent()	查找 li 父级元素
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，查找 ul 子一代 li 元素
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”)，查找 ul 后代所有 li 元素
siblings(selector)	$(“.class”).siblings(“.class2”)	查找兄弟节点，不包括自己
nextAll([expr])	$(“.class”).nextAll()	查找当前元素之后的所有同级元素
prevtAll([expr])	$(“.class”).prevAll()	查找当前元素之前的所有同级元素
hasClass(class)	$(“div”).hasClass(“.class”)	检查当前元素是否含有 .class 类，如果有就返回 true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”)，索引从0开始

2. jQuery 样式操作

2.1 操作 css 方法

语法	用法	描述
css(name)	$(this).css(“color”);	返回属性值
css(name , value)	$(this).css(“color”,“red”);	设置或修改样式，数字可以不加引号和单位
css(name : value , name : value )	$(this).css(“color”:“red”,“font-size”:“20px”)	参数以对象形式，设置多组样式

2.2 设置类样式方法

语法	用法	描述
addClass()	$(“div”).addClass(“class”)	添加类
removeClass()	$(“div”).removeClass(“class”)	移除类
toggleClass()	$(“div”).toggleClass(“class”)	切换类

2.3 类操作与 className 区别

• 原生 js 中 className 会覆盖元素原来里面的类名
• jQuery 里面类操作对指定类进行操作，不影响原来的类名

3. jQuery 效果

参数可以省略

• speed：速度（slow，normal，fast 或者毫秒值）
• easing：指定切换效果（swing（默认），linear）
• opacity：透明度（0-1之间）
• fn：回调函数

3.1. 显示隐藏效果

语法	用法	描述
show()	$(“div”).show(speed,easing,fn);	显示
hide()	$(“div”).hide(speed,easing,fn);	隐藏
toggle()	$(“div”).toggle(speed,easing,fn);	切换

3.2. 淡入淡出效果

语法	用法	描述
fadeIn()	$(“div”).fadeIn(speed,easing,fn);	淡入
fadeOut()	$(“div”).fadeOut(speed,easing,fn);	淡出
fadeIToggle()	$(“div”).fadeIToggle(speed,easing,fn);	切换
fadeTo	$(“div”).fadeTo(speed,opacity,easing,fn);	渐变切换

3.3 滑动效果

语法	用法	描述
slideDown()	$(“div”).slideDown(speed,easing,fn);	下滑
slideUp()	$(“div”).slideUp(speed,easing,fn);	上滑
slideToggle()	$(“div”).slideToggle(speed,easing,fn);	切换

3.4 自定义动画

• params：动画 css 属性，对象形式（必须写）

语法	用法	描述
animate()	$(“div”).slideDown(params,speed,easing,fn);	自定义动画

3.5 事件切换

• over：鼠标移动到元素上触发的函数（相当于 mouseenter）
• out：鼠标移出元素触发的函数（相当于 mouseleave）

语法	用法	描述
hover(over,out)	$(“div”).hover(fn1,fn2);	鼠标事件切换

3.6 停止动画队列

语法	用法	描述
stop()	$(“div”).stop()	防止动画效果多次触发，将 stop() 写到动画效果前面会停止上一次动画

4. jQuery 属性操作

4.1 设置和获取元素固有属性

语法	用法	描述
prop(name)	$(“a”).prop(“href”)	获取属性
prop(name,value)	$(“input”).prop(“checked”,true)	设置属性

4.2 设置和获取元素自定义属性值

语法	用法	描述
attr(name)	$(“img”).attr(“src”)	获取属性
attr(name,value)	$(“img”).attr(“width”,“200”)	设置属性

4.3 数据缓存 data()

语法	用法	描述
data(name)	$(“div”).attr(“data-temp”)	获取属性
data(name,value)	$(“div”).attr(“data-temp”,1)	设置属性

5. jQuery 内容文本值

5.1 普通元素内容 html()

语法	用法	描述
html()	$(“p”).html()	获取元素的内容
html(value)	$(“p”).html(“hello”)	设置元素的内容

5.2 普通元素文本内容 text()

语法	用法	描述
text()	$(“p”).text()	获取元素的文本内容
text(value)	$(“p”).text(“hello”)	设置元素的文本内容

5.3 文本框（表单）值 val()

语法	用法	描述
val()	$(“input”).val()	获取元素的文本框值
val(value)	$(“input”).val(“hello”)	设置元素的文本框值

6. jQuery 元素操作

6.1 遍历元素

• index：每个元素的索引号
• domEle：每个 DOM 元素对象
• element：遍历的内容（值）

语法	用法
each()	$(“div”).each(function (index,domEle){})
$.each()	$.each(object,function (index,element){})

6.2 创建元素

$("<li>hello<li>");

6.3 添加元素

1. 内部添加（添加完是父子关系）

语法	用法	描述
append(value)	$(“p”).append(value)：	将内容添加到匹配元素（p）内部的最后面
prepend(value)	$(“p”).prepend(value)：	将内容添加到匹配元素（p）内部的最前面

2. 外部添加（添加完是兄弟关系）

语法	用法	描述
after(value)	$(“p”).after(value)：	将内容添加到目标元素（p）的后面
before(value)	$(“p”).before(value)：	将内容添加到目标元素（p）的前面

6.4 删除元素

语法	用法	描述
remove()	$(“p”).remove()	删除匹配的元素包括自己
remove(“.class”)	$(“p”).remove(“.class”)	删除匹配元素中含有 class 类的元素
empty()	$(“p”).empty()	删除匹配的元素集合中所有的子节点
html(“”)	$(“p”).html(“”)	清空匹配的元素内容（将内容改为空）

7. jQuery 尺寸和位置操作

7.1 jQuery 尺寸

• 参数为空时，获取相应的值（返回的是数字类型）
• 参数为数字时，修改相应的值
• 参数不必写单位

语法	用法	描述
width() / height()	$(“p”).width() / $(“p”).height()	取得匹配元素的宽度值 / 高度值，只算 width / height
innerWidth() / innerHeight()	$(“p”).innerWidth() / $(“p”).innerHeight()	取得匹配元素的宽度值 / 高度值，包含 padding
outerWidth() / outerHeight()	$(“p”).outerWidth() / $(“p”).outerHeight()	取得匹配元素的宽度值 / 高度值，包含 padding，border
outerWidth(options) / outerHeight(options)	$(“p”).outerWidth(true) / $(“p”).outerHeight(true)	取得匹配元素的宽度值 / 高度值，包含 padding，border，margin，options为 true 时，计算边距在内

7.2 jQuery 位置

语法	用法	描述
offset()	$(“div”).offset()	获取匹配元素相对于文档的偏移坐标
offset(value)	$(“div”).offset({top:10,left:10})	设置匹配元素相对于文档的偏移坐标
position()	$(“div”).position()	获取匹配元素相对于带有定位的父级元素的偏移坐标，不可以加参数
scrollTop()	$(“div”).scrollTop()	获取匹配元素相对顶部的偏移（元素超出上边界的高度）
scrollTop(value)	$(“div”).scrollTop(200)	设置匹配元素相对顶部的偏移（元素超出上边界的高度）
scrollLeft()	$(“div”).scrollLeft()	获取匹配元素相对左侧的偏移（元素超出左边界的宽度）
scrollLeft(value)	$(“div”).scrollLeft(200)	设置匹配元素相对左侧的偏移（元素超出左边界的宽度）