特性和属性
| 方法 |
说明 |
| .attr(key) |
取得特性key的值 |
| .attr(key,value) |
设置特性key的值为value |
| .attr(key,fn) |
将fn的返回值作为key的值 |
| .attr(obj) |
根据传入的键值对象参数设置特性的值 |
| .removeAttr(key) |
删除特性key的值 |
| .prop(key) |
取得属性key的值 |
| .prop(key,value) |
设置属性key的值为value |
| .prop(key,fn) |
将fn的返回值作为key的值 |
| .prop(obj) |
根据传入的键值对象参数设置属性的值 |
| .removeProp(key) |
删除属性key的值 |
| .addClass(class) |
为匹配元素添加传入的类 |
| .removeClass(class) |
为匹配元素删除传入的类 |
| .toggleClass(class) |
对于匹配元素,如果存在类则删除,不存在则添加 |
| .hasClass(class) |
匹配元素中至少一个包含传入的类则返回true |
| .val() |
获取第一个匹配元素的value属性值 |
| .val(value) |
设置每个匹配元素的value属性 |
关于特性和属性:DOM元素的特性(Attribute)和属性(Property)
内容操作
| 方法 |
说明 |
| .html() |
获取第一个匹配元素的HTML内容 |
| .html(value) |
将每个匹配元素的HTML内容设置为value |
| .text() |
获取所有匹配元素的文本,以字符串返回 |
| .text(value) |
将每个匹配元素的文本设置为value |
CSS和尺寸相关
| 方法 |
说明 |
| .css(key) |
取得属性key的值 |
| .css(key,value) |
设置key的值为value |
| .css(obj) |
根据传入的键值参数设置CSS的属性值 |
| offset() |
返回第一个匹配元素相对于视口的坐标(单位是像素) |
| .position() |
返回第一个匹配元素相对.offsetParent()返回元素的坐标(单位是像素) |
| .scrollTop() |
返回第一个匹配元素的垂直滚动位置 |
| .scrollTop(value) |
设置每个匹配元素的垂直滚动位置 |
| .scrollLeft() |
返回第一个匹配元素的水平滚动位置 |
| .scrollLeft(value) |
设置每个匹配元素的水平滚动位置 |
| .height() |
返回第一个匹配元素的高度 |
| .height(value) |
设置每个元素的高度 |
| .width() |
返回第一个匹配元素的度 |
| .width(value) |
设置每个元素的宽度 |
| .innerHeight() |
返回第一个匹配元素的高度(包含内边距,不包含边框) |
| .innerWidth() |
返回第一个匹配元素的宽度(包含内边距,不包含边框) |
| .outerHeight([includeMargin]) |
返回第一个匹配元素的高度(包含内边距和边框,bool为true,则包含外边距,反之不包含) |
| .outerWidth([includeMargin]) |
返回第一个匹配元素宽度(包含内边距和边框,bool为true,则包含外边距,反之不包含) |
DOM插入
| 方法 |
说明 |
| .append(content) |
在每个匹配元素内部的末尾插入content |
| .appendTo(selector) |
将匹配元素插入到与selector匹配的元素的内部的末尾 |
| .prepend(content) |
在每个匹配元素内部的开头插入content |
| .prependTo(selector) |
将匹配元素插入到与selector匹配的元素的内部的开头 |
| .after(content) |
在每个匹配元素外部的后面插入content |
| .insertAfter(selector) |
将匹配元素插入到与selector匹配的元素的外部的后面 |
| .before(content) |
在每个匹配元素部的前面插入content |
| .insertBefore(selector) |
将匹配元素插入到与selector匹配的元素的外部的前面 |
| .wrap(content) |
匹配的每个元素包含在content中 |
| .wrapAll(content) |
匹配的每个元素作为一个整体包含在content中 |
| .wrapInner(content) |
匹配的每个元素的内部内容包含在content中 |
| .unwrap() |
删除元素的父元素(反操作) |
替换、删除和复制
| 方法 |
说明 |
| .replaceWith(content) |
将匹配的元素替换为content |
| .replaceAll(selector) |
将与selector匹配的元素替换为匹配的元素 |
| .empty() |
删除每个元素的子节点 |
| .remove([selector]) |
从DOM中删除节点,selector可以用于筛选 |
| .detach([selector]) |
从DOM中删除节点,selector可以用于筛选,并保留JQuery给元素添加的数据 |
| .clone([withHandlers],[deepWithHandlers]) |
返回匹配元素的副本,也可以复制事件处理程序 |
数据
| 方法 |
说明 |
| .data(key) |
获取第一个匹配元素的key键对应的数据 |
| .data(key,value) |
设置每个元素关联的key对应的数据值为value |
| .removeData(key) |
删除每个元素与key键关联的数据 |
预定义动画
| 方法 |
说明 |
| .show() |
显示匹配元素 |
| .show(speed,[callback]) |
通过高度、宽度和透明度动画显示匹配元素 |
| .hide() |
隐藏匹配元素 |
| .hide(speed,[callback]) |
通过高度、宽度和透明度动画隐藏匹配元素 |
| .toggle([speed],[callback]) |
显示或隐藏匹配元素 |
| .slideDown([speed],[callback]) |
以滑入方式显示匹配元素 |
| .slideUp([speed],[callback]) |
以滑出方式隐藏匹配元素 |
| .slideToggle([speed],[callback]) |
以滑动方式显示或隐藏匹配元素 |
| .fadeIn([speed],[callback]) |
以淡入方式显示匹配元素 |
| .fadeOut([speed],[callback]) |
以淡出方式隐藏匹配元素 |
| .fadeToggle([speed],[callback]) |
以淡入淡出方式显示或隐藏匹配元素 |
| .fadeTo(speed,opacity,[callback]) |
调整匹配元素的透明度 |
自定义动画
| 方法 |
说明 |
| .animate(attrs,[speed],[easing],[callback]) |
针对指定的css属性自定义动画 |
| .animate(attrs,options) |
.animate的底层接口,支持队列控制 |
队列操作
| 方法 |
说明 |
| .queue([queueName]) |
返回第一个匹配元素上的动画队列 |
| .queue([queueName],callback) |
在动画队列的最后添加回调函数 |
| .queue([queueName],newQueue) |
以新队列替换旧队列 |
| .dequeue([queueName]) |
执行动画队列的下一个动画 |
| .clearQueue([queueName]) |
清除所有未执行函数 |
| .stop([clearQueue],[jumpToEnd]) |
停止当前动画,启动排列动画(若有) |
| .finish([queueName]) |
停止当前动画并将所有排列的动画理解提前到它们的目标值 |
| .delay(duration,[queueName]) |
延迟duration毫秒执行队列中的下一个动画 |
| .promise([queueName],[target]) |
在集合中所有排队的操作完成后返回一个待解决的承诺对象 |
来源:淡忘~浅思 » JQuery总结三:DOM完全操作和动画