JQuary属性操作

最新推荐文章于 2024-10-02 17:15:49 发布

QiuBO.

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量72

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_70648941/article/details/127425168

版权

一，JQuary 属性操作

JQuary常用属性操作有三种：prop() ,attr() ,data()

1，元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如元素里面的href,比如<input>元素里面的type

语法：

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

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

2，元素自定义属性值attr()

用户自己给元素添加的属性，我们称之为自定义属性，比如给div添加index="1".

语法：

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

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

3，数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。

语法：

描述	语法
附加数据语法	data("属性","属性值")
获取数据语法	data("属性")

二，JQuary文本属性值

主要针对元素，表单操作

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

html()//获取

html("内容")//设置

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

text()//获取

text("内容")//设置

表单的值val()(相当于原生的valuval

value()//获取

value("内容")//设置

代码示例：

<title>获取文本属性值</title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
				var str=$("#d1").html();
				alert(str)
				});	
				
			$("#btn1").click(function(){
				$("#name").val("动态生成");
			});	
			
			$("#btn2").click(function(){
				$("#info").text("<span>动态设置的内容</span>")
			});	
			
			});
		</script>
	</head>
	<body>
		<div id="d1"><p>div中p标签的内容</p></div>
		<button id="btn">查看内容</button>
		<div id="info">
			
		</div>
		<input type="text" id="name" value=""/>
		<button id="btn1">获取内容</button>
		<button id="btn2">设置内容</button>
	</body>