首页 > Web开发 > 详细

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

时间:2014-07-24 23:08:13      阅读:474      评论:0      收藏:0      [点我收藏+]

    众所周知,各种浏览器对于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>  


jQuery_review之一行语句搞定表单焦点样式,布布扣,bubuko.com

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

原文:http://blog.csdn.net/ziwen00/article/details/38092377

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!