jQuery操作DOM

一.插入节点
内部插入
append() 向元素内部追加内容
appendTo() 把元素追加到另一个指定的元素中
prepend()  向元素内部前置内容
prependTo() 把元素前置到另一个指定的元素中
例：
 $("#div1").append("<p>Hello world</p>");
 $("<p>Hello world</p>").apendTo("#div1");


外部插入
after() 在元素之后插入内容
before() 在元素之前插入内容
insertAfter() 把元素插入到另一个指定的元素后面
insertBefore() 把元素插入到另一个指定元素前面


例：
<script src="../jquery-1.8.2.js"></script>
    <script>
        $(function(){
            //向标签中追加个内容
            $('#div1').append('<p>我是P标签</p>');
            $('#div1').append('我是新来的');
            //把这个内容追加到一个标签中
            $('<p>Hello Word</p>').appendTo('#div1');
            //向元素内部最上面追加内容
            $('#div1').prepend('<p>我是前置追加内容</p>');
            //外部追加
            //在元素之后追加内容
            $('#div2').after('<p>我在你后面</p>');
            //在元素之前追加内容
            $('#div2').before('<p>我在你前面</p>');
            //把元素插入到另一个指定的元素后面
            $('<p>在后面追加元素</p>').insertAfter('#div2');
            //把元素插入到另一个指定的元素前面
           $('<p>在前面追加元素</p>').insertBefore('#div2');
        })
    </script>


3.删除节点
empty()  删除元素中所有的子节点
remove([expr]) 从DOM中删除所匹配的元素
detach([expr]) 从DOM中删除所匹配的元素,所有绑定的事件、附加的数据等都会保留下来
例：
<script src="../jquery-1.8.2.js"></script>
    <script>
        $(function(){
            //div点击事件
            $('#div1').click(function(){
                alert('test');
            });
            //删除元素中所有子节点
            $("button:first").click(function(){
                $('#div1').empty();
            });
            //从DOM中删除所匹配的元素
            $('button:eq(1)').click(function(){
                $div1=$('h1').remove();
            })
            //从DOM中删除所匹配的元素,所有绑定的事件、附加的数据等都会保留下来
            $('button:eq(2)').click(function(){
                $div1=$('#div1').detach();
            })
            //找回删除元素
            $('button:eq(3)').click(function(){
                $div1.prependTo('body');
            })
        })
    </script>


4.替换节点
replaceWith(content)  将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector)  用匹配的元素替换掉所有 selector匹配到的元素
例：
<script>
        $(function(){
            $('button:first').click(function(){
                //将所有匹配的元素替换成指定的HTML或DOM元素
                //$('div').replaceWith("<p>我变成了P标签</p>");
                $('div').replaceWith(function(n,val){
                    console.log(n+'-'+val);
                    //return "<h1>第"+index+"个div被替换为"+val+"标题</h1>"
                })
            });
            $('button:last').click(function(){
                //用匹配的元素替换掉所有 selector匹配 到 的元素
                $('<p>我要在前面</p>').replaceAll('div')
            })


        })


    </script>


5.复制节点
clone([bool])  克隆匹配的DOM元素并且选中这些克隆的副本
布尔值（true 或者 false）指示事件处理函数是否会被复制
例：
<script>
        $(function(){
            $(".test").mouseover(function(){
                $(this).css('color','red');
            });
            //如果复制方法里写上true他会把他的事件，css样式都复制过来
            $('button:first').click(function(){
                $('#div1 .test').clone().appendTo('#div2');
            })
            $('button:last').click(function(){
                $('#div1 .test').clone(true).appendTo('#div2');
            })
        })
    </script>


6.包裹节点
wrap(html|ele) 把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap() 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果
wrapall(html|ele) 将所有匹配的元素用单个元素包裹起来
wrapInner(html|ele) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
例：
<script src="../jquery-1.8.2.js"></script>
    <script>


         $(function(){
             $('button:first').click(function(){
                 //逐个对P标签进行包裹
                 $('p').wrap("<div></div>")
             });
             $('button:eq(1)').click(function(){
                 //取消包裹
                 $('p').unwrap("<div></div>")
             });
             $('button:eq(2)').click(function(){
                 //全部的P标签用一个div包裹起来而不是逐个包裹
                 $('p').wrapAll("<div></div>");
             });
             $('button:eq(3)').click(function(){
                 //对标签中的内容进行包裹而不带原有的标签
                 $('p').wrapInner("<div></div>")
             })
         })
    </script>


7.属性操作
attr(name|pro|key)
设置或返回被选元素的属性值,适合于用户自定义属性
prop(name|pro|key)
设置或返回被选元素的属性值设置或返回被选元素的属性值,适合于HTML元素本身就带有的固有属性
removeAttr(name)  从每一个匹配的元素中删除一个属性
removeProp(name|pro|key)  只删除变量的值
例：
<script>
        $(function(){
            //自定义属性用attr可以拿到值而prop拿不到
           console.log($(":radio").attr('act'));
            console.log($(":radio").prop('act'));
            //系统固定属性
            console.log($(':radio').attr('name'));
            console.log($(':radio').prop('name'));
            //更改属性中的值
            $(':radio').prop('name','张三');
            //更改多个值
            $(':radio').prop({type:'checkbox',name:'张思'});
            $(':radio').attr('act','王五');
            //删除属性带变量名都删除
           // $(':radio').removeAttr('act');
            //值删除变量的值
           // $(':radio').removeProp('name');


        })
    </script>


8.CSS样式操作
class类操作
addClass(class|fn) 为每个匹配的元素添加指定的类名
removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类
toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类
hasClass(class)  存在类则返回true，不存在则返回false
css样式属性操作
css(name|pro|[,val|fn])
例：
<script>
      $(function(){
          //为每个元素添加一个指定的类名
          $('dd').addClass('menu');
         //点击的时候让他触发这个类
          $('dd').click(function(){
              //哪个dd有这个效果别的效过就删除
              $(this).addClass('active').siblings('dd').removeClass('active');
      })
          $('#div1').click(function(){
              //如果存在（不存在）就删除（添加）一个类
              $(this).toggleClass('active');
              //检测一个类名有没有存在
              if($(this).hasClass('active')){
                  $(this).html('已赞');
              }else{
                  $(this).html('赞');
              }


          })
      })
    </script>


9.内容操作
html([val|fn])  取得匹配元素的html内容
text([val|fn])  取得匹配元素的文本内容
val([val|fn|arr]) 获得匹配元素的当前值
例：
<script>
        $(function(){
            //这个方法拿内容会把标签里的所有东西都拿到
            console.log($('div').html());
            //这个方法只会拿到内容
            console.log($('div').text());
            //匹配当前元素的当前的值
            console.log($('input').val());


            $('button:last').click(function(){
                $('#num').val(function(index,val){
                        return parseInt(val)+1;
                });
            })
            $('button:first').click(function () {
                $('#num').val(function(index,val){
                    if(val>1){
                        return parseInt(val)-1;
                    }else{
                        return 1;
                    }


                })
            })
        })
    </script>


10.位置操作
offset([coordinates])
获取匹配元素在当前视窗的相对偏移。
返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效
position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
scrollTop([val])
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
scrollLeft([val])
获取匹配元素相对滚动条左侧的偏移。
此方法对可见和隐藏元素均有效
例：
<script>
        $(function(){
            //获取匹配元素在当前视窗的相对偏移
            //console.log($('div').offset().left);
            //console.log($('div').offset().top);
            var left=$('div').offset().left;
            var top=$('div').offset().top;
            $(window).keydown(function(event){
                switch (event.keyCode){
                    case 39:
                            left=left+5;
                            $('div').offset({left:left});
                        break;
                    case 37:
                        left=left-5;
                        $('div').offset({left:left});
                        break;
                    case 38:
                        top=top-5;
                        $('div').offset({top:top});
                        break;
                    case 40:
                        top=top+5;
                        $('div').offset({top:top});
                        break;
                }
            })
            console.log($('#div1').position().top);
            console.log($('#div1').position().left);
        })
    </script>


11.尺寸操作
height([val|fn])
取得匹配元素当前计算的高度值（px）（不包括内填充、不包括边框）
width([val|fn])
取得匹配元素当前计算的宽度值（px）（不包括内填充、不包括边框）
innerHeight()
获取匹配元素内部区域高度（包括内填充、不包括边框）
innerWidth()
获取匹配元素内部区域宽度（包括内填充、不包括边框）
outerHeight([options])
获取匹配元素外部高度（默认包括补白和边框）
options设置为 true 时，计算外边距在内
outerWidth([options])
获取第一个匹配元素外部宽度（默认包括补白和边框）
options设置为 true 时，计算外边距在内
例：
<script>
       $(function(){
          console.log($('div').height());
           console.log($('div').width());
           console.log($('div').innerHeight());
           console.log($('div').innerWidth());
           console.log($('div').outerHeight(true));
           console.log(($('div').outerWidth()));
       })
    </script>