jQuery_review之一行语句搞定表单焦点样式

来源：互联网发布：软件招商加盟编辑：程序博客网时间：2024/05/29 09:14

众所周知，各种浏览器对于HTML、CSS以及原生JS的支持不尽相同。但是jQuery很好地封装了各种浏览器不同的实现，能够很好地解决跨浏览器的CSS问题。下面就是在review表单操作的时候的一个DEMO，记录在这个地方，方便后面做项目的时候查找使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>  <script type="text/javascript" src="jquery-1.8.3.js"></script>  <script type="text/javascript">      $(function(){            $("input[type='text']").focus(function(){              $(this).addClass("onfocus");          }).blur(function(){              $(this).removeClass("onfocus");          });      });  </script>  <style type="text/css">      input.onfocus{          border:solid red 2px;          background-color:grey;          }  </style>  </head>  <body>      <form action="#" method="get">          <label for="name">name:</label>              <input type="text" name="name"><br/>          <label for="address">address:</label>              <input type="text" name="address"><br/>          <label for="email">E-mail:</label>              <input type="text" name="email"><br/>          <label for="qq">QQ:</label>              <input type="text" name="qq"><br/>          <input type="button" value="submit"><br/>      </form>  </body></html>

0 0