对 DOM 的操作
视频锁定
{$ currentTime | date:'mm:ss' $}
{$ timeLeft | date:'mm:ss' $}
在实际应用中,经常需要操作 DOM 元素,比如插入一段 HTML 到指定位置,删除某些被选择的 DOM 段,修改某些元素的内容等。 例如有一个 HTML 页面:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="selector.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
样式表为:
div#container{
background:blue;
border:1px solid black;
width:200px;
height:200px;
}
div#child{
background:yellow;
border:1px solid black;
width:100px;
height:100px;
}
container 是一个蓝色的 200x200 的方框,我们要动态的为这个 div 添加一个子元素,子元素的 ID 为 child:
$(function(){
var container = $("div#container");
$("<div id='child'></div>").appendTo(container);
});
运行结果如上图所示。 再进一步,我们为页面添加一个按钮(clean),点击此按钮将清除新添加的黄色 child 方框。
<input type="button" id="clean" value="clean" />
并添加 JavaScript 代码:
$(function(){
var container = $("div#container");
$("<div id='child'></div>").appendTo(container);
$("input#clean").click(function(){
container.find(#child").remove();
});
});
单击 clean 按钮之后,将会移除新添加的 child 框。
在线练习
{$ activeFileHint $}