您的位置：首页 > Web前端 > JQuery

jquery html

2016-01-15 16:44 549 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<script src="js/jquery-2.1.4.min.js"></script>
<style>
.blue{
color: blue;
}
#div1{
width: 200px;
height: 150px;
padding: 50px;
margin: 20px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="div1"></div>
<p id="one">This is a paragraph.</p>
<button onclick="appendText()">追加文本</button>
<button onclick="removeElement()">删除元素</button>
<button onclick="addClass()">添加类</button>
<button onclick="setCss()">设置css属性</button>
<button onclick="getSize()">获取尺寸</button>

<script>
function appendText(){
var txt1="<p>text1</p>";
var txt2=$("<p></p>").text("text2");
var txt3=document.createElement("p");
txt3.innerHTML="text3";

$("body").append(txt1,txt2,txt3);
}
function removeElement(){
$("p").remove();
}
function addClass(){
$("p").addClass("blue");
}
function setCss(){
$("#one").css({
"color":"red",
"font-size":"15px"
});
}
function getSize(){
var txt="";
txt+="width: "+$("#div1").width()+"<br>";
txt+="height:"+$("#div1").height();
$("#div1").html(txt);
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航