當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

4.jQuery 操作文本內(nèi)容
2022-05-31 17:11:51

jQuery 操作文本內(nèi)容

這里用 jq?操作元素內(nèi)的文本和超文本:

屬于 jQuery 的方法 只能 jquery元素集合調(diào)用, 原生 DOM 不能調(diào)用?。?!

?

1.html()

用法:元素集合.html()  //讀?。ㄊ讉€(gè))

  • 獲取該元素的超文本內(nèi)容, 以字符串的形式返回
  • 獲取的時(shí)候?yàn)榱吮WC html 結(jié)構(gòu)只能獲取第一個(gè)的元素的超文本內(nèi)容(獲取首個(gè))

用法:元素集合.html('內(nèi)容')    //設(shè)置(所有)

  • 設(shè)置元素集合內(nèi)元素的超文本內(nèi)容(HTML 代碼)
  • 完全覆蓋式的寫入
  • 隱式迭代: 元素集合內(nèi)有多少元素, 就寫入多少元素 就是說你元素集合有多少我設(shè)置多少 這里和js的innerHTMl一樣

?

?

? 2. text()

用法: 元素集合.text()  //讀?。ㄋ校?/p>

  • 獲取該元素的文本內(nèi)容, 以字符串的形式返回
  • 因?yàn)槭俏谋緝?nèi)容, 不涉及 html 結(jié)構(gòu), 所以拿到的是所有元素的文本內(nèi)容(獲取所有)
  • 以一個(gè)字符串的形式返回

用法:元素集合.text('內(nèi)容')  //設(shè)置(所有)

設(shè)置元素集合內(nèi)元素的文本內(nèi)容
完全覆蓋式的寫入
隱式迭代: 元素集合內(nèi)有多少元素, 就寫入多少元素

?

3. val()  

?

一般用在表單啊 即: input

用法:元素集合.val()  //讀?。▎蝹€(gè))
獲取元素集合內(nèi)元素的 value 值

用法:元素集合.val('內(nèi)容')  //設(shè)置(所有)
設(shè)置元素集合內(nèi)元素的 value 值
完全覆蓋式的寫入
隱式迭代: 元素集合內(nèi)有多少元素, 就寫入多少元素

?

總之以上介紹的3個(gè)中 只有text能讀取全部元素集合中的TextContent

自己去試試啊 我試過了 別問好吧...

還是給個(gè)例子 但是不注釋咯 自己看:

<!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個(gè)p標(biāo)簽</p>
<p>我是第2個(gè)p標(biāo)簽</p>
<p>我是第3個(gè)p標(biāo)簽</p>
<p>我是第4個(gè)p標(biāo)簽</p>
<p>我是第5個(gè)p標(biāo)簽</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個(gè)p標(biāo)簽

$('p').html('不為比誰強(qiáng),而為爭一口氣!');???//html()可以解析代碼的啊?而text不可以.
//?$('p').html('<li>132</li>');???//html()可以解析代碼的啊?而text不可以.

let?str_text?=??$('p').text();
console.log(str_text);??//不為比誰強(qiáng),而為爭一口氣!不為比誰強(qiáng),...?而為爭一口氣!
$('p').text("永遠(yuǎn)的學(xué)生?學(xué)海無涯");

let?str_val?=??$('input').val();
console.log(str_val);???//132
$('input').val("奮斗的年紀(jì)?選擇安逸?");








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

?


作者:??咸瑜???

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

開通會(huì)員,享受整站包年服務(wù)立即開通 >