15-1元素属性与自定义属性操作

斑授匡炽乃分效下龟钝垂弘兔

页面结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素属性与自定义属性操作</title>
	</head>
	<body>
		<img src="../images/zly.jpg" width="200" alt="美女" title="明星" id="pic" data-nation="中国" />
	</body>
</html>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	
</script>

执行：

15-1元素属性与自定义属性操作第1张

预备知识: 读取器,设置器
1. 有一些函数,可以根据参数的数量不同,执行不同的功能,返回不同的值,类似于功能重载
2. 传入一个参数,执行读取操作getter,返回该参数的当前值,叫:读取器/获取器
3. 传入二个参数,执行赋值操作setter,修改当前参数的值,叫:设置器/修改器
4. 这种根据参数个数决定执行操作类型的方法,在jQuery中非常多,大家要留意*/

1. attr():元素属性的获取与设置

必须传参

<script type="text/javascript">
	var res=$('img').attr()
	//在控制台查看运行结果
	console.log(res)
</script>

执行，打开开发者工具，提示错误，因为没有传递参数

15-1元素属性与自定义属性操作第2张

查看图片的url地址

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	var res=$('img').attr("src")
	//在控制台查看运行结果
	console.log(res)
</script>

执行：

15-1元素属性与自定义属性操作第3张

传入第二个参数变为设置器，将赵丽颖的图片url地址替换为高圆圆的url地址：

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	var res=$('img').attr("src",'../images/gyy.jpg')
	//在控制台查看运行结果
	console.log(res)
</script>

执行，图片的url此时变为高圆圆：

15-1元素属性与自定义属性操作第4张

双参数为获取,第一个是属性名,第二个是要设置的新值

通过attr()设置样式

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').attr('src','../images/gyy.jpg')
	$('#pic').attr('style','border-radius:50%;box-shadow: 2px 2px 2px #888;')
</script>

执行：

15-1元素属性与自定义属性操作第5张

由此可见,attr()是典型的集读取器与设置器二合一的方法

attr()可以获取到元素的自定义属性
html5中,可以通过data-前缀给标签添加用户自定义属性

查看赵丽颖的data-nation属性，data-nation属性为用户自定义属性，可以在h5中使用必须以data开始

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	var res=$('#pic').attr('data-nation')
	console.log(res)
</script>

执行：

15-1元素属性与自定义属性操作第6张

attr()的属性值,还支持回调函数

将赵丽颖的图片变为150px

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').attr('width',function(){
		return 100+50
	})
	var res=$('#pic').attr('width')
	console.log(res)
</script>

执行：

15-1元素属性与自定义属性操作第7张

2. removeAttr():删除元素的属性

先将图片设置style样式

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').attr('style','border-radius: 50%;box-shadow: 2px 2px 2px #888;')
</script>

执行：

15-1元素属性与自定义属性操作第8张

删除图片的内联样式属性style

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').attr('style','border-radius: 50%;box-shadow: 2px 2px 2px #888;')
	$('#pic').removeAttr('style')
</script>

执行：

15-1元素属性与自定义属性操作第9张

可以删除多个属性,多个属性之间用空格分开,返回当前元素的状态

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').attr('style','border-radius: 50%;box-shadow: 2px 2px 2px #888;')
	$('#pic').removeAttr('style alt title data-nation')
	console.log($("#pic"))
</script>

执行：

15-1元素属性与自定义属性操作第10张

谓菠霜狼裤嘎廖猩辫翰钝侵良