jQuery~DOM基础操作

操作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{ 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{ 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{ 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({
         400,
         height:200,
       borderLeftWidth:10,
         borderBottomLeftRadius:250
    }, 1500, function(){alert('该动画效果1500毫秒执行完毕')});
 });