作者：萧氏萧然
DOM节点的创建
DOM创建节点及节点属性
JavaScript
创建流程比较简单，大体如下：
创建节点(常见的：元素、属性和文本)
添加节点的一些属性
加入到文档中
流程中涉及的一点方法：
创建元素：document.createElement
设置属性：setAttribute
添加文本：innerHTML
加入文档：appendChild
querySelector()
方法返回文档中匹配指定 CSS 选择器的一个元素var body =
document.querySelector(‘body’); 查找body元素addEventListener() 方法用于向指定元素添加事件句柄
$(“body”).click(function () {
});
document.getElementById(“leftDiv”).addEventListener(‘click’,
function () {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);
});
jQuery节点创建与属性的处理
上面通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程
创建元素节点：
可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过(“html结构”)$("
")
建为本节点：
与创建元素节点类似，可以直接把文本内容一并描述
$(“
我是文本节点
”)
创建为属性节点：
创建元素节点同样的方式$(“
我是文本节点
”)
我们通过jQuery把上一面的代码改造一下，如下
一条一句就搞定了，跟写HTML结构方式是一样的
$(“
动态创建DIV元素节点
”)
查看下面代码效果时，请注释上面JS的代码，取消下面代码的注释
var $body = $(“body”);
$("#leftDiv").on(‘click’,
function () {通过jQuery生成div元素节点
var div = $(“
动态创建DIV元素节点
”);
将div添加到body内
$body.append(div);
});
$("#leftDiv").click(function () {
var $body =
$(“body”);var div =
$(“
动态创建DIV元素节点
”);
var de = $(“
asdljfaskdlfs
”);
$body.append(div).append(de);
;
DOM节点的插入
DOM内部插入append()与appendTo()
ppend(content|fn):向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
appendTo(content):把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中
简单的总结就是：
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同
append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象
DOM内部插入prepend()与prependTo()
在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo
prepend(content):向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式。
prependTo(content):把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
btnPrepend按钮的点击事件
$("#btnPrepend").click(function () {
.prepend()方法添加
$("#content").prepend(“
这是一个段落标签
”);
});
btnPrependTo按钮的点击事件
$("#btnPrependTo").click(function () {
.prependTo()方法添加
("#content"));});
DOM外部插入after()与before()
after(content|fn):在每个匹配的元素之后插入内容。
参数说明：content 插入到每个目标后的内容 function 函数必须返回一个html字符串。
before(content|fn):在每个匹配的元素之前插入内容。
参数说明：content 插入到每个目标后的内容 function 函数必须返回一个html字符串。
btnAfter按钮的点击事件
$("#btnAfter").click(function
() {$(A).before(B)
$("#demo").after(“
DOM外部插入after()与before()
”);
});
btnBefore按钮的点击事件
$("#btnBefore").click(function ()
{$(A).before(B)
$("#demo").before(“
DOM外部插入after()与before()
”);
});
DOM外部插入insertAfter()与insertBefore()
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
参数说明：content 用于匹配元素的jQuery表达式。
insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
参数说明：content 用于匹配元素的jQuery表达式。
DOM节点删除之empty和remove
empty()删除匹配的元素集合中所有的子节点。
remove([expr])从DOM中删除所有匹配的元素。
参数说明：expr 用于筛选元素的jQuery表达式
要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别
empty方法
严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
empty不能删除自己本身这个节点
remove方法
该节点与该节点所包含的所有后代节点将同时被删除
提供传递一个筛选的表达式，删除指定合集中的元素
btnEmpty按钮的点击事件
$("#btnEmpty").click(function () {
empty()
$("#leftDiv").empty();//移除左边div内的元素
});
btnEmpty按钮的点击事件
$("#btnRemove").click(function () {
empty()
$("#rightDiv").remove();//remove移除整个节点
});
btnTest按钮的点击事件
$("#btnTest").click(function () {
remove表达式参数
找到所有p元素中，包含了3的元素
这个也是一个过滤器的处理
$(“p”).remove(":contains(2)");
});
DOM节点删除之保留数据的删除操作detach()
detach([expr])
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。
var p;
$("#bt1").click(function () {
if (!(“p”).length是否为0.(!0 非零即为真)通过detach方法删除元素
只是页面不可见，但是这个节点还是保存在内存中
数据与事件都不会丢失
p = $(“p”).detach();
});
$("#bt2").click(function () {
把p元素在添加到页面中
事件还是存在
$(“body”).append§;
);
筛选—过滤
eq(index|-index):获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。
类似的有get(index),不过get(index)返回的是DOM对象。
参数说明：index 一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
-index 一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(-1算起)
first() 获取第一个元素
last()获取最后个元素
hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true
这其实就是 is("." + class)。
filter(expr|obj|ele|fn) 筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
$("#myul
li").eq(1).css(‘color’, ‘red’);• CSS
• 字体颜色红色
li").eq(-2).css(‘color’, ‘blue’);
• CSS
• 字体颜色蓝色
$(“li”).first().css(‘font-size’, 20); 设置字体大小
$(“li”).last().css(‘font-size’, 20); 设置字体大小$("#myul