How to replace tag attribute value in jquery-Front-end Q&A-php.cn

How to replace tag attribute value in jquery

青灯夜游

Release： 2023-01-04 09:15:16

Original

2687 people have browsed it

Two methods to replace the tag attribute value: 1. Use attr() to replace the attribute value, the syntax "$("img").attr({attribute 1: "new value", attribute 2: "new value"...});". 2. Use prop() to replace the attribute value, the syntax is "$("img").prop({Attribute 1: "New Value", Attribute 2: "New Value"...});".

How to replace tag attribute value in jquery

The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.

Attributes of HTML tags

Tags in HTML are like keywords, each tag has its own semantics (meaning), For example, the

tag represents a paragraph, and the tag represents bold. Depending on the tag, the browser will display the content in the tag in different ways.

Generally, an HTML tag consists of a start tag, attributes, content and an end tag. The name of the tag is not case-sensitive, but the values of most attributes need to be case-sensitive, as shown below: ## The #

	属性
	↓
<div class="foo">PHP中文网</div>
 ↑               ↑        ↑
开始标签          内容     结束标签

Copy after login

attribute can provide some additional information for HTML tags, or modify HTML tags. Attributes need to be added in the start tag, and the syntax format is:

attr="value"

Copy after login

attr represents the attribute name, and value represents the attribute value. Attribute values must be surrounded by double quotes " " or single quotes ' '.

Note that although both double quotes and single quotes can surround attribute values, for the sake of standardization and professionalism, please use double quotes as much as possible.

A tag can have no attributes or one or more attributes.

Two ways to modify the tag attribute value in jquery

Method 1: Use attr() to modify the attribute value

attr() method can set the attribute value of the selected element.

Replacement syntax:

//单个属性
$("div").attr("属性名","新属性值");

//多个个属性
$("div").attr({属性1:"新值",属性2:"新值"....});

Copy after login

Example 1: Modify the value of the style attribute of the div tag

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
		$(document).ready(function() {
			$("button").click(function() {
				$("div").attr("style","height:100px;background-color: #AFEEEE;");
			});
		});
		</script>
	</head>
	<body>

		<div style="height: 150px;border: 1px solid red;"></div>
		<br>
		<button>修改div的属性值</button>
	</body>
</html>

Copy after login

How to replace tag attribute value in jquery

Example 2: Modify the width Same as the height attribute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").attr({width:"400",height":"320"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="200"    style="max-width:90%"><br><br>
		<button>修改width和height属性值</button>
	</body>

</html>

Copy after login

How to replace tag attribute value in jquery

Method 2: Use prop() to modify the attribute value

The same as the attr() method, prop( ) method can also set the attribute value of the selected element.

Modify syntax:

//单个属性
$("div").prop("属性名","新值");
//多个个属性
$("div").prop({属性1:"新值",属性2:"新值"....});

Copy after login

Example 1: Modify div tag class attribute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
		$(document).ready(function() {
			$("button").click(function() {
				$("div").attr("class","box2");
			});
		});
		</script>
		<style>
			.box1{
				height: 150px;
				background-color: #AFEEEE;
			}
			.box2{
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>

		<div class="box1"></div>
		<br>
		<button>修改div的属性值</button>
	</body>
</html>

Copy after login

How to replace tag attribute value in jquery ##Example 2: Modify src and alt Attribute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").prop({src:"img/4.jpg",alt:"晚霞"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="300"><br><br>
		<button>修改src和alt属性</button>
	</body>

</html>

Copy after login

How to replace tag attribute value in jquery [Recommended learning:

jQuery video tutorial

, web front-end video]

The above is the detailed content of How to replace tag attribute value in jquery. For more information, please follow other related articles on the PHP Chinese website!