jQuery 常用 API
- jQuery 选择器
- jQuery 基础选择器
- jQuery 层级选择器
- jQuery 筛选选择器
- jQuery 筛选方法
- jQuery 的排他思想
- jQuery 样式操作
- 操作 css 方法
- 返回属性值
- 设置一组样式
- 设置多组样式
- 设置类样式方法
- 添加类
- 移除类
- 切换类
- jQuery 效果
- 显示隐藏效果
- 显示
- 隐藏
- 切换
- 滑动效果
- 下滑
- 上滑
- 滑动切换
- 事件切换
- 动画队列及其停止排队方法
- 动画或效果队列
- 停止排队
- 淡入淡出效果
- 淡入效果
- 淡出效果
- 淡入淡出切换
- 渐进方式调整到指定的不透明度
- 自定义动画 animate
- jQuery 属性操作
- 元素固有属性
- 获取属性
- 设置属性
- 元素自定义属性
- 获取属性语法
- 设置属性
- 数据缓存
- 获取数据
- 附加数据
- jQuery 文本属性值
- 普通元素内容
- 获取元素的内容
- 设置元素的内容
- 普通元素文本内容
- 获取元素的文本内容
- 设置元素的文本内容
- 表单的值
- 获取表单的值
- 设置表单的值
- jQuery 元素操作
- 遍历元素
- 创建元素
- 添加元素
- 内部添加
- element 的内部元素的后面
- element 的内部元素的前面
- 外部添加
- 把内容放入目标元素后面
- 把内容放入目标元素前面
- 删除元素
- 删除元素本身
- 删除匹配的元素集合中所有的子节点
- 清空匹配的元素内容
- jQuery 尺寸、位置操作
- jQuery 尺寸
- jQuery 位置
jQuery 选择器
$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号
jQuery 基础选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID 选择器 | $("#id") | 获取指定 id 的元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 匹配 class 类的元素 |
| 标签选择器 | $("div") | 获取同一标签的元素 |
| 并集选择器 | $("div,p,li") | 选取多个条件的元素 |
| 交集选择器 | $("li.current") | 交集元素 |
jQuery 层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $("ul>li") | 获取子代元素 |
| 后代选择器 | $("ul li") | 获取后代元素 |
jQuery 筛选选择器
index 索引号从 0 开始
| 语法 | 用法 | 描述 |
|---|---|---|
:first | $("li:first") | 获取第一个 li 元素 |
:last | $("li:last") | 获取最后一个 li 元素 |
:eq(index) | $("li:eq(2)") | 获取索引号第二个的 li 元素 |
:odd | $("li:odd") | 索引号为奇数的 li 元素 |
:even | $("li:even") | 索引号为偶数的 li 元素 |
:checked | $(".j-checkbox:checker") | 复选框选中的项 |
jQuery 筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
parent() | $("li").parent() | 查找父级 |
parents(selector) | $("li").parents(selector) | 查找先祖 |
children(selector) | $("ul").children("li") | 相当于$(“ul>li”)，最近一级（亲儿子） |
find(selector) | $("ul").find("li") | 相当于$(“ul li”)，后代选择器 |
siblings(selector) | $(".first").siblings("li") | 查找兄弟节点，不包括自己本身 |
nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAll([expr]) | $(".last").prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $('div').hasClass("protected") | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
eq(index) | $("li").eq(2) | 相当于$(“li∶eq(2)”，index从0开始 |
jQuery 的排他思想
$(function () {
$("button").click(function () {
// 隐式迭代
/* $(this).css({"background", "pink"})
$(this).siblings("button").css({"background", ""}) */
// 链式编程
$(this).css({"background", "pink"})
.siblings("button").css({"background", ""})
})
})
jQuery 样式操作
操作 css 方法
返回属性值
参数只写属性名
$(this).css("color")
设置一组样式
参数是属性名，属性值，逗号分隔；属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red");
设置多组样式
参数可以是对象形式，属性名和属性值用冒号隔开，属性可以不用加引号。
$(this).css({
color:"white",
"font-size":"20px"
});
设置类样式方法
添加类
$("div").addClass("current");
移除类
$("div").removeClass("current");
切换类
有就加删除，没有就添加
$("div").toggleClass("current");
jQuery 效果
显示隐藏效果
- speed：三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值 (如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
显示
show([speed,[easing],[fn]]);
隐藏
hide([speed,[easing],[fn]])
切换
toggle([speed,[easing],[fn]])
滑动效果
- speed: 三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值 (如：1000)。
- easing: (Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
下滑
slideDown([speed,[easing],[fn]])
上滑
slideUp([speed,[easing],[fn]])
滑动切换
slideToggle([speed,[easing],[fn]])
事件切换
hover([over,]out)
- over: 鼠标移到元素上要触发的函数（相当于 mouseenter）
- out:鼠标移出元素要触发的函数（相当于mouseleave）
- 如果只写一个函数，则鼠标经过和离开都会触发它
动画队列及其停止排队方法
动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止排队
stop()
$(".nav>li").hover(function () {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
淡入淡出效果
- speed: 三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值 (如：1000)。
- easing: (Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
淡入效果
fadeIn([speed,[easing],[fn]])
淡出效果
fadeOut([speed,[easing],[fn]])
淡入淡出切换
fadeToggle([speed,[easing],[fn]])
渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])
opacity 透明度必须写，取值 0~1 之间。
自定义动画 animate
animate(params,[speed],[easing],[fn])
- params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
jQuery 属性操作
元素固有属性
所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。
获取属性
prop("属性")
设置属性
prop("属性", "属性值")
元素自定义属性
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。
也可以获取 H5 自定义属性。
获取属性语法
attr("属性") // 类似原生 getAttribute()
设置属性
attr("属性", "属性值") // 类似原生 setAttribute()
数据缓存
data () 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
可以读取 HTML5 自定义属性 data-index ，得到的是数字型
获取数据
data("name","value") // 向被选元素附加数据
附加数据
date("name") // 向被选元素获取数据
全选
.checkall全选类.j-checkbox复选框类$(".checkall").change(function() { // console.log($(this).prop("checked")); $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")); if ($(this).prop("checked")) { // 让所有的商品添加 check-cart-item 类名 $(".cart-item").addClass("check-cart-item"); } else { // check-cart-item 移除 $(".cart-item").removeClass("check-cart-item"); } }); // TODO 如果小复选框全被选中 就应该把全选按钮选上，否则全选按钮不选。 $(".j-checkbox").change(function() { if ($(".j-checkbox:checked").length === $(".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } });
jQuery 文本属性值
普通元素内容
相当于原生 inner HTML
获取元素的内容
html()
设置元素的内容
html("内容")
普通元素文本内容
相当与原生 innerText)
获取元素的文本内容
text()
设置元素的文本内容
text("文本内容")
表单的值
相当于原生 value
获取表单的值
val()
设置表单的值
val("内容")
jQuery 元素操作
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
$("div").each(function (index, domEle) { xxx; })
each()方法遍历匹配的每一个元素。主要用 DOM 处理。 each 每一个- 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
- 所以要想使用 jquery 方法，需要给这个 dom 元素转换为 jquery 对象
$(domEle)
$.each(object，function (index, element) { xxx; })
$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象- 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
创建元素
$("<li></li>");
添加元素
内部添加
element 的内部元素的后面
element.append("内容")
element 的内部元素的前面
element.prepend("内容")
外部添加
把内容放入目标元素后面
element.after("内容")
把内容放入目标元素前面
element.before("内容")
删除元素
删除元素本身
element.remove()
删除匹配的元素集合中所有的子节点
element.empty()
清空匹配的元素内容
element.html("")
jQuery 尺寸、位置操作
jQuery 尺寸
参数为空，则是获取相应值，返回的是数字型。
如果参数为数字，则是修改相应值。
参数可以不必写单位。
| 语法 | 用法 |
|---|---|
width()/height() | 取得匹配元素宽度和高度值只算 width/height |
innerWidth()/innerHieght() | 取得匹配元素宽度和高度值包含 padding |
outerWidth()/outerHeight() | 取得匹配元素宽度和高度值包含 padding、border |
outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值包含 padding、borde、margin |
jQuery 位置
offset() 设置或获取元素偏移
- offset () 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
- 该方法有 2 个属性 left、top 。offset ().top 用于获取距离文档顶部的距离，offset ().left 用于获取距离文档左侧的距离。
- 可以设置元素的偏移：offset ({ top: 10, left: 30 });
position() 获取元素偏移
- position () 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
- 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
- 该方法只能获取。
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop () 方法设置或返回被选元素被卷去的头部。
- 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
返回头部
不能是文档 (document) 而是 html 和 body 元素做动画
var boxTop = $(".container").offset().top; $(window).scroll(function() { console.log($(document).scrollTop()); if ($(document).scrollTop() >= boxTop) { $(".back").fadeIn(); } else { $(".back").fadeOut(); } }); // 返回顶部 $(".back").click(function() { // $(document).scrollTop(0); $("body, html").stop().animate({ scrollTop: 0 }); })
