文档章节

jQuery 05 表单操作/表格操作

fokYaland
 fokYaland
发布于 2015/06/04 17:26
字数 1598
阅读 5
收藏 0
获取和失去焦点改变样式
<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>

本文转载自:http://blog.csdn.net/yanliang1/article/details/9498285

fokYaland
粉丝 4
博文 68
码字总数 3062
作品 0
东城
私信 提问
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
0
0
6月份最受欢迎的 15 个新的 jQuery 插件

每个月我们都会将上个月最新的和最受欢迎一些 jQuery 插件推荐给大家,现在让我们来看看上个月的最新热门 jQuery 插件吧。 1. jQuery++ jQuery++ 在 jQuery 1.7.x 的基础上增加了一些 DOM 助...

oschina
2012/07/04
5.1K
5
Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵
2018/06/21
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0
2009 年度最佳 jQuery 插件

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesig...

红薯
2009/12/12
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Java编程学习-Java虚拟机(JVM)以及跨平台原理

相信大家已经了解到Java具有跨平台的特性,可以“一次编译,到处运行”,在Windows下编写的程序,无需任何修改就可以在Linux下运行,这是C和C++很难做到的。 那么,跨平台是怎样实现的呢?这...

Java领航员
14分钟前
0
0
学JFinal不迷路,JFinal优质资源列表(欢迎反馈更新)

学JFinal不迷路,记录一下JFinal相关的资源、产品、讲师等信息(所有信息排名不分先后)。 一、相关站点: 1、JFinal官网-问答、分享、文档、交流、俱乐部 http://www.jfinal.com 2 、JFina...

山东-小木
18分钟前
0
0
项目学习(2)-order-job

在当前的系统中,因为并发量并不高,服务之间发起异步请求或者异步调用时,没有使用到消息中间件。 而是在各个服务(子系统)的数据库中,创建了event_queue事件对列表和event_handler事件处...

太猪-YJ
26分钟前
0
0
gradle grovvy中的闭包

1. 无参数的闭包 //这b1就是一个闭包def b1={ println "hello b1"}//定义方法,包含闭包类型的参数def method1(Closure closure){closure()}//执行method1method1(b1) 执行结果 ...

edison_kwok
今天
3
0
基于Spring Boot + Dubbo的全链路日志追踪(一)

一、 概要 当前公司后端整体架构为:Spring Boot + Dubbo。由于早期项目进度等原因,对日志这块没有统一的规范,基本上是每个项目自己管自己的日志。这也对后面的问题排查带来了很大的困难,...

明天以后
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部