jQuery中Form相关知识汇总

form中的单行文本获取和失去焦点

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <title></title>
    <style type="text/css">
        input:focus, textarea:focus {
            border: 1px solid#f00;
            background: #fcc;
        }
        .focus {
            border: 1px solid#f00;
            background: #fcc;
        }
    </style>
</head>
<body>
<form action="#" method="post" id="regForm">
    <fieldset>
        <legend>个人基本信息</legend>
        <div>
            <label for="username">名称:</label>
            <input id="username" type="text">
        </div>
        <div>
            <label for="pass">密码:</label>
            <input id="pass" type="password">
        </div>
        <div>
            <label for="msg">详细信息:</label>
            <textarea id="msg"></textarea>
        </div>
    </fieldset>
</form>
</body>
<script type="text/javascript">
    /**
     * 1.单行文本框---得到焦点和失去焦点
     * */
    $(function () {
        $(":input").focus(function () {
            $(this).addClass("focus");
        }).blur(function () {
            $(this).removeClass("focus");
        })
    })
</script>
</html>

更改多行文本的高度

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <title></title>
    <style type="text/css">
        * { margin:0; padding:0;font:normal 12px/17px Arial; }
        .msg {width:300px; margin:100px; }
        .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}
        .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }
        .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}
    </style>
</head>
<body>
<form>
    <div class="msg">
        <div class="msg_caption">
            <span class="bigger">放大</span>
            <span class="smaller">缩小</span>
        </div>
        <textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
        </textarea>
    </div>
</form>
</body>
<script type="text/javascript">
    /**
     * 多行文本框的高度调整
     * */
    $(function () {
        var $comment = $('#comment');
        $('.bigger').click(function () {
            if(!$comment.is(":animated")) {
                if($comment.height() < 500) {
                    //$comment.height($comment.height() + 50);//版本1
                    $comment.animate({height: "+=50"}, 400);
                }
            }
        });
        $('.smaller').click(function () {
            if(!$comment.is(":animated")) {
                if($comment.height() > 50) {
                    //$comment.height($comment.height() - 50);
                    $comment.animate({height: "-=50"}, 400);
                }
            }
        });
    });
</script>
</html>

更改多行文本的滚动条高度

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <title></title>
    <style type="text/css">
        * { margin:0; padding:0;font:normal 12px/17px Arial; }
        .msg {width:300px; margin:100px; }
        .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}
        .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }
        .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}
    </style>
</head>
<body>
<form>
    <div class="msg">
        <div class="msg_caption">
            <span class="up">向上</span>
            <span class="down">向下</span>
        </div>
        <textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
        </textarea>
    </div>
</form>
</body>
<script type="text/javascript">
    /**
     * 多行文本框的滚动条高度调整
     * */
    $(function () {
        var $comment = $('#comment');
        $('.up').click(function () {
            if(!$comment.is(":animated")) {
                if($comment.height() < 500) {
                    $comment.animate({scrollTop: "+=50"}, 400);
                }
            }
        });
        $('.down').click(function () {
            if(!$comment.is(":animated")) {
                if($comment.height() > 50) {
                    $comment.animate({scrollTop: "-=50"}, 400);
                }
            }
        });
    });
</script>
</html>

复选框应用

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <title></title>
    <style type="text/css">
        input:focus, textarea:focus {
            border: 1px solid#f00;
            background: #fcc;
        }
        .focus {
            border: 1px solid#f00;
            background: #fcc;
        }
    </style>
</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="乒乓球"/>乒乓球
    <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>
<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.checked = !this.checked;
            });
        });
        $("#send").click(function () {
            var str = "你选中的是: \r\n";
            $('[name=items]:checkbox:checked').each(function () {
                str += $(this).val() + "\r\n";
            });
            alert(str);
        });
    })
</script>
</html>

赞 (0)

相关推荐

  • jQuery-serialize()输出序列化form表单值的方法

    实例 输出序列化表单值的结果: 复制代码 代码如下: $("button").click(function(){ $("div").text($("form").serialize()); }); 定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语

  • jquery form 加载数据示例

    部分代码如下 复制代码 代码如下: <form id="fm" method="post" novalidate> <div style="height:26px" class="fitem"> <label>区域:</label> <input class="easyui-combobox" id="areaId" name=&qu

  • jquery表单验证使用插件formValidator

    jquery表单验证使用插件formValidator

    1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo

  • jquery EasyUI的formatter格式化函数代码

    要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数: value: 对应字段的当前列的值 record: 当前行的记录数据 复制代码 代码如下: $('#tt').datagrid({ title:'Formatting Columns', width:550, height:250, url:'datagrid_data.json', columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'p

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • jQuery实现form表单reset按钮重置清空表单功能

    有时候可能需要实现这样的效果:使用ajax提交表单,成功提交表单之后清空表单,如下代码: 复制代码 代码如下: <form> <input name="name1" /><br/> <input name="name1" /><br/> <textarea name="content"></textarea> <a href="javascript

  • jquery动态改变form属性提交表单

    有些情况下,同一个form在不同的情况下提交到不同的处理动作,可以在js中动态改变form的属性,满足不同条件的form提交需求. 如: 复制代码 代码如下: <form id="form" name="form" method="POST" enctype="multipart/form-data" action="action1.jsp" target="iframe">

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • jquery中$(#form :input)与$(#form input)的区别

    $("form :input") 返回form中的所有表单对象,包括textarea.select.button等 $("form input")返回form中的所有input标签对象 form input 是属于层级选择器(将每一个选择器匹配到的元素合并后一起返回) form :input是属于表单选择器(匹配所有<input>.<textarea>.<select>.<button>元素)

  • jQuery EasyUI API 中文文档 - Form表单

    Form 表单 用法 复制代码 代码如下: <form id="ff" method="post"> ... </form> 使 form 成为 ajax 提交的 form . 复制代码 代码如下: $('#ff').form({ url:..., onSubmit: function(){ // 做某些检查 // 返回 false 来阻止提交 }, success:function(data){ alert(data) } }); // 提

随机推荐