<html>
<head>
<title>zz Web</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.redbox{width: 100px;height: 100px;background-color: red;}
.bluebox{width: 100px;height: 100px;background-color: blue}
.yellowbox{width: 100px;height: 100px;background-color:yellow;}
</style>
</head>
<body>
<div id ="c">Hello</div>
</body>
</html>
<script>
//添加元素
$("#d").click(function(){
$("#d").append('<div style="width: 100px;height: 100px;background-color: blue"></div>');
})//append是在所有元素之后加Hello
//而prepend,是在所有元素之前加Hello
//after,是在元素之外加Hello
//before在元素之前加
//删除元素
$("#d").click(function(){
$("#d").remove()
})
//注意remove是把标签清楚点,而empty是把元素内容清除掉
//操作css
//添加
$("#c").click(function(){
$("#c").addClass("redbox");
})
$("#c").keypress(function(){
$("#c").addClass("bluebox");
})
//删除
$("#c").mouseleave(function(){
$("#c").removeClass("redbox");
})
//.toggleClass 表示切换
</script>