赣南网 › =微信交流讨论区= › 开发交流 › jquery操作 - 替换元素

+发表新主题

查看: 2205|回复: 0

[代码片段] jquery操作 - 替换元素

[代码片段] jquery操作 - 替换元素

水中花发表于 2016-2-9 00:01:24 浏览: 2205 回复: 0 [显示全部楼层] |只看大图回帖奖励

回帖奖励

|倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1.替换元素

* replaceWith() - 前面的元素是被替换元素,后面的元素是替换元素

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery替换元素</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<button>按钮</button>
<p>这是一个段落.</p>
<script>
// replaceWith前面的元素是被替换元素,后面的元素是替换元素
$("button").replaceWith($("<p>这又是一个段落.</p>"));
</script>
</body>
</html>

复制代码

效果：

* replaceAll() - 就是颠倒了的replaceWith()

2.复制元素 - 实际开发中很少使用

* DOM - cloneNode(boolean)

* Boolean类型参数 - 表示是否复制后代节点,并不复制事件

例如:不给参数

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery复制元素</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<p>这是一个段落.</p>
<script>
//DOM
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("xxx");
}
//复制button按钮,追加在p元素上
var copy = btn.cloneNode();
var p = document.getElementsByTagName("p")[0];
p.appendChild(copy);
</script>
</body>
</html>

复制代码

效果:

点击上方按钮才会弹出事件：

点击下边方框没任何效果。

例如：给参数true，只是复制了按钮中的数据

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery复制元素</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<p>这是一个段落.</p>
<script>
//DOM
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("xxx");
}
//复制button按钮,追加在p元素上
var copy = btn.cloneNode(true);
var p = document.getElementsByTagName("p")[0];
p.appendChild(copy);
</script>
</body>
</html>

复制代码

效果：

同样点击下边按钮没有任何效果。

* jQuery - clone(boolean)

* Boolean类型参数 - 表示是否复制事件(jQuery实现)

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery复制元素</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<p>这是一个段落.</p>
<script>
//jQuety
$("#btn").click(function(){
alert("xxx");
});
$("#btn").clone(true).appendTo($("p"));
</script>
</body>
</html>

复制代码

效果：

点击下方按钮会弹出复制过来的事件：

回复

使用道具举报

精彩评论 (0)

阅读推荐

微信要持续发力：“围剿”四大类违规小程序

微信要持续发力：“围剿”四大类违规小程序

腾讯的流量变现新目标：中老年群体

腾讯的流量变现新目标：中老年群体

LOOK获$2200万融资将构建小程序开放平台

LOOK获$2200万融资将构建小程序开放平台

微选今日正式在微信购物频道上线

微选今日正式在微信购物频道上线

震惊这家智能企业去年营收188亿元

震惊这家智能企业去年营收188亿元

《小程序生态报告》：男性用户要更多

《小程序生态报告》：男性用户要更多

支付宝回复“余额宝将被停”传闻：假的

支付宝回复“余额宝将被停”传闻：假的

微信iOS版本更新：可一键切换两个账号，可调整“发现”页面

微信iOS版本更新：可一键切换两个账号，可

技冠群雄

37 主题	37 帖子	142 积分

Rank: 6 Rank: 6

积分: 142

版块推荐

最新资讯

友情链接

英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫