创建节点
$(function () {
// var box = document.getElementById("box");
//
// var a = document.createElement("a");
// box.appendChild(a);
// a.setAttribute("href", "http://web.itcast.cn");
// a.setAttribute("target", "_blank");
// a.innerHTML = "传智大前端";
$("#box").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');
});
添加节点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
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="http://web.itcast.cn" target="_blank">传智大前端</a>');
// console.log($li);
//
//
// $("div").append('<a href="http://web.itcast.cn" 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 lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
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");
})
//可以清空一个元素的内容
//内存泄露：
//$("div").html("");
//清理门户（）
//$("div").empty();
//
//$("div").remove();
//false:不传参数也是深度复制,不会复制事件
//true:也是深复制，会复制事件
$(".des").clone(true).appendTo("div");
});
</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 {
600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
450px;
height: 160px;
outline: none;
resize: none;
}
ul {
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>
弹幕效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
100%;
height: 100%;
font-family: "微软雅黑";
font-size: 62.5%;
}
.boxDom {
100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
100%;
height: 100px;
background: #666;
position: fixed;
bottom: 0px;
}
.content {
display: inline-block;
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;
300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
}
.btn {
60px;
height: 30px;
background: #f90000;
border: none;
color: #fff;
font-size: 2.4em;
}
span {
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>
</body>
<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>
</html>