首页 > 科技新闻 > Web编程 > 正文

4.jQuery 操作文本内容
2022-05-31 17:11:51

jQuery 操作文本内容

这里用 jq 操作元素内的文本和超文本：

属于 jQuery 的方法只能 jquery元素集合调用, 原生 DOM 不能调用！！！

1.html()

用法：元素集合.html()　　//读取（首个）

获取该元素的超文本内容, 以字符串的形式返回
获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容（获取首个）

用法：元素集合.html('内容')　　　　//设置（所有）

设置元素集合内元素的超文本内容(HTML 代码)
完全覆盖式的写入
隐式迭代: 元素集合内有多少元素, 就写入多少元素就是说你元素集合有多少我设置多少这里和js的innerHTMl一样

2. text()

用法: 元素集合.text()　　//读取（所有）

获取该元素的文本内容, 以字符串的形式返回
因为是文本内容, 不涉及 html 结构, 所以拿到的是所有元素的文本内容（获取所有）
以一个字符串的形式返回

用法：元素集合.text('内容')　　//设置（所有）

设置元素集合内元素的文本内容
完全覆盖式的写入
隐式迭代: 元素集合内有多少元素, 就写入多少元素

3. val()　　

一般用在表单啊即: input

用法：元素集合.val()　　//读取（单个）
获取元素集合内元素的 value 值

用法：元素集合.val('内容')　　//设置（所有）
设置元素集合内元素的 value 值
完全覆盖式的写入
隐式迭代: 元素集合内有多少元素, 就写入多少元素

总之以上介绍的3个中只有text能读取全部元素集合中的TextContent

自己去试试啊我试过了别问好吧...

还是给个例子但是不注释咯自己看：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script type="text/javascript" src = "jqsourse.js"></script>

<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
<p>我是第3个p标签</p>
<p>我是第4个p标签</p>
<p>我是第5个p标签</p>

<input type="text" value="132">
<input type="text" value="465">
<input type="text" value="789">

<script type="text/javascript">
let str_html = $('p').html();
console.log(str_html);  //我是第1个p标签

$('p').html('不为比谁强，而为争一口气！');   //html()可以解析代码的啊 而text不可以.
// $('p').html('<li>132</li>');   //html()可以解析代码的啊 而text不可以.

let str_text =  $('p').text();
console.log(str_text);  //不为比谁强，而为争一口气！不为比谁强，... 而为争一口气！
$('p').text("永远的学生 学海无涯");

let str_val =  $('input').val();
console.log(str_val);   //132
$('input').val("奋斗的年纪？选择安逸？");








</script>
</body>
</html>

作者：咸瑜

本文摘自：https://blog.51cto.com/u

更多科技新闻 ......

4.jQuery 操作文本内容 2022-05-31 17:11:51

jQuery 操作文本内容

推荐内容

4.jQuery 操作文本内容
2022-05-31 17:11:51