jq中的属性操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src=""/>
		<img src=""/>
		<img src=""/>
		
		
		<a href="">百度</a>
		<div id="one"></div>
		
		
		<input type="checkbox" />
	</body>
</html>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	//1.回顾js中的属性操作
	var img = document.querySelector("img");
	//方式1:
	img.src = "img/t1.png";
	//自定义属性
	img.type = "天猫图片";
	console.log(img.type);
	//方式2:
	img.setAttribute("src", "img/t1.png");
	//自定义属性
	img.setAttribute("index", "第一张");
	console.log(img.getAttribute("index"));
	//------------------------------------------------------------
	//2.看jq中如何操作!!!!
	/*
	 语法:
	 attr(属性名, 属性值或者函数);
	 如果需要为标签添加多个属性  可以使用{}对象形式添加
	 */
	
	$("a").attr("href", "http://www.baidu.com");
	//修改多个值
	$("img").attr({
		src:"img/t2.jpg",
		width:300
	});
	
	//获取属性值!!!
	console.log($("a").attr("href"));
	console.log($("img").attr("src"));
	
	//删除属性值
	$("img").removeAttr("width");
	$("a").removeAttr("href");
	
	//练习:给三个img 添加不同的三张图片
	var imgNameArray = [];
	$("img").attr("src", function(index, value){
		return "img/t" + (index + 2) + ".jpg";
	})
	//练习:给三个img标签  宽度依次减少100px
	$("img").attr("width", function(index, value){
		
		return 520 - (index + 1) * 100
	})
	//-------------------------------------------------------
	//操作属性的第二种方式    prop()
	//用法同attr()
	
	$("a").prop("href", "http://baidu.com");
	//多个属性
	$("div").prop({
		num:1,
		data:"自定义一个属性值"
	});
	//一样可以使用函数  
//	$("").prop("属性名", 函数)
   //获取值
   console.log($("div").prop("num"));
   console.log($("img").prop("src"));
	//删除
	$("a").removeProp("href");
	//------------------------------------
	/*
	 区别:
	 1.attr()以后多用于自定义属性操作
	 2.prop()多用于元素自带属性的操作,例如img的src a的href等
	 但是如果属性值是boolean类型,就要使用prop()方式访问属性值!!
	 */
	
	console.log($("input").prop("checked")); //有值 
	console.log($("input").attr("checked")); //undefined
</script>

JQ
#JQ
jq中的属性操作
http://ultracode.cn/2021/01/04/JQ/jq中的属性操作/
作者
Win
发布于
2021年1月4日
许可协议