jQuery中的节点操作
一、内部插入
prepend
() 将元素添加到指定元素前边。
append
()将元素添加到指定元素后边。
二、包裹
wrap
()元素包裹。
unwrap
()移除元素包裹。
wrapAll
()包裹全部元素。
wrapInner
()移除全部元素包裹。
三、外部插入
before
()将元素添加到指定元素外部的前边。
after
()将元素添加到指定元素外部的后边。
四、替换
replaceWith
和replaceAll
selector.replaceWith
(“element”) 用匹配的元素替换成指定的HTML 元素。
$(“element”)replaceAll(selector)
:方法把被选元素替换为新的 HTML 元素。
五、删除
empty
() 删除元素的所有的子节点。
detach
() dom
会保留事件。
remove
([) dom
元素的事件删除。
六、复制
clone([Even[,deepEven]])
参数是true false 一个参数 代表两个 true 事件处理函数被复制 子元素被复制。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button class="btn">按钮</button>
<button class="btn list">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
/*
* 内部插入
* */
//追加到内容之后
var str='abc';
//后边的参数 可以是字符串 也可以是对象
$('.btn').append(str);
$('<span>abc</span>').appendTo($('.btn'));*/
//jquery里面如何创建dom
var str='<span>123</span>';
$(str).appendTo($('.btn')); //前面不能是字符串*/
$('<div></div>');
//追加到元素的内容之前
//prepend
//prependTo
var str='abc';
$('.btn').prepend(str);
$(str).prependTo($('.btn'));
$('<div>123</div>').prependTo($('.btn'));
console.log($(str));
//jquery 里面的 匿名函数回调基本一致
/*$('.btn').append(function (index){
console.log(index);
return 'abc';
});*/
//外部插入
var str=$('<span>标签</span>');
$('.btn').after(str);
$('.btn').before(str);
var str=$('<span>标签</span>');
str.insertAfter($('.btn'));
str.insertBefore($('.btn'));
//元素包裹
$('.btn').wrap('<div></div>');
$('.btn').wrap($('<div></div>'));
$('.btn').wrap(function (index){
return $('<div></div>');
});
//移除包裹元素
$('.btn').unwrap();
$('.btn').wrap('<div></div>');
//找到的同类元素全部包起来
$('.btn').wrapAll('<div></div>');
//把元素的字内容全部包起来
$('.btn').wrapInner('<div></div>');
//元素替换
$('.btn').replaceWith('<div>123</div>');
$('<div>123</div>').replaceAll($('.btn'));
//元素克隆
$('body').append($('.btn').clone());
//清除所有子节点
$('.btn').empty();
//删除元素
var button=$('.btn');
button.click(function (){
console.log(1);
});
button.remove(); //全部删除
button.detach();
$('.btn').remove('.list');
button[0].click();
</script>
</body>
</html>