实现结果：聚焦表单的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;

}

jQuery——表单应用（1）的更多相关文章

  1. Jquery表单提交后获取返回Json值

    1.给form添加id值: <form action="/News/SaveMessage" method="post" accept-charset=& ...

  2. Jquery表单序列化和AJAX全局事件

    Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...

  3. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  4. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  5. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  6. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  7. jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效

    jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...

  8. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  9. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  10. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

随机推荐

  1. [K/3Cloud] 创建一个业务单据表单插件

    概念 创建一个业务单据插件,处理单据的相关控制逻辑. 示例 新建一个类,继承自单据插件基类Kingdee.BOS.Core.Bill.PlugIn.AbstractBillPlugIn. using ...

  2. Spring实战读书笔记

    Spring实战读书笔记 Spring-core Spring之旅 - DI 和 AOP 概念 spring 的Bean容器 spring 的 核心模块 Spring的核心策略 POJO 最小侵入式编 ...

  3. I - Balancing Act POJ - 1655

    Consider a tree T with N (1 <= N <= 20,000) nodes numbered 1...N. Deleting any node from the t ...

  4. nginx: [emerg] unknown directive "聽" in D:\software03\GitSpace\cms\nginx-1.14.0/conf/nginx.conf:36

    nginx: [emerg] unknown directive "聽" in D:\software03\GitSpace\cms\nginx-1.14.0/conf/nginx ...

  5. P1665 正方形计数

    P1665 正方形计数 题目描述 给定平面上N个点,你需要计算以其中4个点为顶点的正方形的个数.注意这里的正方形边不一定需要和坐标轴平行. 输入输出格式 输入格式: 第一行一个数X,以下N个点的坐标. ...

  6. spark开发环境配置

    以后spark,mapreduce,mpi可能三者集于同一平台,各自的侧重点有所不用,相当于云计算与高性能计算的集合,互补,把spark的基础看了看,现在把开发环境看看,主要是看源码,最近Apache ...

  7. the apple code

    i know you will forget but 9 you will

  8. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  9. WCF探索之旅（五）——WCF与WebService的异同

    前几篇文章我们简单的介绍了WCF以及怎样使用它,今天我们来讨论一下WCF和WebService的异同. 相信大多数同学跟我一样,对于WebService有所了解.并且应该说你是先听说WebServic ...

  10. 关注PHPthinking官网微信公众号——红包来袭

    欢迎大家扫描关注PHPthinking官方微信订阅号,我们将给您定期发送质量博文.新闻趣事.站点公告等等,同一时候还有PHPthinking准备的每日微信红包(金额不等,已发出百元红包)等着你! 官网 ...