码迷,mamicode.com
首页 > Web开发 > 详细

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

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

标签:style   java   color   使用   os   io   for   re   

    众所周知,各种浏览器对于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之一行语句搞定表单焦点样式

标签:style   java   color   使用   os   io   for   re   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!