您的位置：首页 > Web前端 > JQuery

jQuery 文档操作 之 文档的插入操作、删除、复制和替换

2017-10-03 11:46 288 查看


<script language="JavaScript" type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//页面加载函数
$(function(){
/*
* 内部插入：给标签添加子标签
* 1.在select中开始添加一项<option value='学前班'>学前班</option>
* 2.在select最后添加一项<option value='研究生'>研究生</option>
* 外部插入：给标签添加(同级标签)兄弟标签
* 1.在select中开始添加一项<option value='学前班'>学前班</option>
* 2.在select最后添加一项<option value='研究生'>研究生</option>
*/
//内部插入
//$("#edu").prepend("<option value='学前班'>学前班</option>");
//$("<option value='学前班'>学前班</option>").prependTo($("#edu"));
//$("#edu").append("<option value='研究生'>研究生</option>");
//$("<option value='研究生'>研究生</option>").appendTo($("#edu"));
//外部插入：
//$("#edu option:first").before("<option value='学前班'>学前班</option>");
//$("<option value='学前班'>学前班</option>").insertBefore($("#edu option:first"));
//$("#edu option:last").after("<option value='研究生'>研究生</option>");
$("<option value='研究生'>研究生</option>").insertAfter("#edu option:last");

});
</script>
</head>
<body>
<select id="edu">
<option value="小学">小学</option>
<option value="中学">中学</option>
<option value="本科">本科</option>
</select>
</body>

<title>文档的删除操作</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
//页面加载函数
$(function(){
/*
* 1.删除id="d1"下的所有子标签
* 2.删除p标签
* 3.删除p标签，同时删除标签绑定的点击事件
* 4.删除p标签，不删除标签绑定的点击事件
*/
//1.删除id=d1 下的所有子标签
//$("#d1").empty();
//2.删除p标签
//$("p").remove();
//$("p").detach();
//3.删除p标签，同时删除标签绑定的点击事件
$("p").click(function(){
alert("删除点击事件");
});
//删除方法有返回值，返回值就是自己
//var deleteP = $("p").remove();
//将返回值添加到id=d2
//$("#d2").append(deleteP);
//这里表明 删除后的返回值 不包含点击事件

//4.删除p标签，不删除标签绑定的点击事件
var deleteP = $("p").detach();
//这里表明detach()删除标签的返回值中含有点击事件
$("#d2").append(deleteP);
});

</script>
</head>
<body>
<div id="d1">
<p>ppppp</p>
<span>spanspan</span>
</div>
<div id="d2">

</div>

<title>复制和替换</title>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
//页面加载函数
$(function(){
/*
* 1.将id=d1中的第一个p克隆一份来替换id=d2的div中的第一个span
* 2.将id=d1中的第一个p克隆一份来替换id=d2的div中的所有span标签
* 3.id=d2的div中第二个span使用cp替换
*/

//1.将id=d1中的第一个p克隆 替换id=d2的div中的第一个span
//获取id=d1 的第一个p标签的副本
var p1= $("#d1 p:first").clone();
//获取id=d2的div中的第一个span
var span1 = $("#d2 span:first");
//span1.replaceWith(p1);
//2.将id=d1中的第一个p克隆，替换id=d2的div中的所有span
var p2 = $("#d1 p:first").clone();
var span2 = $("#d2 span");
//p2.replaceAll(span2);
//3.id=d2的div中的第二个span使用cp替换
//var span3 = $("#d2 span:not(:first):first");
var span3 = $("#d2 span+span");
span3.replaceWith("<p>cp</p>");
});
</script>
</head>
<body>
<div id="d1">
<p>
<a>p1</a>
</p>
<p>p2</p>
</div>
<div id="d2">
<span>span1</span>
<span>span2</span>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航