<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. ibatis配置多表关联（一对一、一对多、多对多）

    iBatis的多表关联. ibatis的表关联,和数据库语句无关,是在程序中,把若干语句的结果关联到一起.这种关联形式,虽然在大数据量时是很奢侈的行为,但是看起来很干净,用起来也很方便. 这里用表lo ...

  2. Java－convert between INT and STRING

    int -> String 三种写法 String s = 43 + ""; String s = String.valueOf(43); String s = Intege ...

  3. Appium环境搭建Java篇

    1.下载.安装JDK&配置Java环境变量 JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html ...

  4. 如何在 Git 里撤销(几乎)任何操作

    任何版本控制系统的一个最有的用特性就是“撤销 (undo)”你的错误操作的能力.在 Git 里,“撤销” 蕴含了不少略有差别的功能. 当你进行一次新的提交的时候,Git 会保存你代码库在那个特定时间点 ...

  5. &&和||的那点事儿

    以前一直以为&&和||的运算结果就是布尔值,但今天看到一段代码又填补的一些知识漏洞. var a = (1&&2&&5) || 3; console.l ...

  6. How to deploy JAVA Application on Azure Service Fabric

    At this moment, Azure Service Fabric does not support JAVA application natively (but it's on the sup ...

  7. Android 操作系统的内存回收机制

    参考 http://www.ibm.com/developerworks/cn/opensource/os-cn-android-mmry-rcycl/index.html

  8. java中sesion

    Session     *Cookie基于客户端,不安全,并且大小和个数的限制.     *Session域对象,范围一次会话范围,存个人相关的数据.     *setAttribute(String ...

  9. 用命令实现Win7远程桌面关机和重启

    关机 shutdown -s -t 0 重启 shutdown -r -t 0 打开运行框(Win+R键),输入上述命令即可,后面的数字表示关机/重启延迟的时间 at 12:00 shutdown - ...

  10. noip2010提高组题解

    NOIP2010提高组题解 T1:机器翻译 题目大意:顺序输入n个数,有一个队列容量为m,遇到未出现元素入队,求入队次数. AC做法:直接开1000的队列模拟过程. T2:乌龟棋 题目大意:有长度为n ...