码迷,mamicode.com
首页 > Web开发 > 详细

jQuery表单 表格操作及应用

时间:2015-05-27 18:53:28      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

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

 

jQuery表单 表格操作及应用

标签:

原文地址:http://www.cnblogs.com/qdmaomao/p/4533950.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!