zoukankan      html  css  js  c++  java
  • jQuery

    设置内容 - text()、html() 以及 val()

    我们将使用前一章中的三个相同的方法来设置内容:

    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值

    下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容

    $("#btn1").click(function(){
      $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
      $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
      $("#test3").val("Dolly Duck");
    });

    下面的例子演示带有回调函数的 text() 和 html():

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test1").text(function(i,origText){
          return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
        });
      });
    
      $("#btn2").click(function(){
        $("#test2").html(function(i,origText){
          return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 
        });
      });
    
    });
    </script>
    </head>
    
    <body>
    <p id="test1">这是<b>粗体</b>文本。</p>
    <p id="test2">这是另一段<b>粗体</b>文本。</p>
    <button id="btn1">显示旧/新文本</button>
    <button id="btn2">显示旧/新 HTML</button>
    </body>
    </html>

    下面的例子演示如何改变(设置)链接中 href 属性的值:

    $("button").click(function(){
      $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
    });

    下面的例子演示如何同时设置 href 和 title 属性:

    $("button").click(function(){
      $("#w3s").attr({
        "href" : "http://www.w3school.com.cn/jquery",
        "title" : "W3School jQuery Tutorial"
      });
    });

    下面的例子演示带有回调函数的 attr() 方法:

    $("button").click(function(){
      $("#w3s").attr("href", function(i,origValue){
        return origValue + "/jquery";
      });
    });

  • 相关阅读:
    基于 IAR 修改工程名称
    Baidu IoT Study
    msp430f5438a Information Flash Seg Write -- Chapter
    MFC 编辑框内容更新方法以及滚动条设置
    通过打开按钮打开文件和通过左键移动打开文件并计算crc
    移动文件并将文件路径显示到编辑框内
    Aritronix Virtual Device 运行
    将一个char类型的数转换成曼切斯特数
    数组中重复的数字
    平衡二叉树
  • 原文地址:https://www.cnblogs.com/sea-stream/p/10452103.html
Copyright © 2011-2022 走看看