JQuery属性

最新推荐文章于 2025-04-11 14:17:22 发布

Hrgge^0^

最新推荐文章于 2025-04-11 14:17:22 发布

阅读量76

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/Hrgge/article/details/127420198

版权

本文详细介绍了JQuery中对元素属性的操作，包括使用prop()和attr()处理固有与自定义属性，以及data()进行数据缓存。此外，还讲解了文本内容的获取与设置，如html(), text()和val()。在元素操作部分，阐述了如何遍历元素、动态创建、添加和删除元素的方法，如each()、append()、prepend()、after()、before()以及remove()、empty()。这些内容有助于理解JQuery在DOM操作上的灵活性和实用性。

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

1.JQuery属性操作

1.1元素固有属性值 prop()

描述	语法
获取属性语法	prop("属性")
设置属性语法	prop("属性","属性值")

注意:prop()除了普通属性操作，更适合操作表单属性：disabled/checked/selected等

1.2.元素自定义属性值 attr()

描述	语法
获取属性语法	attr("属性") //类似原生getAttribute()
设置属性语法	attr("属性","属性值") //类似原生setAttribute()

注意:attr()除了普通属性操作，更适合操作自定义属性（该方法也可以获取H5自定义属性）

1.3.数据缓存 date()

描述	语法
附加数据语法	date("name","value") //向被选元素附加数据
获取数据语法	date("name") //向被选元素获取数据

注意:同时，还可以读取HTML5自定义属性date-index，得到的是数字

2.JQuery文本属性值

jQuery内容文本值

常见操作有三种：html() / text() /val()

语法

1.普通元素内容 html() （相当于原生innerHTML)

html() //获取元素的内容

html("内容") //设置元素的内容

2.普通元素文本内容 text() (相当于原生innerText)

text() //获取元素的文本内容

text("文本内容") //设置元素的文本内容

3.表单的值 val() (相当于原生value)

val() //获取表单的值

val("内容") //设置表单的值

注意:html()可识别标签，text()不识别标签

3.JQuery元素操作

JQuery元素操作主要是用jQuery方法，操作标签的遍历、创建、添加、删除等操作

3.1遍历元素

语法1

$("div").each(function (index,dom) {xxx;})

1.each()方法遍历匹配的每一个元素，主要用DOM处理。each 每一个

2.里面的回调函数有两个参数：index是每个元素的索引号；dom是每一个DOM对象，不是jQuery对象

3.所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(dom)

注意:此方法用于遍历jQuery对象中的每一项，回调函数中元素为DOM对象，想要使用jquery方法需要转换。

语法2

$.each(object,function(index,element) {xxx;})

1.$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组、对象

2.里面的函数有两个参数：index是每个元素的索引号；element遍历内容

注意:此方法用于遍历jQuery对象中的每一项，回调函数中的元素为DOM对象，想要使用jQuery方法需要转换。

3.2 创建、添加、删除

1.创建

$("<li></li>"); //动态的创建一个<li>

2.1内部添加

element.append("内容")

把内容放入匹配元素内部最后面，类似原生appendChild

element.prepend("内容")

把内容放入匹配元素内容最前面

2.2外部添加

element.after("内容") // 把内容放入目标元素后面

element.before("内容") //把内容放入目标元素前面

①内部添加元素，生成之后，它们是父子关系

②外部添加元素，生成之后，它们是兄弟关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//创建元素
				var li=$("<li>动态生成的</li>");
				$("#btn1").click(function(){
					//在内部的前面添加元素
					$("#content ul").prepend(li);
				});
				
				$("#btn2").click(function(){
					//在内部的后面添加元素
					$("#content ul").append(li);
				});
				
				$("#btn3").click(function(){
					//在外部的前面添加元素
					$("#content ul").before(li);
				});
				
				$("#btn4").click(function(){
					//在外部的后面添加元素
					$("#content ul").after(li);
				});
			});
		</script>
	</head>
	<body>
		<h2>操作页面元素：页面元素的遍历、页面元素的增删</h2>
		<div id="content">
			<ul>
				<li>苹果</li>
				<li>香蕉</li>
				<li>西瓜</li>
				<li>梨子</li>
				<li>菠萝</li>
			</ul>
		</div>
		<button id="btn1">内部添加到前面</button>
		<button id="btn2">内部添加到后面</button>
		<button id="btn3">外部添加到前面</button>
		<button id="btn4">外部添加到后面</button>
	</body>
</html>

3.删除元素

element.remove() //删除匹配的元素（本身）

element.empty() //删除匹配的元素集合中的所有的子节点

element.html("") //清空匹配的元素内容

①remove删除元素本身

②empt()和html("")作用等价，都可以删除元素里面的内容，只不过html还可以设置内容

注意:以上只是元素的创建、添加、删除方法的常用方法