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

时间: 2024-10-01 05:02:26

jQuery表单 表格操作及应用的相关文章

js动态控制表单表格

js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table id="tabl" border=1 cellpadding=10 cellspacing=0&

待整理笔记(表单序列化操作、多态函数、对象的状态队列管理模式)

1.jquery的表单序列化操作 $('.form').serializeArray();通过serializeArray()方法得到表单form(class=“form”)的dom结点下所有含有name值的节点的value值的一个数组; 这个数组由多个对象构成,每个对象有name和value两个key值. 2.编程的多态性思想 利用函数的参数数组arguments,通过判断数组的长度来选择性执行某个功能: 例如: store: function(namespace, data, remove)

Jquery表单提交方式

1.使用调用submit方法 function tes1(){ //执行判断 if(校验通过){ $("#formId").submit(); }else{ return; } } 2.使用ajaxSubmit 方法,用到jquery.form.js $("#picForm").ajaxSubmit({ type: "post", dataType: "text", success: function(result){ ale

【jquery】Validform,一款不错的 jquery 表单验证插件

关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实! 功能简介 可以在 input 上直接绑定正则,可

【jQuery基础学习】06 jQuery表单验证插件-Validation

jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script

jQuery表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. 三.jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

jquery表单验证

js表单验证,这是个人做的总结,需要的请留言 需要文件:jquery.js, validator.js, validator.css, add.xml xml文件: <?xml version="1.0" encoding="utf-8"?> <root box="errorbox"> <username> <required>请填写姓名</required> </username

jquery表单序列化

http://gongwen.sinaapp.com/article-206.html jquery表单序列化,数据格式转成json格式;用的时候直接$('#FormId').serializeJson();便可. 代码如下: //jquery插件把表单序列化成json格式的数据start (function($){ $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var s

JQuery 表单验证--jquery validation

jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>jQuery validatio