jquery文档处理及实例之复制样式条
时间：2022-09-07 11:14
文档处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
实例之复制样式条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
//var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗?
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- <div class="c1">-->
<!-- <p>ppp</p>-->
<!-- </div>-->
<!-- <button>add</button>-->
<!-- <script src="jquery-3.3.1.js"></script>-->
<!-- <script>-->
<!-- $(‘button‘).click(function () {-->
<!-- // $(‘.c1‘).append(‘<h1>hello</h1>‘);-->
<!-- let $ele=$(‘<h1></h1>‘);-->
<!-- $ele.html(‘hello world‘);-->
<!-- $ele.css(‘color‘,‘red‘);-->
<!--// 标签内部插入-->
<!-- // $(‘.c1‘).append($ele); // 追加到p标签后面-->
<!-- // $ele.appendTo(‘.c1‘); // 追加到p标签后面-->
<!-- // $(‘.c1‘).prepend($ele); // 追加到p标签前面-->
<!-- // $ele.prependTo(‘.c1‘); // 追加到p标签前面-->
<!--// 标签外部插入-->
<!-- // $(‘.c1‘).after($ele); // 追加到div标签后面-->
<!-- // $ele.insertAfter(‘.c1‘); // 追加到div标签后面-->
<!-- // $(‘.c1‘).before($ele); // 追加到div标签前面-->
<!-- // $ele.insertBefore(‘.c1‘); // 追加到div标签前面-->
<!--// 替换-->
<!-- // $(‘p‘).replaceWith($ele); // 将创建的h1标签替换p标签-->
<!--// 删除-->
<!-- // $(‘.c1‘).empty(); // div标签还在-->
<!-- // $(‘.c1‘).remove(); // div标签已不存在-->
<!--// 复制-->
<!-- let $ele2=$(‘.c1‘).clone(); // 复制出来的标签都是一样的，连class属性也是，所以此时并不是一个一个的添加-->
<!-- $(‘.c1‘).after($ele2);-->
<!-- })-->
<!-- </script>-->
<!--实例之复制样式条-->
<div class="outer">
<div class="item">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function add(self) {
let $ele3=$(self).parent().clone(); // 把onclick也复制了
$ele3.children(‘button‘).html(‘-‘).attr(‘onclick‘,‘remove(this)‘);
$(‘.outer‘).append($ele3);
};
function remove(self) {
$(self).parent().remove();
};
</script>
</body>
</html>
相关推荐
- 【整理分享】实用又好看的2023香港近15期开奖结果,值得收藏!
- 【整理分享】实用又好看的2023香港今晚开奖结果,值得收藏!
- 【整理分享】实用又好看的2023香港今晚开奖记录,值得收藏!
- 【整理分享】实用又好看的2023香港港六开奖结果,值得收藏!
- 【整理分享】实用又好看的2023年一码一肖100准确,值得收藏!
- 【整理分享】实用又好看的2023年香港港六开奖结果今天,值得收藏!
- 【整理分享】实用又好看的2023年澳门正版资料特马,值得收藏!
- 【整理分享】实用又好看的2023年澳门正版资料免费公开,值得收藏!
- 【整理分享】实用又好看的2023年澳门今晚必开一肖一特,值得收藏!
- 【整理分享】实用又好看的2023今晚澳门开特马.,值得收藏!
电脑软件
本类排行
今日推荐
热门手游
-
街头板球锦标赛破解版
版本：1.0
大小：75.65MB
日期：2024-04-16
-
最佳球会官方版
版本：v1.4.103
大小：890.5M
日期：2024-04-16
-
王者荣耀单机版
版本：v8.2.1.9
大小：1.83G
日期：2024-04-16
-
疯狂足球3D新版
版本：v1.1.1227
大小：79.5M
日期：2024-04-16
-
梦幻足球联盟新版
版本：v10.060
大小：529.3M
日期：2024-04-16
-
像素火影强者挑战破解版
版本：v1.00.18
大小：60.29MB
日期：2024-04-16