zoukankan      html  css  js  c++  java
  • jQuery表单 表格操作及应用

    1.文本框添加获取和失去焦点事件  

    .focus()     .blur()

    2.多行文本框变大(+) 变小(-)代码

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

    3.滚动条scrollTop()

      var $comment=$("#comment");

                $(".up").click(function(){
                    if(!$comment.is(":animated")){
                        $comment.animate({ scrollTop : "-=50" },400);
                    }
                });

    4. 复选框

        <script type="text/javaScript">
            $(function(){
                $("#CheckedAll").click(function(){    //绑定单击全选事件
                    $("[name=items]:checkbox").attr("checked",true);
                });
                $("#CheckedNo").click(function(){ //绑定单击全不选事件
                    $("[name=items]:checkbox").attr("checked",false);
                });
                $("#CheckedRev").click(function(){  //绑定单击反选事件
                    $("[name=items]:checkbox").each(function(){
                        $(this).attr("checked",!$(this).attr("checked"));
                    });
                });

                $("#send").click(function(){  //绑定单击提交事件
                    var str="你选择的是: ";
                    $("[name=items]:checkbox:checked").each(function(){
                        str += $(this).val()+" ";
                    });
                    alert(str);
                });
                

            });
        </script>
    </head>
    <body>
        <form>
            你爱好的运动是?<br />
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="蓝球" />蓝球
            <input type="checkbox" name="items" value="羽毛球" />羽毛球
            <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
            <input type="button" id="CheckedAll" value="全选" />
            <input type="button" id="CheckedNo" value="全不选" />
            <input type="button" id="CheckedRev" value="反选" />
            <input type="button" id="send" value="提交" />
            
        </form>
    </body>

    $("#CheckedALL").click(function(){    //绑定复选框全选/全不选复选框事件
                    if(this.checked){
                        $("[name=items]:checkbox").attr("checked",true);                    
                    }else{
                        $("[name=items]:checkbox").attr("checked",false);    
                    }
                });

  • 相关阅读:
    一个iOS图片选择器的DEMO(实现图片添加,宫格排列,图片长按删除,以及图片替换等功能)
    [小细节,大BUG]记录一些小问题引起的大BUG(长期更新....)
    利用runTime,实现以模型为主的字典转模型(注意与KVC的区别)
    项目总结(三)--- 关于版本控制器
    项目总结(一)--- 关于用到的设计模式
    EntityFramework与TransactionScope事务和并发控制
    Entity Framework与ADO.NET批量插入数据性能测试
    Mathtype公式位置偏上
    FreeSWITCH 加载模块过程解读
    FreeSWITCH调用第三方TTS 使用tts_commandline
  • 原文地址:https://www.cnblogs.com/qdmaomao/p/4533950.html
Copyright © 2011-2022 走看看