2.jQuery操作DOM元素

最新推荐文章于 2024-07-05 14:21:58 发布
最新推荐文章于 2024-07-05 14:21:58 发布
阅读量173 收藏
点赞数
文章标签： js jquery javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40733968/article/details/107717632
版权

一.jQuery操作DOM元素

1.基础DOM操作

方法名			描述
html()			获取元素中HTML内容
html(value)		设置元素中HTML内容
text()			获取元素中文本内容
text(value)		设置元素中文本内容
val()			获取表单中的文本内容
val(value)		设置表单中的文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery对DOM的操作</title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>这是一行标题</h1>
		<input type="text" name="" id="" value="23121" />
		<input type="text" name="" id="" value="23121" />
	</body>
</html>
<script type="text/javascript">
	//设置标签中的文本内容
	$("h1").text("设置后的文本内容")
	//获取标签中的文本内容
	console.log($('h1').text());
	
	//重新设置的html元素
	$("h1").html("<h5>重新设置的html元素</h5>")
	console.log($('h1').html());
	
	//val()无参调用，取出数组中第一个对象的value值
	var obj=$('input').val();
	//alert(obj)
	 // val(value) 有参调用，设置数组中所有DOM对象的value值
	 $('input').val("000")
</script>

2.添加属性的方法

1.attr
		 attr(key,value) 设置元素的属性
		 attr(key) 获取元素的属性
		 attr({key:value,key:value}) 设置多个元素属性
		 removeAttr(key) 移除元素的key属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" style="background-color: red;" align="right">aaa</div>
		
		<div id="box" align="center">
			111
		</div>
	</body>
</html>
<script type="text/javascript">
	 // attr(key,value) 设置元素的属性
	 $('#app').attr('align','center')
	 //	 attr(key) 获取元素的属性
	 console.log($('#app').attr('align'));
	 // removeAttr(key) 移除元素的key属性
	 $('#box').removeAttr('align');
	 //attr({key:value,key:value}) 设置多个元素属性
	 $('#box').attr({class:'red',id:'app2'})
</script>

3.添加class属性

添加class属性可以通过attr来实现,但是提供了一个addClass()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.aClass {
				width: 200px;
				height: 200px;
				background: red;
			}

			.bClass {
				width: 200px;
				height: 200px;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div id="app">

		</div>
		<div id="box" class="aClass">
			
		</div>

		<button type="button">切换按钮</button>
	</body>
</html>
<script type="text/javascript">
	//给app 添加一个aClass属性
	$('#app').addClass('aClass')
	//切换样式
	$('button').click(function() {
		//切换class样式
		$('#box').toggleClass('bClass');
	})
</script>

4.遍历DOM元素 each

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<h1 class="aClass">111</h1>
			<h1 class="aClass">222</h1>
			<h1 class="aClass">333</h1>
			<h1 class="aClass">444</h1>
		</div>
	</body>
</html>

<script type="text/javascript">
	var arr = document.getElementsByTagName('h1');
	$.each(arr, function(index, ele) {
		//alert(index+"==="+ele);
		if (index == 1) {
			$(ele).css('color', 'red');
		}
	})
	//index 当前元素的索引，ele 当前的原生DOM对象
	$('.aClass').each(function(index, ele) {
		//alert(index + "===" + ele);
		if (index == 2) {
			$(ele).css('color', 'red');
		}
	})
</script>

5.创建DOM节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1">
			111
		</div>
		<div id="div2">
			222
		</div>
		
		<div id="div3">
			333
		</div>
		<span id="sp1">
			我是sp1
		</span>
		<h1>我是h1</h1>
		
		<h2>我是h2</h2>
	</body>
</html>
<script type="text/javascript">
	$('#div1').append('<span>一行元素</span>')
	$('#div2').append(function(index, html) {
		if (index == 0) {
			return '<span>一个元素</span>'
		} else {
			return "";
		}
	})
	//选中#sp1 移动到 h1元素内部的后面
	$('#sp1').appendTo('h1');
	$('h2').prepend('<span>一个元素</span>');
</script>

6.插入节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<span id="sp1">111</span><br>
		<span id="sp2">222</span><br>
		<span id="sp3">222</span>
		<div id="div">我是div</div>
	</body>
</html>
<script type="text/javascript">
	//after(content)	向指定元素的外部后面插入节点 content
	$('#div').after('aaa');
	//将 span 元素移到 div 元素外部的后面
	$('#sp1').insertAfter('#div'); 
</script>

7.包裹节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1">111</div>
		<div id="div2">222</div>
		<div id="div3">333</div>
	</body>
</html>
<script type="text/javascript">
	//wrap(html)	向指定元素包裹一层 html 代码
	$('#div1').wrap('<strong></strong>');//在 div 外层包裹一层 stron
	
	//去除包裹
			$('#div1').unwrap();
			$('#div3').wrapInner('<div>2222</div>')
</script>
pigpigpi
关注
[jQuery]：jQuery的DOM元素操作方法
我只是个程序员。
09-27 1836
jQuery的DOM操作：创建节点、添加节点、删除节点、复制节点、替换节点和包裹节点。也就是对文档中的元素节点、属性节点和文本节点进行增删改查，只不过在原生JS基础上进行封装和增加了许多方法，所以能够更方便的操作DOM。 获取元素节点        jQuery获取DOM元素是使用选择器，至于选择器的使用这里就不介绍了，请戳jQuery选择器总结。 如果有时候为了提高运行效率，可以先用原生JS
jQuery 实现DOM元素拖拽交换位置的实例代码
10-15
### jQuery 实现 DOM 元素拖拽交换位置的原理和技术点 在网页中实现 DOM 元素的拖拽功能能够让用户通过直观的方式进行元素的排序、移动等操作，从而提升网站的交互性和用户体验。本文介绍利用 jQuery 库来实现 DOM ...
jQuery操作DOM元素
weixin_33889245的博客
01-19 302
jQuery操作DOM元素 　　HTML DOM常见操作: 　　查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.   查找节点 　　关于节点的查找,是利用选择器完成的. 　　在上一篇jQuery选择器中已经介绍过了:http://www.cnblogs.com/mengdd/p/4211663.html   插入节点 　　首先看一个例子,用原生的JavaScript如...
jquery--DOM操作
最新发布
m0_74194490的博客
07-05 1090
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery操作dom元素
Ardencyz
02-23 395
jQuery操作dom元素 1.操作元素的属性 attr(),prop() 　　　获取或者设置元素的属性值 attr(): $("input[type='button']").attr("value","按钮1");//设置button的value值为按钮1 console.log( $("input[type='button']").attr("value"));//获取button的v...
三、jQuery--jQuery基础--jQuery基础课程--第5章 jQuery 操作DOM元素
weixin_30612769的博客
10-28 91
1、使用attr()方法控制元素的属性 　　attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。 　　例如，使用attr(属性名)的格式获取页面中<a>元素的“href”属性值，并将该值的内容显示在<span>元素中，如下图所示： 　　 　　在浏览器中显示的效...
JQuery 获取Dom元素
weixin_30263277的博客
07-07 90
(function (window) { var arr = []; var VP = function (selector, context) { return new VP.fn.init(selector, context); } VP.fn = VP.prototype = { constructor: VP, i...
jQuery Dom元素操作技巧
12-29
DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 jquery 获取父节点，兄弟节点，在节点内插入内容。 ①$(#test1).parent() // 父节点 ②$(#test1).next() //下一个节点 ③$(#test1).append('...
jQuery 创建Dom元素
10-29
"jQuery 创建Dom元素" jQuery 是一个流行的 JavaScript 库，提供了许多有用的功能来操作 DOM 元素。在这篇文章中，我们将讨论如何使用 jQuery 创建 DOM 元素。 什么是 DOM 元素？ 在 HTML 文档中，每个元素都是...
jQuery创建DOM元素实例解析
10-24
在实际开发中，使用jQuery创建和操作DOM元素是一种常见的操作，它帮助开发人员快速完成页面的动态交互。例如，动态地添加元素到页面中，或者根据用户的操作更改页面内容等。通过上述提到的方法，可以轻松地实现这些...
jQuery中DOM树操作之复制元素的方法
01-21
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下： 复制元素 前面提到的操作包括：插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置，以及通过新元素来包装已有...
JQuery获取DOM元素
weixin_34060741的博客
01-17 477
jQuery获得的对象并不和我们平时使用getElementById获得的对象一样。所以一些新手就很迷惑，为什么${”#Element”}不能直接innerHTML，这就是原因所在。 两种方法获取DOM元素。 取出集合中的某一项，或者直接get方法 jQuery对象与DOM对象的转换 只有jQuery对象才能使用jQuery定义的方法。注意DOM对象和jQuery对象是有区别的，调用方法时...
JQ初学习（简介，使用，选择器）
Dimuzero的博客
02-02 430
1.JQuery简介 1.1 jQuery是一个JavaScript函数库。 1.2jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 1.3jQuery库包含以下功能： HTML 元素选取,HTML 元素操作,CSS 操作,HTML 事件函数,JavaScript 特效和动画,HTML DOM 遍历和修改,AJAX,Utilities 2.如何使用JQuery 2.1 本地文件引入 script 标签引入 <script src="jquery-1.10.2.min.js"&gt
10分钟-jQuery操作DOM元素
寂寞的博客
04-02 1806
1.使用attr()方法控制元素的属性attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。例：调用attr()方法设置并获取<a>元素中 “href”属性的值： <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变
jquery对DOM元素操作
cychai的专栏
01-12 1070
如果引入jquery库后，就可以对DOM元素操作了，写法和标准的JavaScript相同。而不一定非要写$(document).ready(fuction(){});
Jquery 操作DOM元素（1）
ICY___的博客
02-22 484
用原生js来操作dom元素其实是一件比较繁琐的事，当JQuery遇到dom操作时会怎样呢？ 直接上代码，已注释好： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" conten
jquery操作DOM元素
qq_34559257的博客
05-14 481
找到元素：①$(选择器)②$("选择器").first()/.last()/.eq()/.parent()/.children()/.find()/.siblings()/.prev()/.next()......属性操纵：$().attr();$().val();$().prop()双标签内容：$().html();$().text()样式：$().css()删除、创建：$().remove()...
JQuery操作DOM属性与元素样式详解
`each()`函数允许我们对每个匹配的元素执行一个回调函数，其中`this`关键字在回调函数内部引用当前的DOM元素。通过这种方式，可以结合原生JavaScript来操作DOM属性。以下是一个简单的示例： ```javascript $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值