JQuery——DOM操作总结

一.创建节点
1.创建元素

$( function(){
    var $div = $("<div></div>");   //创建div元素
    $("body").append($div);  //添加到body下
})

2.输入文本

$(function(){
    var $div = $("<div>DOM</div>");
    $("body").append($div);
})
//js下用
var txt = document.createTextNode("DOM");
div.appendChild(txt);...执行效率高

3设置属性

$(function(){
    var $div = $("<div title="盒子"></div>");
    $("body").append($div);
})
//可见jQuery简便，但效率低

二.插入内容
1.内部：

• append()：每个元素内部加内容content
• appendTo()：append用法的颠倒
• prepend()：每个元素内部前置内容
• prependTo()：prepend的颠倒

2.外部：

• after()：元素后面
• before()：元素前面
• insertAfter()：所有元素插入到另一个指定的元素集合后面
• insertBefore()：。。。前面

3.删除：

• remove()：从DOM中删除元素（不保留数据）
• empty()：删除所有匹配的元素的子元素
• detach()：从DOM中删除所有匹配元素（会保留数据，再移回DOM时用这个）

三.克隆内容

$(function(){
    $("b").click(function(){
        $(this).toggleClass("off");
    });
    $("b").clone(true).insertAfter("p");
})
//clone(true)复制<b>标签，并把它复制到<p>后，同时保留该标签默认的事件处理函数

四.替换内容

$(function(){
    $("button").click(function(){
        $(this).replaceWith("<div>"+$(this).text()+"</div>");
    });
})
//把当前按钮换成div元素+按钮
//replaceAll和replaceWith操作相反

五.包裹内容
1.外包：

$(function(){
    $("a").wrap("<li></li>");
})_
//<a>被一个<li>元素包裹

2.内包：

$(function(){
    $("a").wrap("<li></li>");
    $("body").wrapInner("<ul></ul>");
})_
//<a>被一个<li>元素包裹

3.卸包：

$(function(){
    $("button").toggle(function(){
         $("a").wrap("<li></li>");
    },function(){
            $("a").unwrap();
    });
})

六.设置属性
1.prop

$(function(){
    $("input").prop({
        disabled:true
     });
})
//prop大多用于设置disabled和checked等是或否的属性

2.attr

$(function(){
    $("img").attr("src",function(index){
        return "images/icon("+(index+1)".png";
    })
})

3.删除属性：
removeProp、removeAttr

七.类操作

• addClass()、removeClass()
• 切换类：toggleClass(…)
• 判断类：hasClass(…)

八.读写文本和值

1.读写html

$(function(){
    var s = $("div").html();
    $("p").html(s);
})
//s保存div的值，再传给p

2.读写文本
$(function(){ var s =$(“div”).text();
$(“p”).text(s);
})
//访问div内容，写入到p中

3.读写值

$(function(){
    $("input").focus(function(){
         if($(this).val()=="请输入文本")$(this).val("");
    })
})
//如果文本的值是。。。就设为空“”

九.定位：

offset就对定位
position相对定位

var o1 = $("div").eq(0).position();
//获取o1的相对偏移位置