jq添加html代码jQuery 获取和设置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(){ 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/