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="你选择的是:\r\n";
                $("[name=items]:checkbox:checked").each(function(){
                    str += $(this).val()+"\r\n";
                });
                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);    
                }
            });

 

posted @ 2015-05-27 17:18  前端_茂  阅读(269)  评论(0编辑  收藏  举报