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>