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);    
                    }
                });

  • 相关阅读:
    能大大提升工作效率和时间效率的9个重要习惯
    hibernate的校验
    8. semahpore原理
    chklist
    android textview 自动换行 整齐排版
    fiddler接口测试,js代码修改日志展示(埋点用)
    Python模块之 tqdm进度条
    Python抓取网页到本地
    Python模块之 clint 进度条
    python windows下pip安装错误whl文件安装错误
  • 原文地址:https://www.cnblogs.com/qdmaomao/p/4533950.html
Copyright © 2011-2022 走看看