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";
      });
    });

  • 相关阅读:
    转:Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
    [km] 如何判断一个直播系统是否使用的是RTMP
    xshell5.0实现中键复制
    [转] 腾讯云直播OBS推流教程
    eclipse格式化代码快捷键失效
    JAVA注解@Interface基础知识
    MySQL按中文拼音排序
    Navicat连不上mysql8
    MySQL重置root密码
    CentOS7防火墙之firewalld
  • 原文地址:https://www.cnblogs.com/sea-stream/p/10452103.html
Copyright © 2011-2022 走看看