JQuery总结三：DOM完全操作和动画

JQuery总结三：DOM完全操作和动画

特性和属性

.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属性


内容操作

.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])   
在集合中所有排队的操作完成后返回一个待解决的承诺对象