jQuery属性操作

最新推荐文章于 2023-08-28 21:50:54 发布

杪＆秋

最新推荐文章于 2023-08-28 21:50:54 发布

阅读量582

点赞数

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

本文链接：https://blog.csdn.net/m0_51435825/article/details/128267241

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、属性操作

1、attr-->获取取值也可以设置值

2、removeAttr-->删除属性

3、prop-->获取取值也可以设置值

4、removeProp-->删除属性

5、addClass-->添加类（可添加多个类）

6、removeClass->删除类（可删除多个类）

7、toggleClass-->类的切换操作（有责删除，无则添加）

8、html-->获取文本值（可设置值【可以放置标签】）

9、text-->获取文本值（可设置值【不可以放置标签】）

10、val-->设置或获取匹配元素的value属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性</title>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			div{
				width: 100px;
				height: 200px;
			}
			div.border{
				border: 2px solid #00aaff;
			}
			div.redDiv{
				background-color: #ff0000;
			}
			div.blackBorder{
				border: 6px solid black;
			}
		</style>
		<script>
			$(function(){
				$("#btn1").click(function(){
					/* attr设置属性 也可以取值 可以设置一个属性也可以设置多个属性 键值对的形式 多个需要用{}包含 */
					alert($(":text").attr("value"));//取值
					$(":text").attr("value","lisi");//设置值
				});
				$("#btn2").click(function(){
					$(":text").removeAttr("value");//删除值
				});
				$("#btn3").click(function(){
					alert($(":text").prop("value"));//取值
					$(":text").prop("value","lisi");//设置值
				});
				$("#btn4").click(function(){
					$(":text").removeProp("value");//删除值
				});
				$("#btn5").click(function(){
					/* addClass可以添加多个 */
					$(".border").addClass("redDiv blackBorder");//删除值
				});
				$("#btn6").click(function(){
					$(".border").removeClass("redDiv blackBorder");//删除值
				});
				$("#btn7").click(function(){
					/* 添加类与删除类的切换操作 有则删除，无则添加 */
					$(".border").toggleClass("redDiv blackBorder");//删除值
				});
				$("#btn8").click(function(){
					alert($("p").html());//取值
					$("p").html("zhan<b>g</b>san");//设置值 可以存放标签
				});
				$("#btn9").click(function(){
					alert($("p").text());//取值
					$("p").text("zhan<b>g</b>san");//设置值 不可以存放标签 只能设置文本
				});
				$("#btn10").click(function(){
					alert($(":text").val());//取值
					$(":text").val("lisi");//设置值
				});
			});
			
			
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="attr获取文本框的值">
		<input type="button" id="btn2" value="removeAttr删除文本框的值">
		<input type="button" id="btn3" value="prop获取文本框的值">
		<input type="button" id="btn4" value="removeProp删除文本框的值">
		<input type="button" id="btn5" value="addClass添加样式">
		<input type="button" id="btn6" value="removeClass删除样式">
		<input type="button" id="btn7" value="toggeClass">
		<input type="button" id="btn8" value="html()获取p元素内容">
		<input type="button" id="btn9" value="text()获取p元素内容">
		<input type="button" id="btn10" value="val()获取文本框的值">
		<br/>
		<input type="text"  value="zhangsan" />
		<div class="border"></div>
		<p>abc</p>
	</body>
</html>