• 當前位置:首頁 > IT技術 > 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()  //讀?。ㄋ校?/p>

    • 獲取該元素的文本內容, 以字符串的形式返回
    • 因為是文本內容, 不涉及 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

    開通會員,享受整站包年服務
    国产呦精品一区二区三区网站|久久www免费人咸|精品无码人妻一区二区|久99久热只有精品国产15|中文字幕亚洲无线码