1.删除操作
(1)remove()
$(selector).remove([selector])
$("#div3").remove(); //删除 id 为 div3 的 div 标签
$("div").remove("#div3"); //删除 div 标签中 id 为 "div3" 的标签
(2)detach()
$(selector).detach([selector])
$("#div3").detach(); //删除 id 为 div3 的 div 标签
$("div").detach("#div3"); //删除 div 标签中 id 为 "div3" 的标签
(3)empty()
$(selector).empty()
$("#div3").empty(); //删除 id 为 div3 的节点的所有子节点
总结:remove 方法和 detach 方法的返回值均为被删除的jQuery节点对象,不同的是,前者指保留该对象节点本身,其他绑定的事件及附加的数据等都会被移除。而后者全部保留。empty 方法则是将指定节点的所有子节点删除,本身保留。
2.复制节点 clone()
$(selector).clone([true]);
带true参数则复制出来的节点具备原节点所绑定的事件处理程序。
3.替换节点
(1)replaceAll()
$(content).replaceAll(selector);
(2)replaceWith()
$(selector).repalceWith(content);
这两种方法在使用时效果完全相同,都是用 content 代替 selector.
4.内部插入
内部插入是将content插入到selector节点内部,包括内部的头部和尾部。插入后的节点与原节点是父子关系。
(1)append()
将content添加到seletor内部的头部。
$(selector).append(content);
$(selector).append(function(index [,html]){…});
如果要获取selector的元素index及html内容,则采用第二种方法。调用的实例如下(html是可选参数):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
<title>内部插入应用示例</title>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
//方法1 用 eq() 选择器找到指定节点
//$("div:eq(1)").append("<b>jQuery内部插入测试</b>");
//方法2 用函数的参数index索引值找到指定节点
$("div").append(function(index, html){
if(index == 1){
return "<b>jQuery内部插入测试</b>" + " " + html;
}
});
});
});
</script>
</head>
<body bgcolor="#EEEEEE">
<h1>内部插入应用实例</h1>
<div>
<button id="btn">测试</button>
<div id="div1">1.水果</div>
<div id="div2">2.蔬菜</div>
<div id="div3">3.肉类</div>
</div>
</body>
</html>
(2)appendTo()
$(content).appendTo(selector);
(3)prepend()
将content添加到seletor内部的尾部。
$(selector).prepend(content);
$(selector).prepend(function(index [,html]){…});
(4)prependTo()
$(content).prependTo(selector);
前两种方法效果相同,后两种方法效果相同。
5.外部插入
外部插入是将content插入到selector节点外部,包括selector节点的前面和后面。插入后的节点与原节点是兄弟关系。
(1)after()
$(selector).after(content);
$(selector).after(function(index [,html]){…});
(2)insetAfter()
$(content).insertAfter(selector);
(3)before()
$(selector).before(content);
$(selector).before(function(index [,html]){…});
(4)insertBefore()
$(content).insertBefore(selector);
使用方法与内部插入类似。
6.包裹操作
(1)wrap()
$(selector).wrap(wrapper);
$(selector).wrap(function(){…});
下面代码中的四种方法效果相同:
$(document).ready(function(){
$("#btn").click(function(){
var newNode = $("<b></b>");
//方法1
//$("#div2").wrap(newNode);
//方法2
//$("#div2").wrap("<b></b>");
//方法3
//$("#div2").wrap(document.createElement("b"));
//方法4
$("#div2").wrap(function(){
return "<b></b>";
});
});
});
(2)unwrap()
$(selector).unwrap();
(3)wrapAll()
$(selector).wrapAll(wrapper);
(4)wrapInner()
$(selector).wrapInner(wrapper);
$(selector).wrapInner(function(){…});
总结:wrap() 和 wrapInner() 的显示效果相同,不同的是前者为 seletor 添加了父节点,而后者为 selector 添加了子节点。
wrap() 和 wrapAll() 显示效果也相同,不同的是前者为 seletor 中的每一个子元素均添加父节点,而后者为整个 seletor 只添加一个父节点