JQuery属性操作

最新推荐文章于 2024-04-22 15:31:17 发布

慕北丶

最新推荐文章于 2024-04-22 15:31:17 发布

阅读量221

点赞数

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/qq_42539533/article/details/88724696

版权

JavaScript 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

前端

54 篇文章 0 订阅

订阅专栏

文章目录

JQuery属性操作

JQuery属性操作

就是用JS操作HTML标签的属性

1.取得元素的指定属性值

<script>
			$(function(){
				var src=$("img").attr("src");
				console.log(src);
			})
		</script>		
	</head>
	<body>
		<img src="../img/1.jpg" alt="找不到图片"/>
	</body>

在这里插入图片描述

2.为元素的指定属性赋值

$(function(){
	var attr=$("img").attr("src","../img/10.jpg");
	console.log(attr);
})

3.删除元素的指定属性

$(function(){
	var attr=$("img").removeAttr("src");
})

在这里插入图片描述

4.取得指定属性的值

另一种方式，prop()

<script>
			$(function(){
				var pr=$("input:eq(2)").prop("checked");
				console.log(pr)
			})
		</script>		
	</head>
	<body>
		<input type="checkbox"/>爬山
		<input type="checkbox"/>游泳
		<input type="checkbox" checked/>唱歌
		<input type="checkbox"/>跳舞
	</body>

在这里插入图片描述
prop(“属性”)：取得元素指定的属性值（一般用来操作HTML原生的属性）
而attr()可以操作原生属性，还可以操作自定义的属性

5.为元素设置属性值

$(function(){
	$("input:eq(0)").prop("checked",true);
})

在这里插入图片描述

$(function(){
	$("input:eq(2)").prop("disabled",true);
})
处于disabled的true状态则选择框不能操作了

6.为元素添加class属性

<script>
			$(function(){
				$("button").click(function(){
					$("div").addClass('divClass');
				})
			})
		</script>	
		<style>
			.divClass{
				height: 200px;
				width: 500px;
				background-color: pink;
				margin-top: 100px;
				margin-bottom: 0;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button type="button">添加样式</button>
	</body>

在这里插入图片描述

7.删除元素的指定的class属性

<script>
			$(function(){
				$("button:first").click(function(){
					$("div").addClass('divClass1 divClass2');
				})
				$("button:last").click(function(){
					$("div").removeClass('divClass1 divClass2');
				})
			})
		</script>	
		<style>
			.divClass1{
				border:solid deepskyblue;
				height: 200px;
				width: 500px;
				margin-top: 100px;
				margin-bottom: 0;
				margin-left: auto;
				margin-right: auto;
			}
			.divClass2{
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button type="button">添加样式</button>
		<button type="button">删除样式</button>
	</body>

在这里插入图片描述

删除p元素的class属性的"sclected"，删除的是值

8.取得指定元素下的HTML值

$(function(){
		var html=$("p").html();
		console.log(html);
		})

在这里插入图片描述

9.为指定元素设置新的HTML代码

<script>
			$(function(){
				$("p").html("<h1>周末好！</h1>");
			})
		</script>	
	</head>
	<body>
		<p>
			<span>段落！</span>
		</p>
	</body>

在这里插入图片描述

10.取得指定元素下的文本值

$(function(){
	$("p").text();
})

11.替换文本值

$(function(){
	$("p").text("Hello World！");
})

12.取得文本框的值

<script>
			$(function(){
				console.log($("input").val());
			})
		</script>	
	</head>
	<body>
		<input type="text" name="pwd" value="1234" />
	</body>

在这里插入图片描述

13.替换文本框的值

$(function(){
	$("input").val("Hello World");
})

在这里插入图片描述

慕北丶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery属性操作

文章目录JQuery属性操作1.取得元素的指定属性值2.为元素的指定属性赋值3.删除元素的指定属性4.取得指定属性的值5.为元素设置属性值6.为元素添加class属性7.删除元素的指定的class属性8.取得指定元素下的HTML值9.为指定元素设置新的HTML代码10.取得指定元素下的文本值11.替换文本值12.取得文本框的值13.替换文本框的值JQuery属性操作就是用JS操作HTML标签的...
复制链接

扫一扫