目录
1.
举例（原生添加元素）
<script type="text/javascript">
var body = document.querySelector('body');
document.addEventListener('click',function(){
//创建2个div元素
var rightdiv = document.createElement('div')
var rightaaron = document.createElement("div");
//给2个div设置不同的属性
rightdiv.setAttribute('class', 'right')
rightaaron.className = 'aaron'
rightaaron.innerHTML = "动态创建DIV元素节点";
//2个div合并成包含关系
rightdiv.appendChild(rightaaron)
//绘制到页面body
body.appendChild(rightdiv)
},false)
</script>
上述例子更换为jQuery写法
<script type="text/javascript">
var $body = $('body');
$body.on('click', function() {
//通过jQuery生成div元素节点
var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
$body.append(div)
})
</script>
原生添加元素的流程
创建元素：document.createElement
设置属性：setAttribute
添加文本：innerHTML
加入文档：appendChild
原生添加元素的缺点
每一个元素节点都必须单独创建
节点是属性需要单独设置，而且设置的接口不是很统一
添加到指定的元素位置不灵活
最后还有一个最重要的：浏览器兼容问题处理
创建 元素
$("<div></div>")
$("<div>我是文本节点</div>")
$("<div id='test' class='aaron'>我是文本节点</div>")
添加 元素
追加至结尾（作为子元素）
$("p").append("Some appended text.");
$("<b>Hello World!</b>").appendTo("p");
追加至开头（作为子元素）
$("p").prepend("<p>hello</p>","<p>world</p>");
$("<b>Hello World!</b>").prependTo("p");
元素之后之前添加（作为兄弟元素）
$("img").after("Some text after");
$("img").after("Some text after","Some text after");
$("img").before("Some text before");
$("img").before("Some text before","Some text before"));
$("<span>Hello world!</span>").insertAfter("p");
$("<span>Hello world!</span>").insertBefore("p");
删除 元素
删除所有子孙元素
$("#div1").empty();
删除（自己和所有子孙元素，移除元素内部的一切---包括绑定的事件及与该元素相关的jQuery数据）
$("#div1").remove();
删除所有class为italic的p元素
$("p").remove(".italic");
删除所有包含3字符串的p元素
$("p").filter(":contains('3')").remove()
$("p").remove(":contains('3')")
删除(自己和所有子孙元素，保留所有绑定的事件、附加的数据。当你append之后，又重新回到了文档流中。就又显示出来了）
$("p").detach();
删除p的所有父元素
$("p").unwrap();
为了防止"内存泄漏"，所以一定要注意，绑了多少事件，不用的时候一定要记得销毁
detach()举例
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.innerHTML)
})
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //去重
//通过detach方法删除元素
//只是页面不可见，但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("div").detach()
});
$("#bt2").click(function() {
//把p元素在添加到页面中
//事件还是存在
$("body").append(p);
});
</script>
复制/替换 元素
克隆元素以及子孙元素
$("p").clone() // 不包含：事件与数据
$("div").clone(true) // 包含：事件与数据
替换(会删除原节点及子孙节点，以及相关联的数据和事件)
返回的是原节点
$("<b>Hello world!</b>").replaceAll($("p"));
$("p").replaceWith("<b>Hello world!</b>");
包裹p元素(添加父元素)
$("p").wrap("<div></div>");
$('p').wrap(function() {
return '<div></div>';
})
$('p').wrapAll('<div></div>'); // 增加一个共同的父元素
$('p').wrapAll(function() { // 每一个p一个单独的父元素
return '<div><div/>';
})
给p元素添加子元素（该元素包含了原来的所有子元素）
$("p").wrapInner("<b></b>");
$('p').wrapInner(function() {
return '<b></b>';
})
解包裹p元素(删除父元素)
$('p').unwrap('')
$('p').unwrap(function() {
return '<div></div>';
})
父辈、子孙、兄弟 元素
parent（父元素）
直接父元素（每一个元素的父元素）
$("span").parent();
$('span').parent(':last') // 可传入选择器作为参数
parents(父辈元素)
所有父辈元素
$("span").parents();
$("span").parents("ul"); // 所有url父辈元素（可传入选择器作为参数）
closet(自己或父辈元素)
最先匹配的自己或父辈元素
$("div").closet('li')
$('span').offsetParent()
直到div元素的所有父元素
$("span").parentsUntil("div");
注意：$( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。
children（直接子元素）
所有直接子元素（元素集合的每一个元素的直接子元素）
可将选择器作为参数传入
$("div").children();
所有子元素类型为p且class为myClass的直接子元素
$("div").children("p.myClass");
取元素集合最后一个元素的直接子元素
$('.div').children(':last')
find（子孙元素,参数为必需）
所有子孙元素
$("div").find("*");
所有span子元素
$("div").find("span");
$('div', 'span') // 等价
第三个
$("body").find("div").eq(2);
最后一个
$("p").find("span").end()
next（后面的相邻兄弟元素）
后面的兄弟元素（每一个元素的后面相邻兄弟元素）
$("h2").next();
$("h2").next(':first'); // 可传入选择器作为参数
所有后面的兄弟元素
$("h2").nextAll();
所有后面的直到h6的兄弟元素
$("h2").nextUntil("h6");
prev（前面的相邻兄弟元素）
前面的相邻兄弟元素
$("h2").prev();
$("h2").prev(':first'); // 可传入选择器作为参数
前面的所有兄弟元素
$("h2").prevAll();
所有前边直到h6（不含）的兄弟元素
$("h2").prevUntil("h6");
id为p的元素一直往上到id为hh（不含）所有dd元素
$("#p").prevUntil(document.getElementById('hh'), "dd")
siblings（所有兄弟元素）
所有兄弟元素
$("h2").siblings();
$("h2").siblings("p");
网友评论