Jquery系列-Jquery动态创建dom、attr的使用

最新推荐文章于 2022-05-07 09:45:22 发布

jackson_fighting

最新推荐文章于 2022-05-07 09:45:22 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/SDN_SUPERUSER/article/details/13434267

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<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>

jackson_fighting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery系列-Jquery动态创建dom、attr的使用

无标题页 //动态创建dom $(function(){ var link = "百度" $('div').click(function(){ $('div:first').append(link); }); //$('a:first').attr("href","http://www.123.com"); //removeAttr 删除属性 }); va
复制链接

扫一扫

专栏目录