jQuery 对dom的操作

最新推荐文章于 2024-07-05 14:21:58 发布

原创最新推荐文章于 2024-07-05 14:21:58 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了一个使用jQuery进行DOM操作的示例，包括获取、修改、插入及删除元素的方法。通过实际代码展示了如何利用jQuery简化这些常见任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-2.2.4.min.js"></script>
		<script>
			$(window).load(function() {
				//获取元素的text,html,val,attr
				$('#bt1').on('click', function() {
					var btn = $('#pID');
					var value = btn.text();
					var html = btn.html();
					var val = $('#inputID').val();
					var href = $('#aID').attr('href');
					alert("text:" + value);
					alert("html:" + html);
					alert("val:" + val);
					alert("href:" + href);
				});
				
				//改变元素的text, html,attr
				$('#bt2').on('click', function() {
						$('#pChangeID').text("我改了你要咋子");
						$('#pChangeHTMLID').html("改革<a href='http://www.163.com'>网易</a>");
						$('#aAttrID').attr({
							'title': '属性',
							'href': 'http://www.163.com',
						});
					})
				
					//元素插入 append, preappend,before,after,
				$('#bt3').on('click', function() {
					$('#pAppendID').append('<a href="http://www.163.com">钢结构</a>');
					$('#preAppendID').prepend('<a href="http://www.163.com">preAppend</a>');
					$('#beforeID').before('<a href="http://www.163.com">before</a>');
					$('#afterID').after('<a href="http://www.163.com">after</a>');
					//插入 html元素，jQuery 对象，dom元素
					var html = '<p>html元素的p标签</p>';
					var jQuery = $('<p></p>').text('jQuery Object');
					var domObject = document.createElement('p');
					domObject.innerHTML = 'dom的元素';
					$('body').append(html, jQuery, domObject);
				});
				
				//元素的删除 remove ,子元素的删除empty
				$('#bt4').on('click', function() {
					$('#removeID').remove();
					$('#emptyID').empty();
				});
			});
		</script>
	</head>

	<body>
		<!--获取元素内容-->
		<button id="bt1">点击获取</button>
		<p id="pID">Jquery获取元素内容<a>html内容</a></p>
		<p><input id="inputID" value="这是一个input" /></p>
		<p><a id='aID' href="http://www.163.com">网易</a></p>

		<!--更改元素内容-->
		<button id="bt2">点击更改</button>
		<p id="pChangeID">奥尔加工加工阿尔</p>
		<p id='pChangeHTMLID'>改变html可以添加标签</p>
		<a id="aAttrID">改变属性</a>

		<!--插入元素内容-->
		<br/>
		<button id="bt3">点击插入</button>
		<p id="pAppendID">插入元素内容</p>
		<p id="preAppendID">插入元素内容</p>
		<p id="beforeID">插入元素内容</p>
		<p id="afterID">插入元素内容</p>

		<!--删除元素的内容-->
		<button id="bt4">点击删除</button>
		<p id="removeID">删除元素内容</p>
		<div id="emptyID" style="width: 200px; height: 200px; border: 1px solid black; background: oldlace;">
			<p>我在div里面，你要咋个</p>
			咋个谔谔
		</div>
	</body>

</html>