学习要点:
1.创建节点
2.插入节点
3.包裹节点
4.节点操作
DOM中有一个非常重要的功能,就是节点模型,也就是DOM中的"M"。页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点的关系,可以创建、插入、替换、克隆、删除等一系列的元素操作。
一、创建节点
为了使页面更加智能化,有时我们想在动态的html页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点。
var box=$("<div id="box">节点</div>"); //创建一个节点
$("body").append(box) //将节点插入到<body>元素内部
二、插入节点
在创建节点的过程中,其实我们已经演示怎么通过append()方法来插入一个节点,但除了这个方法之余呢,jquery提供了其他几个方法来插入节点。
1.内部插入节点的方法
append(content):向指定元素内部后面擦入节点content
append(function(index,html){}):使用匿名函数向指定元素内部后面插入节点
appendTo(content):将指定元素移入到指定元素content内部后面(不需要创建节点)
prepend(content):向指定元素content内部的前面插入节点
prepend(function(index,html){}):使用匿名函数向指定元素的前面插入节点
prependTo(content):将指定元素移入到指定元素content内部前面
$("div").append("<strong>节点</strong>"); //向div内部插入strong节点
$("div").append(function(index,html){ //使用匿名函数插入节点,html是原节点
return "<strong>节点</strong>";
});
$("span").appendTo("div"); //将span节点移入div内
$("span")appendTo($("div")); //同上
$("div").prepend("<span>节点</span>") ; //将span插入到div内部的前面
wrap(html):向指定元素包裹一层html代码
wrap(element):向指定元素包裹一层DOM对象节点
wrap(function(index){}):使用匿名函数向指定元素包裹一层自定义内容
upwrap():移除一层指定元素包裹的内容
wrapAll(html):用html将所有元素包裹在一起
wrapAll(element):用DOM对象将所有元素包裹在一起
wrapInner(html):向指定元素的子内容包裹一层html
wrapInner(element):向指定元素的子内容包裹一层DOM对象节点
wrapInner(function(index){}):用匿名函数向指定元素的子内容包裹一层
$("div").wrap("<strong><strong>"); //在div外层包裹一层strong
$("div").wrap("<strong>123</strong>"); //包裹的元素可以带内容
$("div").wrap("<strong><em></em></strong>"); //包裹多个元素
$("div").wrap($("strong").get(0)); //也可以包裹一个原生DOM
$("div").wrap(docunment.creatElement("strong")); //临时的原生
$("div").wrap(function(index){ //匿名函数
return "<strong></strong>";
});
$("div").upwrap(); //移除一层包裹内容,多个需移除多次
$("div").wrapAll("<strong></strong>"); //所有div外面只包含一层strong
$("div").wrapAll($("strong").get(0)); //所有div外面只包含一层strong
$("div").wrapInner("<strong></strong>"); //包裹子元素内容
$("div").wrapInner($("strong").get(0)); //DOM节点
$("div").wrapInner(function(index){ //匿名函数
return "<strong></strong>";
});
注意:.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体,分别包含一层外层;后者将所有元素作为一个整体作为一个独立体,只包含一层外层,这两种都是在外层包含,而.wrapInner()在内层包含。
四、节点操作
除了创建、插入和包裹节点,jquery还提供了一些常规的节点操作方法:复制、替换和删除节点。
//复制节点
$("body").append($("div").clone(true)); //复制一个节点添加到HTML中
$("div").clone(true).appendTo("body"); //同上
注意:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为,而加上true参数的话,这个元素附带的事件处理行为也复制出来
//删除节点
$("div").remove(); //直接删除div元素
注意:.remove()不带参数时,删除前面对象选择器指定的元素,而.remove()本身也可以带选择符参数的,比如:$("div").remove("#box")只删除id="box"的div
//保留事件的删除节点
$("div").detach(); //保留事件行为的删除
注意:remove()和detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。
$("div").remove().appendTo("body"); //删除后又添加,事件行为不保留
$("div").detach().appendTo("body"); //删除后又添加,事件行为保留
//清空节点
$("div").empty(); //删除掉节点里的内容,保留空标签
注意:节点被替换后,所包含的事件行为就全部消失了。