<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
//动态创建dom
$(function(){
var link = "<a href=http://www.123.com>百度</a>"
$('div').click(function(){
$('div:first').append(link);
});
//$('a:first').attr("href","http://www.123.com");
//removeAttr 删除属性
});
var leftSecond = 10;
var intervalId;
$(function(){
var data={"百度":"http:www.baidu.com","谷歌":"www.google.com.hk"};
$.each(data,function(key,value){
var tr = $('<tr><td>'+key+'</td><td><a href='+value+'>'+key+'</td></tr>')
$('#tbSites').append(tr);
});
//prepend 加载到元素的开始
//after 在元素之后添加 (添加兄弟)
//before 在元素之前添加元素(添加兄弟)
//删除ul 下 li 中样式为itemtext的元素,返回被删除的节点
$('#removeli').click(function(){
$('ul li.textitem').remove();
});
//用attr来设置、取得JQ没有封装的属性
$('#agree').attr('disabled',true);
intervalId = setInterval("countDown()",1000);
});
function countDown(){
if(leftSecond <=0){
$('#agree').val('同意')
$('#agree').attr('disabled',false);
clearInterval(intervalId);
}else{
leftSecond--;
$('#agree').val('还剩'+leftSecond+'秒') ;
}
}
</script>
</head>
<body>
<div>123</div>
<table id="tbSites">
</table>
<ul>
<li>abc</li>
<li class="textitem">abc</li>
<li>abc</li>
<li class="textitem">abc</li>
</ul>
<input type="button" id="removeli" value="删除"/>
<input type="button" id="agree" value="同意"/>
<style type="text/css">
.textitem{
background:yellow;
}
</style>
</body>
</html>
Jquery系列-Jquery动态创建dom、attr的使用
最新推荐文章于 2022-05-07 09:45:22 发布