How to add and delete attributes in jquery-Front-end Q&A-php.cn

How to add and delete attributes in jquery

青灯夜游

Release： 2022-06-07 17:16:35

Original

2596 people have browsed it

In jquery, you can use attr() or prop() to add attributes to elements. The syntax is "object.attr("attribute name", "value")" or "object.prop("attribute name", "value")"; you can use removeAttr() to delete attributes, the syntax is "object.removeAttr("attribute name")".

How to add and delete attributes in jquery

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

jquery methods to add and delete attributes

1. Use attr() or prop() to add attributes

Both prop() and attr() can be used to set the HTML attributes of elements.

Example 1: Use attr() to add the disabled attribute

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("textarea").attr("disabled", "disabled");
					// $("textarea").attr("disabled","true");
				});
			});
		</script>
	</head>

	<body>
		<textarea></textarea><br><br>
		<button>让textarea不可编辑</button>
	</body>

</html>

Copy after login

How to add and delete attributes in jquery

Example 2: Use prop() to add the readonly attribute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("input").attr("readonly","readonly");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<input type="text" value="hello"/><br /><br />

		<button>给input添加只读属性</button>
	</body>
</html>

Copy after login

How to add and delete attributes in jquery

2. Use removeAttr() to delete attributes.

The removeAttr() method removes attributes from selected elements.

Example: Use removeAttr() to delete the hidden attribute

The hidden attribute specifies that the element is hidden. Hidden elements will not be displayed.

Delete this attribute to allow the element to be displayed.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                $("p").removeAttr("hidden");
            })
        })
    </script>
	</head>
	<body>
		<p>这是一段可见的段落。</p>
		<p hidden="hidden">这是一段被隐藏的段落，现在显示出来了。</p>
		<p>这是一段可见的段落。</p>
		<button>删除hidden属性</button>
	</body>
</html>

Copy after login

How to add and delete attributes in jquery

Recommended related tutorials: jQuery video tutorial

The above is the detailed content of How to add and delete attributes in jquery. For more information, please follow other related articles on the PHP Chinese website!