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

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

原创最新推荐文章于 2022-05-07 09:45:22 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

20 篇文章

订阅专栏

本文通过一个具体的实例展示了如何使用jQuery进行动态DOM操作，包括创建、追加、删除DOM元素等，并介绍了如何设置和获取元素属性。此外，还提供了一些定时操作及按钮状态更新的方法。

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