java web 之 JQuery动画及节点操作

JQuery动画

常用动画包括元素的显示和隐藏，切换状态，淡入淡出，滑动效果。

显示和隐藏
show() 显示元素
传入参数可以为数值，表示多少毫秒，可以传入slow、normal、fast，如果不传参数，则没有过度效果
hide() 隐藏元素
传入参数可以为数值，表示多少毫秒，可以传入slow、normal、fast，如果不传参数，则没有过度效果
toggle()切换元素的可见状态
传入参数可以为数值，表示多少毫秒，可以传入slow、normal、fast，如果不传参数，则没有过度效果
淡入和淡出
fadeIn() 慢慢淡入
fadeOut() 淡出
传入参数可以为数值，表示多少毫秒，可以传入slow、normal、fast
滑动效果
slideDown()滑动显示
slideUp()滑动隐藏
传入参数可以为数值，表示多少毫秒，可以传入slow、normal、fast

JQuery操作Dom

JQuery设置CSS样式：
css(name,value) 设置元素的单个样式属性，name是设置的属性名，value是设置的属性值
css({name1:value1,name2:value2}) 一次设置多个样式属性，多个样式外面使用{}，每个样式以name:value的形式，多个属性之间使用逗号隔开。
addClass(classname) 给元素添加名为classname的属性，可以添加多个，多个之间用空格隔开
removeClass(classname) 给元素删除名为classname的属性，可以删除多个，多个之间用空格隔开
toggleClass(classname) 切换元素的classname的属性，如果有，则删除，如果没有，则添加
JQuery操作元素的内容：
html() 操作元素的html内容
html() 返回第一个匹配元素的html内容
html(content) 将content设置为所有匹配元素的html内容
text()操作元素的文本内容
text() 返回所有匹配元素的文本内容
text(content) 将content设置为所有匹配元素的文本内容
val() 操作元素的value属性值
val() 返回元素的value值
val(value) 设置元素的value值

JQuery操作节点

创建节点：
$(element)
$(html代码)
插入节点：
插入子节点：
$(A).append(B) 表示将B插入到A的最后一个子节点
$(A).appendTo(B) 表示将A插入到B的最后一个子节点中
$(A).prepend(B) 将B插入到A的子元素的第一个节点
$(A).prependTo(B) 将A插入到B的第一个子节点处。
插入同辈节点
$(A).after(B) 表示将B插入到A之后
$(A).insertAfter(B) 表示将A插入到B之后
$(A).before(B) 表示B插入到A之前
$(A).insertBefore(B) 表示A插入到B之前
替换节点
$(A).replaceWith(B) 使用节点B替换节点A
$(A).repalceAll(B) 使用节点A替换节点B
复制节点
clone() 仅复制节点内容
clone(true) 复制节点内容，及响应事件。
删除节点
remove(); 删除整个节点
detach() 删除整个节点，但保留元素的事件绑定等
empty()清空节点内容

操作节点的属性

attr()获取或者设置节点的属性：
attr(name) 获取name属性值
attr({name1:value1,name2:value2});
remove(name); 删除name对应的属性
遍历子元素
children() 获取所有的子元素
遍历同辈元素
next()后面一个同辈元素
prev()前面一个同辈元素
siblings() 匹配元素前面和后面所有的同辈元素
遍历父辈元素
parent()该元素的父辈元素
parents()该元素的祖先元素