xml地图|网站地图|网站标签 [设为首页] [加入收藏]

软件资讯

当前位置:美高梅游戏网站 > 软件资讯 > jQuery对表单、表格的操作及越来越多选择

jQuery对表单、表格的操作及越来越多选择

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-04 02:11

jQuery对表单、表格的操作及更多的应用
1 表单应用
 一个表单有3个基本组成部分。
 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法
 (2) 表单域:包含文本框、密码框、隐藏框、多行文本框、复选框、单选框、下拉选择框和
 文件上传框等
 (3) 表单按钮:包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上或者取消
 传送,还可以用来控制其他定义处理脚本的处理工作。
 1 单行文本框应用
 jQuery代码如下:6.1.1.html
 2 多行文本框应用
 1. 高度变化
    jQuery代码如下:6.1.2.1.html
 2. 滚动条高度变化
    在多行文本中,还有另外一个应用,就是通过控制多行文本框的滚动条的变化,使
    文本框里的内容滚动。
    jQuery代码如下:6.1.2.2.html
 3 复选框应用
 对复选框最基本的应用,就是对复选框进行全选、反选和全不选等操作。
 jQuery代码如下:6.1.3.html
 4 下拉框的应用
 jQuery代码如下:6.1.4.html
 5 表单验证
 jQuery代码如下:6.1.5.html
2 表格应用
 1 表格变色
 1. 普通的各行变色
    jQuery代码如下:6.2.1.1.html
 2. 单选框控制表格行高亮
    jQuery代码如下:6.2.1.2.html
    代码中的$('table :radio:checked').parent().parent().addClass('selected');
    是通过parent()方法逐步向父节点获取相应的元素的,也可以使用parents()方法
    直接获取。
    $('table :radio:checked').parents('tr').addClass('selected');
    此外,如果通过has选择器也可以进一步简化,表示含有选中的单选框的<tr>行将
    被高亮显示:$('tbody>tr:has(:checked)').addClass('selected');
 3. 复选框控制表格行高亮
    jQuery代码如下:6.2.1.3.html
    在代码$(this)[hasSelected ? "removeClass" : "addClass"]('selected')中:
    [hasSelected ? "removeClass" : "addClass"]这是一个三元运算符,结果为:
    "removeClass"或者是"addClass"。因此
    $(this)[hasSelected ? "removeClass" : "addClass"]('selected')其实代表这
    两种情况
    $(this)["removeClass"]('selected');
    或者是$(this)["addClass"]('selected');
    它等价于:
    $(this).removeClass('selected');
    或者是$(this).addClass('selected');
 2 表格展开关闭
 jQuery代码如下:6.2.2.html
 3 表格内容筛选
 jQuery代码如下:6.2.3.html
3 其他应用
 1 网页字体大小
 jQuery代码如下:6.3.1.html
 2 网页选项卡
 jQuery代码如下:6.3.2.html
 3 网页换肤
 jQuery代码如下:6.3.2.html

图片 1

摘自:zhangda89的博客

文章头图

1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序...

学习了jQuery的基本语法,发现jQuery的选择器非常强大,还解决了浏览器的兼容问题,迫不及待想要尝试一下,于是对着书本的案例实现了一些小案例,虽然是小案例,但是对我来说也不容易,花了好多时间才调试通过。意识到知识不去整理,很快就忘记,加上本次学习的都是一些比较常用的案例,于是想记录下来,方便以后直接拷贝~~

1、单行文本框添加获取、失去焦点样式事件

对文本框的操作,包括获取焦点时候输入框变色、失去焦点时恢复原来的颜色。需要注意的是:input的边框必须设置为2px,textarea的边框必须设置为1px,这样才能防止它们获取和失去焦点时,产生“抖动”现象。具体请看下面代码,大家可以新建一个html文件,随意改动一下input和textarea的边框看看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框获取和失去焦点事件</title>
    <style type="text/css">
        body fieldset{
            width: 400px;
            margin: 0 auto; /*垂直居中*/
        }
        body input{
            width: 200px;
            height: 28px;
        }
        body div{
            margin: 15px 0;
        }
        body textarea{
            vertical-align: middle;
            width: 400px;
            height: 100px;
        }

        .bor{
            outline: none;
            border:2px solid red; /*input的边框大小设置为2px,防止focus和blur时组件的大小发生改变,产生“抖动”。*/
        }
        .bor2{
            outline: none;
            border:1px solid red; /*textarea的边框大小设置为2px,防止focus和blur时组件的大小发生改变,产生“抖动”*/。
        }
    </style>
</head>


<body>
    <form action="#" method="POST" id="regForm">
        <fieldset>
            <legend>个人基本信息</legend>
            <div>
                <label for="userName">名称:</label>
                <input type="text" name="用户名" id="userName">
            </div>
            <div>
                <label for="psw">密码:</label>
                <input type="password" name="密码" id="psw">
            </div>
            <div>
                <label for="msg">详细信息:</label>
                <textarea id="msg"></textarea>
            </div>
        </fieldset>
    </form>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){  //单独input设置样式,防止边框大小产生的“抖动”!
            $("input").focus(function(){
                $(this).addClass("bor");
            }).blur(function(){
                $(this).removeClass("bor");
            });

            $("textarea").focus(function(){ //单独textarea设置样式,防止边框大小产生的“抖动”!
                $(this).addClass("bor2");
            }).blur(function(){
                $(this).removeClass("bor2");
            });
        });
    </script>

</body>
</html>

运行效果如下:

图片 2

文本框获取和失去焦点样式控制

2、多行文本框高度和滚动条的操作

对多行文本框添加事件,包括调整文本框的高度、操作滚动条,加上过度动画等。具体请看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行文本框高度变化</title>
    <style type="text/css">
        span{
            display: inline-block;
            width: 60px;
            height: 40px;
            background: #ccc;
            font-size: 12px;
            color: white;
            line-height: 40px;
            text-align: center;
            cursor: pointer; /*设置指针为手型,使其像可点击的按钮*/
        }
        span:hover{  /*鼠标经过,背景变为橙色*/
            background-color: orange; 
        }

        form{
            width: 400px;
            margin: 0 auto;
        }

        textarea{
            overflow: visible;
        }
    </style>
</head>
<body>
    <form action="">
        <div class="msg_caption">
            增加高度
            减少高度
            滚动条上
            滚动条下
        </div>
        <div>
            <label for="comment">文本框的高度(范围50px-500px,每次调整50px)</label>
            <textarea id="comment" name="" cols="56" rows="8"></textarea>
        </div>

    </form>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            var $comment=$('#comment');//获取评论框
            var heigh="";
            $('.bigger').click(function(){  //给“放大按钮”绑定事件
                if (!$comment.is(":animated")){ //确保当前没有动画正在执行,防止动画队列累积。
                    if ($comment.height()<500) {
                        // $comment.height($comment.height() - 50);没有动画的代码
                        $comment.animate({height:"+=50"},300); //设置动画。让过度更自然
                    }
                }

            }); 

            $('.smaller').click(function(){ //给“缩小按钮”绑定事件
                if (!$comment.is(":animated")) { //确保当前没有动画正在执行,防止动画队列累积。
                    if ($comment.height()>50) {
                        // $comment.height($comment.height() - 50);没有动画的代码
                        $comment.animate({height:"-=50"},300); //设置动画。让过度更自然
                    }
                }

            }); 


            $('.up').click(function(){ //给“向上滚动”绑定事件
                if (!$comment.is(":animated")) { //确保当前没有动画正在执行,防止动画队列累积。
                    // $comment.height($scrollTop.height() - 50);没有动画的代码
                    $comment.animate({scrollTop:"-=50"},300); //设置动画。让过度更自然
                }

            }); 

            $('.down').click(function(){ //给“向下滚动”绑定事件
                if (!$comment.is(":animated")) { //确保当前没有动画正在执行,防止动画队列累积。
                    // $comment.height($scrollTop.height() + 50);没有动画的代码
                    $comment.animate({scrollTop:"+=50"},300); //设置动画。让过度更自然
                }

            }); 
        });
    </script>
</body>
</html>

运行效果如下:

图片 3

image.png

3、复选框的基本操作(全选/全不选、反选、联动)

对复选框的操作,包括:全选/全不选、反选、联动(全选按钮的状态会跟随选项组的变化而变化,选项组中有一个没有选中,全选按钮都不会选中。反过来也一样,选项组全部选中时,全选按钮会自动变为选中状态)。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框基本操作</title>
    <style type="text/css">
        form{
            width: 600px;
            margin: 0 auto;
        }
        form div{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <form>
        <h3>你爱好的运动是什么?</h3>
            <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="checkbox" id="checkAll"/><label for="checkAll">全选/全不选</label>
            <input type="checkbox" id="checkRev"/><label for="checkAll">反选</label>
        <div>
            <input type="button" value="提交" id="send"/>
        </div>
    </form>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){ 
            $("#checkAll").click(function(){ //全选/全不选操作
                $('[name=items]:checkbox').prop("checked",this.checked);
            });

            $("#checkRev").click(function(){ //反选操作
                $('[name=items]:checkbox').each(function(){
                    $(this).prop("checked",!$(this).prop("checked"));//jQuery写法
                    // this.checked=!this.checked;//JavaScript写法,更加简洁
                });
            });

            $('[name=items]:checkbox').click(function(){  //对复选框组绑定事件
                var flag=true;
                $('[name=items]:checkbox').each(function(){ //遍历每一个名为items的checkbox
                    if(!this.checked){//如果有未选中的
                        flag=false;
                    }
                });
                $('#checkAll').prop('checked',flag);//将全选框设置为“未选中”状态 
            });

            $('#send').click(function(){ //为发送按钮绑定click事件,弹出选中的选项。
                var str="你选中的是:rn";
                $('[name=items]:checkbox:checked').each(function(){
                    str += $(this).val()+"rn";
                });
                alert(str);
            });

        });


    </script>
</body>
</html>

运行效果:

图片 4

复选框操作

4、移动下拉框内容(单击移动、全部移动、双击移动)

对下拉框的操作,包括:将选中的内容移动到另一个选项组中、双击某个选项移动到另一个选项组中、全部选项移动到另一个选项组中。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制下拉框的内容</title>
    <style type="text/css">
        .comWidth{
            width: 400px;
            margin: 0 auto;
        }
        .content{
            float: left;
            margin: 0 auto;
            /*height: 240px;*/
            margin-right: 10px;
            padding:10px 5px;
        }
        #select1{
            width: 140px;
            height: 160px;
            margin-bottom: 10px;
        }
        #select2{
            width: 140px;
            height: 160px;
            margin-bottom: 10px;
        }

        span{
            display: block;
            background: #ccc;
            padding: 2px;
            font-size: 12px;
            cursor: pointer;
            margin-bottom: 5px;
        }

        .tips{
            clear: both;
            color: #f00;
            font-size: 10px;
            text-indent: 5px;
        }
    </style>
</head>
<body>
<div class="comWidth">
    <div class="content">
        <h3>左边:</h3>
        <select multiple id="select1">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
        </select>
        <div>
            >>添加选中内容到右边
            >>添加所有内容到右边
        </div>
    </div>
    <div class="content">
        <h3>右边:</h3>
        <select multiple id="select2">
        </select>
        <div>
            >>移动选中内容到左边
            >>移动所有内容到左边
        </div>
    </div>
    <div class="tips">提示:双击也可以移动选项!</div>
</div>


<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $('#add').click(function(){ //将选中的option移动到右边
            var $options = $('#select1 option:selected');
            // var $remove = $options.remove();//append方法自带删除功能,不用remove也行。
            $options.appendTo('#select2');
        });

        $('#addAll').click(function(){ //将全部option移动到右边
            var $options = $('#select1 option');
            // var $remove = $options.remove();//append方法自带删除功能,不用remove也行。
            $options.appendTo('#select2');
        });

        $('#remove').click(function(){ //将全部option移动到左边
            var $options = $('#select2 option:selected');
            // var $remove = $options.remove();//append方法自带删除功能,不用remove也行。
            $options.appendTo('#select1');
        });

        $('#removeAll').click(function(){ //将全部option移动到左边
            var $options = $('#select2 option');
            // var $remove = $options.remove();//append方法自带删除功能,不用remove也行。
            $options.appendTo('#select1');
        });

        $('#select1').dblclick(function(){ //双击将选中option移动到右边
            // var $options = $('option:selected',this);//另一种选中方式
            var $options = $('#select1 option:selected');
            // var $remove = $options.remove();//append方法自带删除功能,不用remove也行。
            $options.appendTo('#select2');
        });


        $('#select2').dblclick(function(){ //双击将选中option移动到左边
            var $options = $('option:selected',this);
            // var $options = $('#select1 option:selected');//另一种选中方式
            // var $remove = $options.remove();//append方法自带删除功能,不用remove也行。
            $options.appendTo('#select1');
        });
    });
</script>
</body>
</html>

运行效果:

图片 5

移动下拉框的内容

5、表单验证

表单验证包括:对输入内容进行实时检测并给出相应提示、内容不符合要求时阻止表单提交。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
        form{
            width: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }

        body div{
            margin-bottom: 10px;
        }

        label{
            display: inline-block;
            text-align: right;
            width: 80px;
        }

        .sub{
            margin-left: 85px;
        }
        h3{
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>表单验证(邮箱没有进行正则表达式验证)</h3>
    <form action="" method="POST">
        <div class="inpt">
            <label for="userName">用户名:</label>
            <input type="text" id="userName" class="required" />
        </div>
        <div class="inpt">
            <label for="email">邮箱:</label>
            <input type="text" id="email" class="required" />
        </div>
        <div class="inpt">
            <label for="personalInfo">个人信息:</label>
            <input type="text" id="personalInfo" />
        </div>
        <div class="sub">
            <input type="submit" id="send" value="提交" />
            <input type="reset" id="res">
        </div>
    </form>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("form :input.required").each(function(){
                var $required = $('<strong class="high" style="color:#f00;">*</strong>');//创建元素
                $(this).parent().append($required);//把元素追加到文档中
            });

            $('form :input').blur(function(){ //为表单元素添加失去焦点事件
                var $parent=$(this).parent();
                $parent.find(".formTips").remove();//删除以前的提醒元素
                //验证用户名
                if ($(this).is('#userName')) {
                    if (this.value==""||this.value.length<6) {
                        var errMsg = "请至少输入6位用户名";
                        $parent.append(''+errMsg+'').find('.high').remove();
                    }else {
                        var okMsg='输入正确';
                        $parent.append(''+okMsg+'').find('.high').remove();
                    }
                }
                //验证邮箱
                if ($(this).is('#email')) {
                    if (this.value=="") {
                        var errMsg = "请输入正确的邮箱地址";
                        $parent.append(''+errMsg+'').find('.high').remove();
                    }else {
                        var okMsg='输入正确';
                        $parent.append(''+okMsg+'').find('.high').remove();
                    }
                }
            }).keyup(function(){
                $(this).triggerHandler("blur");
            }).focus(function(){
                $(this).triggerHandler("blur");
            });

                //提交事件
                $('#send').click(function(){
                    $('form .required:input').trigger('blur');//触发失去焦点事件
                    var $errNum=$('form .onError').length;
                    if ($errNum>0) {
                        return false;
                    }
                    console.log('aa');
                    alert("已提交!");
                });
        });
    </script>
</body>
</html>

运行效果:

图片 6

表单验证

6、表格应用

本文由美高梅游戏网站发布于软件资讯,转载请注明出处:jQuery对表单、表格的操作及越来越多选择

关键词:

上一篇:深究DOM API用法

下一篇:没有了