回炉重造JQuery 获取和设置元素内容/属性
Posted ZSYL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了回炉重造JQuery 获取和设置元素内容/属性相关的知识，希望对你有一定的参考价值。
JQuery 获取和设置元素内容/属性
获取和设置元素内容
学习目标
- 能够知道获取和设置元素内容的操作
1. html方法的使用
jquery中的html方法可以获取和设置标签的html内容
示例代码:
<script>
$(function()
var $div = $("#div1");
// 获取标签的html内容
var result = $div.html();
alert(result);
// 设置标签的html内容，之前的内容会清除
$div.html("<span style='color:red'>你好</span>");
// 追加html内容
$div.append("<span style='color:red'>你好</span>");
);
</script>
<div id="div1">
<p>hello</p>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function()
// 获取标签
var $div = $("div");
// jquery的方式获取标签内容
alert($div.html());
// 设置标签内容
$div.html("<a href='https://www.baidu.com'>百度</a>");
// 扩展: 追加内容
$div.append("<a href='https://www.baidu.com'>谷歌</a>")
);
</script>
</head>
<body>
<div>哈哈</div>
</body>
</html>
说明:
给指定标签追加html内容使用 append 方法
2. 小结
- 获取和设置元素的内容使用: html方法
- 给指定元素追加html内容使用: append方法
获取和设置元素属性
学习目标
- 能够知道获取和设置元素属性的操作
1. prop方法的使用
之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。
示例代码:
<style>
.a01
color:red;
</style>
<script>
$(function()
var $a = $("#link01");
var $input = $('#input01')
// 获取元素属性
var sId = $a.prop("id");
alert(sId);
// 设置元素属性
$a.prop("href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01");
// 获取value属性
// var sValue = $input.prop("value");
// alert(sValue);
// 获取value属性使用val()方法的简写方式
var sValue = $input.val();
alert(sValue);
// 设置value值
$input.val("222222");
)
</script>
<a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">
说明: 获取value属性和设置value属性还可以通过 val 方法来完成。
2. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function()
// 获取标签
var $p = $("p");
var $text = $("#txt1");
// 获取样式属性，比如:获取字体大小
var $px = $p.css("font-size");
alert($px);
// 设置样式属性
$p.css("font-size":"30px", "background":"green");
// 除了样式属性的相关操作使用css方法，其它属性的操作都是prop方法
// 获取属性
var $name = $text.prop("name");
alert($name);
var $type = $text.prop("type");
alert($type);
// 设置属性
$text.prop("value":"张三", "class":"tname");
// 获取value属性可以使用val方法
alert($text.prop("value"));
// 使用val方法获取value属性
alert($text.val())
// 使用val方法设置value属性
$text.val("王五");
);
</script>
</head>
<body>
<p>哈哈，我是一个段落标签</p>
<input type="text" name="username" id="txt1" value="李四">
</body>
</html>
3. 小结
- 获取和设置元素属性的操作可以通过prop方法来完成
- 获取和设置元素的value属性可以通过val方法来完成，更加简单和方便
加油!
感谢!
努力!
以上是关于回炉重造JQuery 获取和设置元素内容/属性的主要内容，如果未能解决你的问题，请参考以下文章