jQuery 系列 | 第三讲 jQuery 属性操作

最新推荐文章于 2024-07-30 20:19:19 发布

Eric Sang

最新推荐文章于 2024-07-30 20:19:19 发布

阅读量134

点赞数

分类专栏： jQuery 文章标签： Web前端 jQuery

本文链接：https://blog.csdn.net/ry1026/article/details/89345115

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文深入讲解了jQuery中属性操作的方法，包括获取、设置、修改和删除属性，详细介绍了attr、prop、addClass、removeClass等方法的使用场景及区别，并探讨了样式类操作和值操作的具体应用。

摘要由CSDN通过智能技术生成

1.什么是属性操作？

在上一讲中，我们介绍了jQuery选择器，知道了如何使用jQuery实现查找节点（增删改查中的查，剩余三个见下一讲），那么在找到节点之后，便是对节点的属性进行操作。对属性进行操作，具体来说也是增删改查这几个部分。

2. 获取属性的值？

attr(attrName)

<body>
	<div id="box1" name="header"></div>
	<script src="js/jquery-3.4.0.js"></script>
	<script type="text/javascript">
		var res = $("#box1").attr("name");
	    console.log(res);
	</script>
</body>

prop(attrName)

<body>
	<input type="checkbox" value="1">
	<input type="radio" value="2">
	<script src="js/jquery-3.4.0.js"></script>
	<script type="text/javascript">
	   $(":checkbox[value='1']").prop("checked", true);
	   $(":radio[value='2']").prop("checked", true);
	</script>
</body>

3. 设置属性的值？

attr(attrName, attrValue)

<body>
	<div id="box1"></div>
	<script src="js/jquery-3.4.0.js"></script>
	<script type="text/javascript">
		$("#box1").attr("idx", "1"); // 没有就会增加
		var res = $("#box1").attr("idx");
	    console.log(res);
	</script>
</body>

prop(attrName, attrValue) 【设置属性时,会设置所有找到元素的属性】

	<div class="box1" id="id1"></div>
	<div class="box1" id="id2"></div>
	<script src="js/jquery-3.4.0.js"></script>
	<script type="text/javascript">
		$(".box1").prop("idx", "1");
		console.log($("#id1").prop("idx"));
		console.log($("#id2").prop("idx"));
	</script>
</body>

4. 删除属性？

removeAttr(attrName)

<body>
	<div id="box1" idx="1"></div>
	<script src="js/jquery-3.4.0.js"></script>
	<script type="text/javascript">
		$("#box1").removeAttr("idx");
	</script>
</body>

removeProp(attrName)

5. attr方法与prop方法，应该使用哪个？

如果一个属性只有true和false两个属性值时，使用prop()，其他使用attr()
如 checked, selected 或者 disabled 使用prop()

6. 样式属性操作

addClass()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    	
    	.class1 {
    		width: 200px;
    		height: 50px;
    	}

    	.class2 {
    		background-color: gray;
    	}

    	.class3 {
    		color: red;
    		margin: 0 auto;
    	}

    	.class4 {
    		text-align: center;
    		line-height: 50px;
    	}
    </style>
</head>
<body>
    <div id="box1"> jQuery </div>
    <script src="js/jquery-3.4.0.js"></script>
    <script type="text/javascript">
    	// 添加一个样式类
    	$("#box1").addClass("class1");
    	// 再添加一个样式类
    	$("#box1").addClass("class2");
        // 同时添加多个样式类(用空格隔开)
    	$("#box1").addClass("class3 class4");
    </script>
</body>
</html>

removeClass()

<body>
	<script src="js/jquery-3.4.0.js"></script>
	<script type="text/javascript">
		// 删除一个样式类
		 $("div").removeClass("class1");
		// 再删除一个样式类
		$("div").removeClass("class2");
		// 同时删除多个类(用空格隔开)
		$("div").removeClass("class1 class2");
	</script>
</body>

toggleClass() 【添加或删除样式类(存在则删除，不存在则添加)】

7. 值操作

html() 【添加或获取元素中的HTML】

<body>
	<div id="box1"></div>
	<div id="box2"></div>
	<p>我喜欢阅读</p>
    <script src="js/jquery-3.4.0.js"></script>
    <script type="text/javascript">
    	var divElements = $("div");
        divElements.html("<span>我喜欢旅行</span>");

        // 获取html代码
       	console.log($('p').html()); 
    </script>
</body>

text() 【添加或获取元素中的文本】

<body>
	<p>我喜欢阅读</p>
	<h2></h2>
    <script src="js/jquery-3.4.0.js"></script>
    <script type="text/javascript">
    	var h2Elements = $("h2");
        h2Elements.text("我喜欢体育");
        // 获取标签包裹的文本内容
       	console.log($('h2').text()); 
    </script>
</body>

val()

<body>
    <input type="text" name="username">
    <input type="password" name="password" value="123">
     <script src="js/jquery-3.4.0.js"></script>
    <script type="text/javascript">
    	$("input[name='username']").val("admin");
    	console.log($("input[name='password']").val());

    </script>
</body>

8. 小结

jquery的属性操部分可大体归纳为四大类操作：HTML属性操作，DOM属性操作，类样式属性操作以及值操作。

	描述	方法
HTML 属性操作	对html文档中的属性进行获取，设置，修改和删除操作。	attr()、removeAttr()
DOM 属性操作	对DOM元素的属性进行获取，设置，修改和删除操作。	prop()、removeProp()
类样式属性操作	是指对DOM属性className进行添加。	addClass()、removeClass()、toggleClass()
值操作	是对DOM属性value进行读取和设置操作。	html()、text()、val()