• 4.jQuery 操作文本内容


    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://www.cnblogs.com/bi-hu/p/14791993.html

  • 相关阅读:
    9、 vector与list的区别与应用?怎么找某vector或者list的倒数第二个元素
    8、STL的两级空间配置器
    hdoj--1342--Lotto(dfs)
    FZU--2188--过河(bfs暴力条件判断)
    zzuli--1812--sort(模拟水题)
    hdoj--3123--GCC(技巧阶乘取余)
    zzulioj--1089--make pair(dfs+模拟)
    zzulioj--1815--easy problem(暴力加技巧)
    zzulioj--1801--xue姐的小动物(水题)
    HIToj--1076--Ordered Fractions(水题)
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14791993.html
Copyright © 2020-2023  润新知