jQuery 获取和设置HTML元素
Posted 书和咖啡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 获取和设置HTML元素相关的知识，希望对你有一定的参考价值。
jQuery 中包含更改和操作 html 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容（例如HTML标签）、属性值等。
text()方法
text() 方法可以用于设置或获取所选元素的文本内容。
示例：
例如我们获取下列 <p> 标签中的文本内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
var content = $('.hello').text();
alert(content);
});
</script>
</head>
<body>
<p class="hello">你好，欢迎来到侠课岛!</p>
<div>
<p>希望侠课岛中有适合你的编程课程。</p>
</div>
</body>
</html>
在浏览器中演示效果：
除了获取文本内容，text() 还可以用于设置文本内容，我们可以来看一下。
示例：
例如通过 text() 将 .content 的文本内容设置为 hello, xkd!：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$('.content').text("hello, xkd!");
});
});
</script>
</head>
<body>
<p class="content">你好，欢迎来到侠课岛!</p>
<p><button>点击按钮</button></p>
</body>
</html>
在浏览器中演示效果：
html()方法
html() 方法用于设置或返回所选元素的内容（包括HTML标记）。
示例：
通过 html() 方法获取 p 元素的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
var content = $('.hello').html();
alert(content);
});
</script>
</head>
<body>
<p class="hello">你好，欢迎来到侠课岛!</p>
</body>
</html>
在浏览器中演示效果：
除此之外，我们还可以使用 html() 方法来设置指定元素的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$('.hello').html('你好，欢迎来到侠课岛!');
});
</script>
</head>
<body>
<p>向下面的p标签中添加文本内容：</p>
<p class="hello"></p>
</body>
</html>
在浏览器中演示效果：
val()方法
val() 用于设置或返回表单字段的值。该方法大多时候用于 input 元素。
示例：
例如获取输入框 input 中的值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
alert($('input').val());
});
});
</script>
</head>
<body>
文本输入框：<input type="text" name="name" value="summer" />
<p>
<button>获取输入框的值</button>
</p>
</body>
</html>
在浏览器中演示效果：
如果要使用 val() 方法设置 value 的值，我们可以像下面这样做：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$('input').val('summer')
});
});
</script>
</head>
<body>
文本输入框：<input type="text" name="name" value="" />
<p>
<button>获取输入框的值</button>
</p>
</body>
</html>
在浏览器中演示效果：
attr()方法
attr() 方法用于设置或返回被选元素的属性值。
示例：
例如下面这个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
alert($('div').attr("class"));
});
</script>
</head>
<body>
<div class="xkd">获取class属性的值</div>
</body>
</html>
在浏览器中演示效果：
attr() 方法除了获取元素的属性值，还可以设置元素的属性值，我们来看一下。
示例：
将下面 <div> 标签中的 class 属性的值设置为 summer：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$('div').attr("class", "summer")
});
</script>
</head>
<body>
<div>设置class属性的值</div>
</body>
</html>
在浏览器中演示效果：
链接：https://www.9xkd.com/
以上是关于jQuery 获取和设置HTML元素的主要内容，如果未能解决你的问题，请参考以下文章