jQuery学习-jquery属性操作

最新推荐文章于 2023-03-13 22:06:30 发布

加油吧qaq

最新推荐文章于 2023-03-13 22:06:30 发布

阅读量136

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43368682/article/details/107995483

版权

属性操作

1）设置属性

$(selector).attr("title","标题内容")

2）获取属性

$(selector).attr("title")

3）移除属性

$(selector).removeAttr("title")

4、form表单中的prop()方法
针对checked、selected、disabled这类true/false属性。要使用prop()方法，通常用来影响DOM元素的动态状态，而不是改变的HTML属性

例子：点击可以切换选中状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="btn">
			切换复选框中的属性
		</div>
		<input type="checkbox" name="" id="checkbox" value="" />
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("#btn").click(function(){
			var isChecked= $("#checkbox").prop("checked");
			if(isChecked){
				//设置对象上的信息
				  $("#checkbox").prop("checked",false)
			}else{
				//设置对象上的信息
				  $("#checkbox").prop("checked",true)
			}
				
		})
	</script>
	</body>
</html>

切换后的属性在html上不会有体现：
在这里插入图片描述
在jQuery对象上有体现。

val()方法和text()方法

val()方法，作用：设置或返回form表单元素的value值，例如：input、select、textarea的值

$(selector).val()

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form action="" method="">
	   <input type="text" name="" id="username" value="" placeholder="用户名"/>
	   <input type="password" name="" id="password" value="" placeholder="密码"/>
	   <button type="button">提交</button>
	   </form>
	<script type="text/javascript">
		$("button").click(function(e){
			//取消浏览器默认操作,此处取消了表单的提交!!
			e.preventDefault();
			console.log($("#username").val());
			console.log($("#password").val());
		})
	</script>
	</body>
</html>

结果：
在这里插入图片描述

text()方法，作用：设置或获取匹配元素的文本内容，不带参数表示会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作。

$(selector).text("我是内容")

【注】设置的内容包含html标签，那么text()方法会把他们当纯文本内容输出，不识别标签。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<h1>helloworld</h1>
		</div>
		<script type="text/javascript">
			console.log($("#d1").html())//带标签
			console.log($("#d1").text())//不带标签纯文本
		</script>
	</body>
</html>

结果：
在这里插入图片描述

加油吧qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习-jquery属性操作

属性操作1）设置属性$(selector).attr("title","标题内容")2）获取属性$(selector).attr("title")3）移除属性$(selector).removeAttr("title")4、form表单中的prop()方法针对checked、selected、disabled这类true/false属性。要使用prop()方法，通常用来影响DOM元素的动态状态，而不是改变的HTML属性例子：点击可以切换选中状态<!DOCTYPE html&g
复制链接

扫一扫