<html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <style type="text/css">

         <%-- IE6不支持这种方法--%>

         <%--input:focus, textarea:focus

         {

             border: 1px solid #f00;

             background:#fcc;

         }--%>

         .focus

         {

             border: 1px solid gray;

             background:gray;

         }

     </style>

     <script type="text/javascript">

         $(function () {

             $(":input").focus(function () {

                 $(this).addClass("focus");

             }).blur(function () {

                 $(this).removeClass("focus");

             });

         });

     </script>

 </head>

 <body>

     <form id="form1" runat="server" method="post">

     <div style="width: 300px; border: 1px solid black">

         <fieldset>

             <legend>个人基本信息</legend>

             <div>

                 <label for="username">

                     名称:</label>

                 <input id="username" type="text" />

             </div>

             <div>

                 <label for="pass">

                     密码:</label>

                 <input id="pass" type="password" />

             </div>

             <div>

                 <label for="msg">

                     详细信息:</label>

                 <textarea id="msg" rows="5" cols="10"></textarea>

             </div>

         </fieldset>

     </div>

     </form>

 </body>

 </html>

效果图:

jQuery学习笔记(5)--表单域获得焦点和失去焦点样式变化的更多相关文章

  1. jQuery学习笔记2——表单操作

    一.获取和设置表单的值:val()和text() 1. 获取表单的值: $("#username").val(); 2. 设置表单的值: $("#username&quo ...

  2. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. JS学习笔记7_表单脚本

    1.获取表单及表单元素引用的方式 var mForm = document.forms[formName];获取表单引用 mForm.elements[elemName]获取表单元素,如有同名的,则得 ...

  5. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  6. Symfony2学习笔记之表单

    对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...

  7. [学习笔记]--Jfinal 表单提交附件

    近期.项目里面用到了Jfinal 里面的上传附件. Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单參数一起提交. 页面类似下图: ...

  8. 20151223jquery学习笔记--Ajax表单提交

    传统的表单提交, 需要多次跳转页面, 极大的消耗资源也缺乏良好的用户体验. 而这款form.js 表单的 Ajax 提交插件将解决这个问题.一． 核心方法官方网站: http://malsup.com ...

  9. [知了堂学习笔记]_Jquery_Validate 表单校验的使用

    一.效果图: 二.JqueryValidate的好处 在做注册.或者类似以上的表单提交的时候,大家是不是都很烦那种,把数据拿到后台去判断, 可能经过了正则表达式之类的复杂判断,然后发现数据错误.接着通 ...

随机推荐

  1. Hive基础之自定义封装hivefile命令

    存在的问题:当把hql写到shell中,不方便阅读:但把hql写到文件中,又传递不了参数:怎么办呢? 自定义hivefile 执行方式形如: 第一个参数为要执行的hql文件,后续的参数为要替换的key ...

  2. FileZilla - Windows XP经典软件系列

    官网: https://filezilla-project.org/ 下载: http://sourceforge.net/projects/filezilla/ 版本:V3.9.0.1 (支持XP最 ...

  3. 一步一步学习Unity3d学习笔记系1.2 单机游戏和网游的数据验证概念

    这一次的笔记的主要内容是单机和网游的数据存储,数据验证方式,在游戏的时候除了控制角色的行动,还涉及到用户角色的升级,经验,金钱赚取,道具购买,技能升级 等等一些数据的交易, 那么单机游戏和网游的区别如 ...

  4. 使用Flex4的PopUpManager的addPopUp() 方法弹出 removeChild异常的解决办法

    Flex4中,弹出窗口有两种: Alert.show("balabalabala-");   PopUpManager.addPopUp([要弹出的控件],[父控件],[是否模态] ...

  5. 将Excel中数据导入数据库（三）

    上篇文章将Excel中数据导入数据库时,将从Excel读入的数据均转换成了数据库相应字段的类型,其实这是没有必要的,因为对于数据库各种类型的插入,均可以字符串格式插入.比如表WQ_SWMSAR_A字段 ...

  6. 【练习】显示MySQLadmin 库户籍选项

    [oracle@enmo ~]$ mysqladmin -V mysqladmin Ver , for Linux on x86_64

  7. js的捕捉事件，冒泡事件

    冒泡事件可以查询上个随笔, 捕捉事件正好和冒泡时间正反着 所以这代码我把冒泡事件注释, html和css的内容 <style type="text/css"> #box ...

  8. ASP.NET MVC4 学习系统一（项目模板）

    项目模板 1.空模板      空模板用于创建ASP.NETMVC 4网站的架构,包含基本的文件夹结构,以及需要引用的asp.netmvc程序集,也包含可能要使用的javaScript 库.模板同样包 ...

  9. python中set和frozenset方法和区别

    set(可变集合)与frozenset(不可变集合)的区别:set无序排序且不重复,是可变的,有add(),remove()等方法.既然是可变的,所以它不存在哈希值.基本功能包括关系测试和消除重复元素 ...

  10. Hyper-V下安装Ossim系统

    WindowsServer2008Hyper-V下安装Ossim系统 背景:很多朋友在用Hyper-v安装Linux的时候总是抱怨速度很慢,而且装好了系统无法识别网卡,可实际上针对网卡的问题本文提出了 ...