<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" id="btn" value="添加">
<script src="jquery-1.12.4.js"></script>
<script>
$("#btn").click(function(){
$("#box").append('<a href="www.baidu,com" target="_blank">百度</a>');
});
// 传统方法
$(function () {
var box = document.getElementById("box");
var a = document.createElement("a");
box.appendChild(a);
a.setAttribute("href", "http://www.baidu,com");
a.setAttribute("target", "_blank");
a.innerHTML = "百度";
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">
我是内容
</div>
<p>我是外面的p元素</p>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//创建jq对象
var $li = $('<a href="www.baidu,com" target="_blank">百度</a>');
console.log($li);
$("div").append('<a href="www.baidu,com" target="_blank">百度</a>');
// 添加到子元素的最后面
// $("div").append($("p"));
// $("p").appendTo($("div"));
// $("div").prepend($("p"));
// $("p").prependTo($("div"));
// $('div').after($("p"));
$('div').before($("p"));
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 200px;
background-color: teal;
height: 200px;
font-size: 20px;
}
.btn-box {
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h1>城市选择:</h1>
<select id="src-city" name="src-city" multiple>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
<option value="5">西红柿</option>
</select>
<div class="btn-box">
<!--实体字符-->
<button id="btn1"> >> </button>
<button id="btn2"> << </button>
<button id="btn3"> ></button>
<button id="btn4"> < </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#btn1").click(function () {
$("#src-city>option").appendTo("#tar-city");
});
$("#btn2").click(function () {
$("#src-city").append($("#tar-city>option"));
});
$("#btn3").click(function () {
$("#src-city>option:selected").appendTo("#tar-city");
});
$("#btn4").click(function () {
$("#src-city").append($("#tar-city>option:selected"));
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
}
input {
float: right;
}
</style>
</head>
<body>
<div class="box" id="weibo">
<span>评论发布</span>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button id="btn">发布</button>
<ul id="ul">
</ul>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#btn").click(function () {
if($("#txt").val().trim().length == 0) {
return;
}
//就是文本框的值
$("<li></li>").text($("#txt").val()).prependTo("#ul");
$("#txt").val("");
})
});
</script>
</body>
</html>
1、可以清空一个元素的内容
//内存泄露:
// $("div").html("");
//清理门户()
$("div").empty();
2、清除整个元素
$(“div”).remove();
3、克隆
false:不传参数也是深度复制,不会复制事件
true:也是深复制,会复制事件
$(".des").clone(true).appendTo(“div”);
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<p>1111</p>
<p>2222</p>
</div>
<p class='des'>我是外面的p元素</p>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(".des").click(function () {
alert("hehe");
})
//1、可以清空一个元素的内容
//内存泄露:
// $("div").html("");
//清理门户()
$("div").empty();
// 2、清除整个元素
$("div").remove();
//false:不传参数也是深度复制,不会复制事件
//true:也是深复制,会复制事件
$(".des").clone(true).appendTo("div");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹幕大军</title>
<style>
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: "微软雅黑";
font-size: 62.5%;
}
.boxDom {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
width: 100%;
height: 100px;
background: #666;
position: fixed;
bottom: 0px;
}
.content {
display: inline-block;
width: 430px;
height: 40px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
.title {
display: inline;
font-size: 4em;
vertical-align: bottom;
color: #fff;
}
.text {
border: none;
width: 300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
}
.btn {
width: 60px;
height: 30px;
background: #f90000;
border: none;
color: #fff;
font-size: 2.4em;
}
span {
width: 300px;
height: 40px;
position: absolute;
overflow: hidden;
color: #000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">吐槽:</p>
<input type="text" class="text" id="text"/>
<button type="button" class="btn" id="btn">发射</button>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//注册事件 各个颜色的弹幕字体
var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
$("#btn").click(function () {
var randomColor = parseInt(Math.random() * colors.length);
var randomY = parseInt(Math.random() * 400);
$("<span></span>")//创建span
.text($("#text").val())//设置内容
.css("color", colors[randomColor])//设置字体颜色
.css("left", "1400px")//设置left值
.css("top", randomY)//设置top值
.animate({left: -500}, 10000, "linear", function () {
//到了终点,需要删除
$(this).remove();
})//添加动画
.appendTo("#boxDom");
$("#text").val("");
});
$("#text").keyup(function (e) {
if (e.keyCode == 13) {
$("#btn").click();
}
});
});
</script>
</body>
</html>
联系客服