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>
作者:咸瑜