学习要点
- 创建节点
- 插入节点
- 包裹节点
- 节点操作
创建节点
var box = $('<div id="box">节点</div>');
//创建一个节点
$('body').append(box);
//将节点插入到<body>元素内部
插入节点
内部插入节点方法汇总
append(content) 向指定元素内部后面插入节点content
append(function(index,val){})
使用匿名函数向指定元素内部后面插入节点appendTo(content)
将指定元素移入到指定元素content内部后面prepend(content)
向指定元素content内部的前面插入节点prepend(function(index,val){})
使用匿名函数向指定元素内部的前面插入节点prependTo(content)
将指定元素移入到指定元素content内部前面
//$("#div1").append(box); //向指定元素内部的后面插入位置
//box.appendTo($('#div1')); //把节点插入到指定元素的内部最后的位置
//box.prependTo($("#div1")); //把节点插入到指定元素的内部最前面的位置
$("#div1").prepend(box); //向指定元素内部的前面插入位置
外部插入节点的方法
after(content) 向指定元素的外部后面插入节点content
before(content)向指定元素的外部前面插入节点content
insertAfter(content) 将指定节点移到指定元素content外部的后面
insertBefore(content)将指定节点移到指定元素content外部的前面
$("div").after('<span>节点</span>');
//向div的同级节点后面插入span
$("div").before('<span>节点</span>');
//向div同级节点前面插入span
$('span').insertBefore('div')
//将span元素移到div元素外部的前面
$(function(){
var div2 = $("<div id='div2'>2</div>");
var div3 = $("<div id='div3'>3</div>");
var div4 = $("<div id='div4'>4</div>");
var div5 = $("<div id='div5'>5</div>");
$("#div1").after(div2); //向同级节点的后面插入节点
$("#div1").before(div3); //向同级节点的前面插入节点
div4.insertBefore($("#div1")); //将div4节点插入到div1的前面
div5.insertAfter($("#div1")); //将div5插入到div1的后面
})
包裹节点
wrap(html) 向指定元素包裹一层html代码
wrap(ele) 向指定元素包裹一层DOM元素节点
unwrap() 移除一层指定元素包裹的内容,多个需移除很多次
wrapAll(html) 用html将所有元素包裹在一起
wrapAll(ele) 用DOM对象将所有元素包裹在一起
$("#div1").wrap("<p id='div2'></p>"); //在div1外面包裹了一层div2
$("#div1").wrap("<strong></strong>"); //div1的外面包裹了层div元素
$("p").wrapAll("<strong></strong>");
这里特别注意的就是wrap()和wrapAll()的区别
前者是把每个元素当成一个独立体，分别包含一层外层
后者将所有元素作为一个整体作为独立体，只包含一层外层。这两种都是在外层包含
节点操作
- 复制节点 clone
$("body").append($("div").clone(true))
//复制一个节点添加到html中
这里特别注意的就是clone(true)参数可以为空,表示只复制元素和内容，不复制事件行为。而加上事件true参数的话，这个元素附带的事件处理行为也复制出来
- 删除节点
$("div").remove(); //直接删除div元素
remove()不带参数时候，就是删除前面指定的元素。而remove()要是带参数。删除的就是带参数的。删除的是自身。比如
$("div").remove("#div1");只删除id是div1的元素
$("p").remove("#div1"); //只删除id是div1的P元素
$("p").remove(); //删除全部P元素
- 保留事件的删除节点 detach
$("div").detach(); //保留事件行为的删除
- 清空节点 empty
$("div").empty(); //删掉节点里的所有内容
- 替换节点 replaceWith
$("div").replaceWith('<span>节点</span>');
//将div替换成span元素
var box = $("<div>3</div>");
$("p").replaceWith(box);
这里特别注意的就是节点替换完以后，包含的事件全部消失了。
