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的相对偏移位置