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>
  • 相关阅读:
    jQuery动态加载动画spin.js
    jQuery自动过滤单词插件
    基于jQuery的自定义滚动条
    jQuery纵向分类下拉菜单导航
    仿酷狗官网新闻焦点图插件
    metro扁平UI网页组件
    HTML5环形音乐播放器
    纯CSS3个性化圆形按钮登录表单
    纯CSS3绘制的黑色图标按钮组合
    纯CSS3实现iOS7扁平化图标
  • 原文地址:https://www.cnblogs.com/cdl-sunshine/p/14908145.html
Copyright © 2011-2022 走看看