zoukankan      html  css  js  c++  java
  • jQuery HTML 操作 改变/添加文本值

    1、JQuery 改变p中的文本值

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
      $("p").html("Update text");
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click here</button>
    </body>
    
    </html>
    

     2、JQuery 添加p中的文本值

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
      $("p").append(" Append text");
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">请点击这里</button>
    </body>
    
    </html>
    

     3、after() 函数在所有匹配的元素之后插入 HTML 内容

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
      $("p").after(" Add  content.");
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click here</button>
    </body>
    
    </html>
    

     4、jQuery HTML 操作

    函数描述
    $(selector).html(content) 改变被选元素的(内部)HTML
    $(selector).append(content) 向被选元素的(内部)HTML 追加内容
    $(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
    $(selector).after(content) 在被选元素之后添加 HTML
    $(selector).before(content) 在被选元素之前添加 HTML
  • 相关阅读:
    python学习第十五天
    python学习第十三、十四天
    python学习第十二天
    python学习第j十一天
    python学习第十天
    ViewController push的自定义动画
    iOS 判断设备是否越狱
    iOS
    OBJC字面量
    ios8 share Extension 分享扩展
  • 原文地址:https://www.cnblogs.com/linlf03/p/2309666.html
Copyright © 2011-2022 走看看