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;
    }
  • 相关阅读:
    【3-9】数据库基本应用
    Oracle所有分析函数<转>
    Oracle数据库row_number详解<转>
    MVC人员管理系统
    MVC Razor语法
    MVC基础
    邮箱验证
    jQuery入门基础(动画效果)
    js前台与后台数据交互
    ajax入门基础
  • 原文地址:https://www.cnblogs.com/sunshine-blog/p/7117373.html
Copyright © 2011-2022 走看看