zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    maven-scm-plugin: Add a tag into Mercurial. 在Mercurial中添加一个tag
    JSch
    docker-compose install
    如何删除Dead状态的container
    inux下如何添加一个用户并且让用户获得root权限
    Log4j2 自定义 Appender
    Harbor私有镜像仓库(上)
    docker基础(下)
    docker基础(上)
    Pipeline流水线JAVA项目发布
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14791993.html
Copyright © 2011-2022 走看看