zoukankan      html  css  js  c++  java
  • 点击按钮,图片和按钮的文字发生改变

    点击“隐藏”按钮,下方的图片隐藏,并且按钮上的文字由“隐藏”变为“显示”。再次点击,图片显示并且位子再次由“显示”变为“隐藏”

    直接上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>点击后字体图片发生改变</title>
    </head>
    <body>
    
    <form name="form">
        <input id="btn" name="btn" type="button" value="隐藏" onclick="buhao()">
    </form>
    <img id="img" src="美女.jpg" style=" 25%;">
    <script rel="stylesheet" type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        function buhao() {
            if(document.form.btn.value=="隐藏"){
                document.form.btn.value = "显示";
                $("#img").fadeOut(1000);
                console.log("显示");
            }else {
                document.form.btn.value = "隐藏";
                $("#img").fadeIn(1000);
                console.log("隐藏");
            }
        };
    </script>
    
    </body>
    </html>

    点击查看效果图

    效果截图:

    ----------------------------------------分割线--------------------------------------

    在表单form中,我一开始用的是id属性,而不是name属性,却怎么也得不到结果,一开始我还纳闷,最后发现form表单是用name发送request的,而不是id。

    这说明id和name还是有很多区别的。

    通常name和id的解释:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的

    这句话是没错,但是很操蛋的就是,这句话给我带来一个误解:id是可以替代name的

    但是:name有很多用途不是id能够替代的

    首先,表单form在提交数据时用的就是name,而不是id。因为在表单form中可能会对应多个控件(如:radio、CheckBox),而id必须保持唯一,所以必须用name。另外,浏览器会根据name来设定发送到服务器的request,如果用id,则服务器无法得到数据。

    查看更多name不可替代的用途

  • 相关阅读:
    jqGrid详解及高级应用(十四)
    ERP存储过程的调用和树形菜单的加载(四)
    IDisposable接口
    SQL调用系统存储过程整理
    Net作业调度-----Quartz.Net
    C#泛型(二)
    ERP通用存储过程封装(三)
    ERP PowerDesigner工具使用(二)
    ERP简介(一)
    jQuery.TreeView插件实现树状导航(十三)
  • 原文地址:https://www.cnblogs.com/gwcyulong/p/6968125.html
Copyright © 2011-2022 走看看