zoukankan      html  css  js  c++  java
  • jQuery——表单应用(1)

    实现结果:聚焦表单的input部分时,input格式变更为CSS样式(获取和失去焦点改变样式)

    HTML:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link type="text/css" href="01.css" rel="stylesheet"/>
            <script type="text/javascript" src="jquery.js"></script>
        </head>
        <body>
            <form action="#" method="post" id="regForm">
                <fieldset>
                    <legend>个人基本信息</legend>
                    <div>
                        <label for="username">名称:</label>
                        <input id="username" type="text"/>
                    </div>
                    <div>
                        <label for="password">密码:</label>
                        <input id="password" type="password"/>
                    </div>
                    <div>
                        <label for="msg">详细信息:</label>
                        <textarea id="msg"></textarea>
                    </div>
                </fieldset>
            </form>
            <script type="text/javascript">
                $(function(){
                    $("input").focus(function(){
                        $(this).addClass("focus");
                    }).blur(function(){
                        $(this).removeClass("focus");
                    })
                })
            </script>
        </body>
    </html>

    CSS:

    .focus{
        border: 1px solid red;
        background: red;
    }
  • 相关阅读:
    开发进度01
    eclipse 调用cmd运行DataX
    kettle 新建DB连接双击打不开
    用户体验评价
    找水王课堂练习
    人月神话阅读笔记01
    用户模板和用户场景
    大道至简阅读笔记03
    第九周
    第八周总结
  • 原文地址:https://www.cnblogs.com/sunshine-blog/p/7117373.html
Copyright © 2011-2022 走看看