zoukankan      html  css  js  c++  java
  • 4.23 jquery

    JQuery text()和html()-设置内容并使用回调函数

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test1").text(function(i,origText){
          return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
        });
      });
    
      $("#btn2").click(function(){
        $("#test2").html(function(i,origText){
          return "旧 html: " + origText + " 新 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>

    jQuery attr()-设置属性值并使用回调函数

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#runoob").attr("href", function(i, origValue){
                return origValue + "/jquery";
            });
        });
    });
    </script>
    </head>
    <body>
    
    <p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
    
    <button>修改 href 值</button>
    
    <p>点击按钮修改后,可以点击链接查看 href 属性是否变化。</p>
    
    </body>
    </html>
  • 相关阅读:
    小程序开发学习记录(一)
    解决移动端touch事件与click冲突的问题
    解决node.js使用fs读取文件出错
    防抖和节流
    promise
    ES6新的特性有哪些?
    css盒模型
    CSS3有哪些新特性?
    ES6新增的数据类型Map和Set。
    js求两个数组的交集|并集|差集|去重
  • 原文地址:https://www.cnblogs.com/cdl-sunshine/p/14908145.html
Copyright © 2011-2022 走看看