JS练习 改变文本框状态

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>JS练习题</title>
 <script src="../jquery-1.11.2.min.js"></script><!--引入jquery包-->
 </head>

 <body>
 题目：创建4个文本框，当文本框内没有内容的时候显示白色，有输入内容时换色
     <div>
         <!--先在一个div里面创建4个文本框-->
         <input type="text" class="txt" />
         <input type="text" class="txt" />
         <input type="text" class="txt" />
         <input type="text" class="txt" />
     </div>
 </body>
 <script type="text/javascript">
 $(document).ready(function(e) {
         //假日一个使文本框失去焦点的事件
         $(".txt").blur(function() {
             if($(this).val().trim() !="")
             {
                 $(this).css("background-color","#0FF");    //在文本框内输入内容，文本框的颜色就变成#0FF颜色
             }
             else
             {
                 $(this).css("background-color","#C0F");//在文本框内不输入内容（进行了去空格处理）或者空字符串，文本框的颜色就变成#C0F颜色
             }
         });

 });

 </script>
 </html>