jQuery学习日记（三）：常用的DOM操作

jQuery的DOM操作和JavaScript的原生DOM操作思想是一致的，只是操作的对象从DOM元素变成了封装了DOM元素的jQuery对象，这两者是经常结合起来用的，其实还是建议大家在操作DOM的时候使用原生的js，因为jQuery的执行速率和js的执行速率差的不是一个数量级，差距最少的时候执行速率也在10倍左右，一般情况下两者的执行速率保持在40倍左右，虽然目前硬件能力越来越强，不过如果程序非常复杂的话，还是会有明显的卡顿感觉，给用户造成不良的体验。

本文主要记录了常用的DOM操作，结合了jQuery和原生DOM操作，至于实际中采取哪一个，那得取决于自己。

//创建节点

//DOM创建元素
document.createElement("name");
//jQuery创建元素
$(html);  //例如 $("<p></p>");

//DOM创建文本节点
document.createTextNode("text");
//jQuery创建文本节点
$("<tag>text</tag>");  //jQuery直接将文本节点插入到标签当中；

//DOM设置属性
e.setAttribute("key", "value");
//jQuery设置属性
$(<tag key='value'>text</tag>);  //与创建文本方法类似；

在创建元素的使用推荐用原生的DOM操作，因为jQuery需要解析表达式，所以性能上是个问题；

//元素插入

//DOM插入
e.appendChild(chlid);  //该方法会把child元素插入到e子节点的末尾；

e.insertBefore(child, target);  //该方法会把child元素插入到e的target子节点的前面；

//jQuery内部插入
$e.append(child);  //该方法与DOM的e.appendChlid(child)方法对应；

$e.appendTo(target);  //$e.append(child)与$child.appendTo(e)功能相同

$e.prepend(child);  //该方法把child插入到e的子节点的最前面，与DOM操作的e.insertBefore(chlid,e.firstChlid)方法对应；

//jQuery外部插入
$e.after(node);  //在e元素之后插入node；
$e.before(node);  //在e元素之前插入node；
$e.insertAfter(target);  //与after方法相反；
$e.insertBefore(target);  //与before方法相反；

//删除节点

//DOM删除节点
e.removeChild(child);

//jQuery删除节点
$e.remove("expr");
$e.empty("expr");  //如果参数为空则清空所有内容；
$e.detach("expr");  //移除节点。与remove方法不同的是，该方法会保留移除的节点的事件、属性等；

//替换

//DOM替换
e.replaceChile(newNode, oldNode);

$e.replaceWith($node);  //用$node替换原来的$e
$node.repalceAll($e);  //该方法与上面方法效果一致；

//包裹，该操作可以把他理解成给元素加一个外壳

$e.wrap($frame);  //外包，将$frame元素套在$e元素的外面；
$e.wrapInner($frame);  //内包，为$e元素的内容加上一层结构;
$e.wrapAll($frame);  //总包，将匹配的所有$e元素包裹在$frame之下，该操作是破坏性操作，如果匹配的两个元素之间有其他元素，则该元素会被排除在包裹元素的下方；
$e.unwrap();  //卸包

//属性操作

//DOM获取属性与设置属性
e.getAttribute("key");
e.setAttribute("key", "value");

//jQuery获取属性
$e.prop("key");
$e.attr("key");
//这两种方法本体上没区别，但是在不同的操作属性中则效果不一样，必须select的checked属性，prop返回的是bool值，attr和DOM属性返回的是字符串；

//jQuery设置属性
$e.prop("key", "value");
$e.attr("key", "value");

//DOM删除属性
e.removeAttribute("key");
//jQuery删除属性
$e.removeProp("key");
$e.removeAttr("key");

//jQuery类操作
$e.addClass("className");  //添加类
$e.removeClass("className");  //删除类
$e.toggleClass("className");  //切换类样式，当执行此操作的时候，如果有该类的样式，则移除类样式，如果没有该类样式，则添加该类样式；

//内容读写

//DOM内容读写
e.innerText;  //读取元素中的所有文本内容，可以给该内容赋值；
e.innerHTML;  //读取元素中所有HTML内容，可以给该内容赋值；

//jQuery内容读写
$e.text(text);  //如果没有参数则返回内容文本，如果带有参数，则修改内容文本，并返回该元素对象；
$e.html(html); //与上面方法类似；
$e.val();  //该方法也类似于上面的方法，内容是value，常用于表单；

//操作样式属性

//DOM操作
e.style.key; //获取样式名的值，可以赋值

//jQuery操作
$e.css("key", "value");  //设置属性值
$e.css("key");  //获取属性值