jQuery 05 表单操作/表格操作

获取和失去焦点改变样式

<script type="text/javascript">
    $(function(){
          $(":input"). focus(function(){
                 $(this). addClass("focus");
          }). blur(function(){
                 $(this). removeClass("focus");
          });
    })
</script>

<script type="text/javascript">
    $(function(){
          $(":input"). focus(function(){
                 $(this).addClass("focus");
                 if($(this).val() == this.defaultValue){ 
                  $(this).val("");          
                 }
          }). blur(function(){
               $(this).removeClass("focus");
               if ($(this).val() == '') {
                $(this).val( this.defaultValue);
             }
          });
    })
</script>

---

高度变化

 <script type="text/javascript">
     $(function(){
         var $comment = $('#comment');  //获取评论框
         $('.bigger').click(function(){ //放大按钮绑定单击事件
             if( !$comment.is(":animated")){ //判断是否处于动画
                 if( $comment.height() < 500 ){
                           $comment. animate({ height : "+=50" },400); //重新设置高度，在原有的基础上加50
                 }
               }
          })
          $('.smaller').click(function(){//缩小按钮绑定单击事件
             if( !$comment.is(":animated")){//判断是否处于动画
                    if( $comment.height() > 50 ){
                         $comment. animate({ height : "-=50" },400); //重新设置高度，在原有的基础上减50
                    }
               }
          });
     });
  </script>

---

控制滚动条

 <script type="text/javascript">
     $(function(){
         var $comment = $('#comment');//获取评论框
         $('.up').click(function(){ //向上按钮绑定单击事件
             if( !$comment.is(":animated")){//判断是否处于动画
                    $comment. animate({ scrollTop  : "-=50" } , 400);
               }
          })
          $('.down').click(function(){//向下按钮绑定单击事件
             if( !$comment.is(":animated")){
                    $comment. animate({ scrollTop  : "+=50" } , 400);
               }
          });
     });
  </script>

---

复选框操作

<script type="text/javascript">
  $(function(){
     //全选
     $("#CheckedAll").click(function(){
            $('[name=items]:checkbox').attr('checked', true);
     });
     //全不选
     $("#CheckedNo").click(function(){
           $('[type=checkbox]:checkbox').attr('checked', false);
     });
     //反选
     $("#CheckedRev").click(function(){
              $('[name=items]:checkbox').each(function(){
               //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
               //$(this).attr("checked", !$(this).attr("checked"));
               //$(this).prop("checked", !$(this). prop("checked"));
              
               //直接使用JS原生代码，简单实用
                 this.checked=!this.checked;
            });
     });
     //输出值
     $("#send").click(function(){
          var str="你选中的是：\r\n";
            $('[name=items]:checkbox:checked').each(function(){
               str+= $(this).val()+"\r\n";
          })
          alert(str);
     });
  })

  </script>

 <script>
$(function(){
     //全选
     $("#CheckedAll"). click(function(){
               if(this.checked){                    //如果当前点击的多选框被选中
                      $('input[type=checkbox][name=items]').attr("checked", true );
               }else{                                       
                      $('input[type=checkbox][name=items]').attr("checked", false );
               }
     });
     $( 'input[type=checkbox][name=items]').click(function(){
                  var flag=true;
               $( 'input[type=checkbox][name=items]').each(function(){
                         if( !this.checked){
                              flag = false;
                         }
                  });

                  if( flag ){
                         $('#CheckedAll').attr('checked', true );
                  }else{
                         $('#CheckedAll').attr('checked', false );
                  }
     });
       //输出值
     $("#send").click(function(){
          var str="你选中的是：\r\n";
          $( 'input[type=checkbox][name=items]:checked').each(function(){
               str+= $(this).val()+"\r\n";
          })
          alert(str);
     });
})
  </script>

 <script type="text/javascript">
$(function(){
     //全选
     $("#CheckedAll").click(function(){
               //所有checkbox跟着全选的checkbox走。
                 $('[name=items]:checkbox').attr("checked", this.checked );
     });
     $( '[name=items]:checkbox').click(function(){
                    //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
                    var $tmp=$( '[name=items]:checkbox');
                    //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
                    $('#CheckedAll'). attr('checked',$tmp.length==$tmp.filter(':checked').length);

               /*
                    //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。
                    $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
               */
     });
       //输出值
     $("#send").click(function(){
          var str="你选中的是：\r\n";
          $(' [name=items]:checkbox:checked').each(function(){
               str+=$(this).val()+"\r\n";
          })
          alert(str);
     });
});
  </script>

---

下拉框应用

<script type="text/javascript">
$(function(){
     //移到右边
     $('#add').click(function() {
     //获取选中的选项，删除并追加给对方
          $(' #select1 option:selected'). appendTo('#select2');
     });
     //移到左边
     $('#remove').click(function() {
          $('#select2 option:selected').appendTo('#select1');
     });
     //全部移到右边
     $('#add_all').click(function() {
          //获取全部的选项,删除并追加给对方
          $(' #select1 option').appendTo('#select2');
     });
     //全部移到左边
     $('#remove_all').click(function() {
          $('#select2 option').appendTo('#select1');
     });
     //双击选项
     $('#select1').dblclick(function(){ //绑定双击事件
          //获取全部的选项,删除并追加给对方
          $( "option:selected",this).appendTo('#select2'); //追加给对方
     });
     //双击选项
     $('#select2').dblclick(function(){
        $( "option:selected",this).appendTo('#select1');
     });
});
</script>

---

表单验证

<script type="text/javascript">
//<![CDATA[
$(function(){
          //如果是必填的，则加红星标识.
          $(" form :input.required"). each(function(){
               var $required = $("<strong class='high'> *</strong>"); //创建元素
                 $(this).parent().append($required); //然后将它追加到文档中
          });
         //文本框失去焦点后
         $(' form :input'). blur(function(){
               var $parent = $(this).parent();
                 $parent.find(".formtips").remove();
               //验证用户名
               if(   $(this).is('#username')  ){
                         if( this.value=="" || this.value.length < 6 ){
                             var errorMsg = '请输入至少6位的用户名.';
                             $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                         }else{
                             var okMsg = '输入正确.';
                             $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                         }
               }
               //验证邮件
               if(   $(this).is('#email')  ){
                    if( this.value=="" || ( this.value!="" &&   !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)  ) ){
                      var errorMsg = '请输入正确的E-Mail地址.';
                           $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                    }else{
                      var okMsg = '输入正确.';
                           $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                    }
               }
          }). keyup(function(){
             $(this). triggerHandler("blur");
          }). focus(function(){
               $(this). triggerHandler("blur");
          });//end blur

         
          //提交，最终验证。
          $('#send').click(function(){
                    $(" form :input.required"). trigger('blur');
                    var numError = $('form .onError').length;
                    if(numError){
                         return false;
                    }
                    alert("注册成功,密码已发到你的邮箱,请查收.");
          });

          //重置
          $('#res').click(function(){
                      $(".formtips").remove();
          });
})
//]]>
</script>

---

表格变色

<script type="text/javascript">
     $(function(){
          $(" tbody>tr:odd"). addClass("odd"); //先排除第一行,然后给奇数行添加样式
          $(" tbody>tr:even"). addClass("even"); //先排除第一行,然后给偶数行添加样式
          $('tbody>tr').click(function() {
               if ($(this). hasClass('selected')) {
                    $(this)
                         . removeClass('selected')
                         . find(':checkbox').attr('checked',false);
               }else{
                    $(this)
                         .addClass('selected')
                         .find(':checkbox').attr('checked',true);
               }
          });
          // 如果复选框默认情况下是选择的，则高色.
          // $('table :checkbox:checked').parent().parent().addClass('selected');
          //简化:
          $('table :checkbox:checked'). parents("tr").addClass('selected');
          //$('tbody>tr:has(:checked)').addClass('selected');
  })
</script>

<script type="text/javascript">
  $(function(){
          $("tbody>tr:odd").addClass("odd");
          $("tbody>tr:even").addClass("even");
          $('tbody>tr').click(function() {
               //判断当前是否选中
               var hasSelected= $(this).hasClass('selected');
               //如果选中，则移出selected类，否则就加上selected类
               $(this) [hasSelected?"removeClass":"addClass"]('selected')
                    //查找内部的checkbox,设置对应的属性。
                    .find(' :checkbox').attr('checked',!hasSelected);
          });
          // 如果复选框默认情况下是选择的，则高色.
          $(' tbody>tr:has(:checked)').addClass('selected');
  })
</script>

---

表格展开伸缩

<script type="text/javascript">
$(function(){
     $('tr.parent').click(function(){   // 获取所谓的父行
               $(this)
                    . toggleClass("selected")   // 添加/删除高亮
                    . siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行
     }). click();
})
</script>

---

表格内容过滤

<script type="text/javascript">
  $(function(){
       $("#filterName"). keyup(function(){
           $("table tbody tr")
                         . hide()
                         . filter(":contains('"+( $(this).val() )+"')")
                         .show();
        }). keyup();
  })
</script>

---

控制字体大小

<script type="text/javascript">
     $(function(){
          $("span").click(function(){
               var thisEle = $("#para"). css("font-size");
               var textFontSize =   parseInt(thisEle , 10);
               var unit = thisEle. slice(-2); //获取单位
               var cName = $(this).attr("class");
               if(cName == "bigger"){
                       if( textFontSize <= 22 ){
                              textFontSize += 2;
                         }
               }else if(cName == "smaller"){
                       if( textFontSize >= 12  ){
                              textFontSize -= 2;
                         }
               }
               $("#para"). css("font-size",  textFontSize + unit);
          });
     });
  </script>

---

选项卡

<script type="text/javascript" >
//<![CDATA[
     $(function(){
         var $div_li =$(" div.tab_menu ul li");
         $div_li.click(function(){
               $(this). addClass("selected")            //当前<li>元素高亮
                       . siblings(). removeClass("selected");  //去掉其它同辈<li>元素的高亮
            var index =  $div_li. index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
               $("div.tab_box > div")        //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
                         . eq(index).show()   //显示 <li>元素对应的<div>元素
                         . siblings().hide(); //隐藏其它几个同辈的<div>元素
          }). hover(function(){
               $(this).addClass("hover");
          },function(){
               $(this).removeClass("hover");
          })
     })
//]]>
</script>

---

<head>
    <title></title>
     <link href="css/default.css" rel="stylesheet" type="text/css" />
      <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
    <!--   引入jQuery -->
     <script src="../../scripts/jquery.js" type="text/javascript"></script>
     <!--   引入jQuery的cookie插件 -->
     <script src=" js/jquery.cookie.js" type="text/javascript"></script>
     <script type="text/javascript">
          //<![CDATA[
          $(function(){
               var $li =$("#skin li");
               $li.click(function(){
                    switchSkin(   this.id  );
               });
               var cookie_skin =   $.cookie( "MyCssSkin");
               if (cookie_skin) {
                    switchSkin( cookie_skin );
               }
          });
          function switchSkin(skinName){
                    $( "#"+skinName).addClass("selected")                 //当前<li>元素选中
                                     .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
                    $(" #cssfile"). attr("href","css/"+ skinName +".css"); //设置不同皮肤
                      $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
          }
          //]]>
     </script>
</head>