当前位置：移动技术网 > IT编程>开发语言>JavaScript > jQuery中Form相关知识汇总

jQuery中Form相关知识汇总

2019年03月30日 | 移动技术网IT编程 | 我要评论

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>
        <p>
            <label for="username">名称:</label>
            <input id="username" type="text">
        </p>
        <p>
            <label for="pass">密码:</label>
            <input id="pass" type="password">
        </p>
        <p>
            <label for="msg">详细信息:</label>
            <textarea id="msg"></textarea>
        </p>
    </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>
    <p class="msg">
        <p class="msg_caption">
            <span class="up">向上</span>
            <span class="down">向下</span>
        </p>
        <textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
        </textarea>
    </p>
</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>

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

小白测试系列:badboy默认浏览器修改

badboy使用的浏览器为系统默认浏览器，如果需要更换浏览器，直接修改系统默认浏览器即可，这里推荐用最liuma... [阅读全文]
nginx网站安全漏洞修复

前言：公司项目交付之前甲方进行了安全漏洞的扫描。大部分漏洞都是因为nginx响应没有加上仿攻击的响应头。记录一下... [阅读全文]
信息收集--绕过CDN寻找真实IP

0x01 验证目标是否存在CDN1、使用世界各地ping服务，如果地址不唯一，多半是用了CDN下例是我常使用的在... [阅读全文]
TCP和UDP的优缺点及区别

TCP的优点：可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有... [阅读全文]
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例

以vs2012为标准。转自：http://technet.microsoft.com/zh-cn/library... [阅读全文]
CTF 刷题记录（一）白云新闻搜索（手动与自动化SQL注入）

题目给出的靶机如下：解题思路首先判断这是考察哪个知识点，只有一个输入框，题目中又说到入侵，首先考虑sql注入，下... [阅读全文]
Node.js 深度调试方法解析

在 node.js 项目开发过程中，随着项目的发展，调用关系越来越复杂，调试工具的重要性日益凸显。node(v6.3+)集成了方便好用 v8 inspect 调... [阅读全文]
javascript如何使用函数random来实现课堂随机点名方法详解

如何使用函数random来实现课堂随机点名1.最初的样子如下2.点击开始点名，上面一行的文字变成名字，名字在不停的变化，开始点名变成停止点名，如下3.点击停止点... [阅读全文]
从0到1学习JavaScript编写贪吃蛇游戏

本文实例为大家分享了javascript编写贪吃蛇游戏的具体代码，供大家参考，具体内容如下游戏截图1.画出游戏界面var c=document.geteleme... [阅读全文]
js编写简易的计算器

本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下使用绑定时间触发加减乘除加：减：乘：除：源代码：<body> 第一个数... [阅读全文]

网友评论


验证码：

jQuery中Form相关知识汇总

2019年03月30日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论