操作DOM
1.什么是DOM:document object model文档对象模型
2.树形结构
3.什么是节点(node):DOM结构中最小单位，元素、文本、属性。。。
创建节点
var $div = $("<div title='div盒子'>我是DOM</div>")
$("body").append($div);
1。插入
var str = $("<a href='#'>123</a>");
str.appendTo($("div"));
("A").append("B")等效("B").appendTo("A")
a.内容插入：(子集)
append():向元素内容增加内容(末尾)
append():向元素内部增加内容(末尾)
appendTo():将要增加的内容增加到元素中
prepend():向元素内部增加内容(前置)
$("div").prepend(str);
prependTo():将要增加的内容增加到元素中
str.prependTo($("div"));
("A").prepend("B")等效("B").prependTo("A")
b.外部插入:(同级)
after()：在元素后面插入内容
$("div").after(str);
insertAfter():在内容插入元素后面
str.insertAfter($("div"));
A.after(B)等效于B.insertAfter(A);
before():在元素前面插入内容
$("div").before(str);
insertBefore():将内容插入元素前面
str.insertBefore($("div"));
A.before(B)等效于B.insertBefore(A);
2删除
a.删除
remove():删除匹配元素
$("div").remove();
$("div").remove(":eq(0)");
b.清空
empty():清空子节点内容
$("div").empty();//不支持参数
3.克隆:创建指定节点的副本
clone()
<b>b</b>
<p>p</p>
<script>
$("b").clone().prependTo("p");
//将b拷贝出来放到p内部前面
//或
$("b").click(function(){
// 在clone方法参数中输入 false | true
$(this).clone().insertAfter(this);
});
</script>
默认为假，假表示不复制；真true：表示复制事件
4.替换：
replaceWith()：
<b>0</b>
<b>1</b>
<b>2</b>
<script>
// i标签不存在，则直接把b下标1的元素替换掉
$("b:eq(1)").replaceWith("<i>x</i>");
// 下标0存在，和下标2替换，相当于2删掉，0移到2的位置
$("b:eq(2)").replaceWith($("b:eq(0)"))
</script>
replaceAll():用来匹配元素替换成指定元素
//"<i>x</i>".replaceAll("b");这种jq方法必须在jq对象下使用。
$("<i>x</i>").replaceAll("b");
a.replaceWith(b) 等效于 b.replaceAll(a);
动画
JavaScript语言本身不支持动画设计，必须通过改变CSS来实现动画效果。
1.显隐动画
原理：
hide()隐藏。通过改变元素的高度宽度和不透明度，直到这三个属性值到0
show()显示。从上到下增加元素的高度，从透明度左到右增加元素的宽度，从0到1增加透明度，直至内容完全可见
参数：
show()
show(speed,callback)
speed:字符串或数字，表示动画将运行多久(slow=0.6秒/normal=0.4/fast=0.2)//单位是毫秒
callback:动画完成时执行的方法(回调函数)
显示和隐藏是一对密不可分的动画形式。
2.显隐切换
toggle():切换元素的可见状态
原理:匹配元素的高度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none
参数：
toggle(speed,callback);
toggle(boolean)
boolean:true为显示false为隐藏
<style>
*{padding:0;margin:0;}
div{ width:300px; height:300px; background:skyblue;}
</style>
<input type="button" value="show" />
<input type="button" value="hide" />
<input type="button" value="toggle" />
<div></div>
<script src="../jquery‐1.11.3.js"></script>
<script>
$(function(){
$("input:eq(0)").click(function(){
$("div").show(3000, function(){alert()});
});
$("input:eq(1)").click(function(){
$("div").hide(3000);
});
$("input:eq(2)").click(function(){
$("div").toggle(3000);
});
});
</script>
滑动
1.显隐滑动效果
slideDown():滑动显示
slideUp():滑动隐藏
参数：
slideDown(speed,callback)
slideUp(speed,callback)
2.显隐切换滑动
slideToggle():显隐滑动切换
参数:
slidecToggle(speed, callback)
<style>
*{padding:0;margin:0;}
div{ width:300px; height:300px; background:skyblue;}
</style>
<input type="button" value="slideDown" />
<input type="button" value="slideUp" />
<input type="button" value="slideToggle" />
<div></div>
<script>
$(function(){
$("input:eq(0)").click(function(){
$("div").slideDown(1500, function(){alert()});
});
$("input:eq(1)").click(function(){
$("div").slideUp(1500);
});
$("input:eq(2)").click(function(){
$("div").slideToggle(1500);
});
});
</script>
渐变：通过改变不透明度
1. 淡入淡出
fadeIn()
fadeOut()
参数：
fadeIn(speed, callback)
fadeOut(speed, callback)
2. 设置淡出透明效果
fadeTo() ：以渐进的方式调整到指定透明度
参数：
fadeTo(speed, opacity, callback)
3.渐变切换:结合fadeIn和fadeOut
fadeToggle()
参数:
fadeOut(speed, callback)
<style>
*{padding:0;margin:0;}
div{ width:300px; height:300px; background:skyblue;}
</style>
<input type="button" value="fadeIn" />
<input type="button" value="fadeOut" />
<input type="button" value="fadeToggle" />
<input type="button" value="fadeTo" />
<div></div>
<script>
$(function(){
$("input:eq(0)").click(function(){
$("div").fadeIn(1500, function(){alert()});
});
$("input:eq(1)").click(function(){
$("div").fadeOut(1500);
});
$("input:eq(2)").click(function(){
$("div").fadeToggle(1500);
});
$("input:eq(3)").click(function(){
$("div").fadeTo(1500, 0.5);
});
});
</script>
自定义：
1. 自定义动画：animate()
$("input:eq(0)").click(function(){
$("div").animate({
width:400,
height:200,
borderLeftWidth:10,
borderBottomLeftRadius:250
}, 1500, function(){alert('该动画效果1500毫秒执行完毕')});
});