HTML 学习笔记 JQuery（表单,表格操作）

表单应用

一个表单有3个基本组成部分

(1)表单标签:包含处理表单数据所用的服务器端程序URL 以及数据提交到服务器的方法

(2)表单域:包含文本框密码框隐藏框多行文本框复选框单选框下拉选择框和文件上传框。

(3)表单按钮:包括提交按钮复位按钮和一般按钮用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了脚本的处理器处理工作。

为不支持伪类的浏览器上的文本框添加获取焦点失去焦点的样式变化

代码如下:

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            /*input:focus,textarea:focus {

                border: 1px solid #FF0000;

                background: #ffcccc;

            }*/

            .focus {

                border: 1px solid#FF0000;

                background: #FFCCCC;

            }

        </style>

        <script src="../js/jquery-2.1.1.min.js"></script>

    </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>

        <script>

            $(function() {

                $(":input").focus(function() {

                    $(this).addClass("focus");

                }).blur(function() {

                    $(this).removeClass("focus");

                });

            });

        </script>

    </body>

</html>

多行文本框应用

(1)高度变化

代码如下：

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

    </head>

    <body>

        <form>

            <div class="msg">

                <div class="msg_caption">

                    <span class="bigger">放大</span>

                    <span class="smaller">缩小</span>

                </div>

                <div>

                    <textarea id="comment" rows="8" cols="20">

                        多行文本框高度变化 多行文本框高度变化

                        多行文本框高度变化 多行文本框高度变化

                        多行文本框高度变化 多行文本框高度变化

                        多行文本框高度变化 多行文本框高度变化

                    </textarea>

                </div>

            </div>

        </form>

        <script>

            $(function() {

                var $comment = $("#comment");

                $(".bigger").click(function() {

                    if ($comment.height() < 500) {

                        $comment.animate({"height":"+=50"},400);

                    }

                });

                $(".smaller").click(function() {

                    if (!$comment.is(":animated")) {

                        if ($comment.height() > 50) {

                        $comment.animate({"height":"-=50"},400);

                    }

                }

                });

            });

        </script>

    </body>

</html>

(2)滚动条高度变化

在多行文本框中，还有另外一个应用，就是通过控制多行文本框的滚动条的变化，使文本框里面的内容滚动。

与控制高度的方法相同，只不过此处需要控制的是另外一个属性，即scrollTop。将以上代码修改如下

        $(function() {

                var $comment = $("#comment");

                $(".bigger").click(function() {

                    $comment.animate({"scrollTop":"+=50"},400);

                });

                $(".smaller").click(function() {

                    if (!$comment.is(":animated")) {

                        $comment.animate({"scrollTop":"-=50"},400);

                    }

                });

            });

复选框应用

对复选框的最基本的应用就是对复选框进行全选反选和全不选等操作。复杂的操作需要与选项挂钩，来达到各种级联的反应效果。

首先在空白网页中创建一个表单其中放入一组复选框 HTML代码如下

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

    </head>

    <body>

        <form action="#" method="post">

            你最喜欢的运动是?

            <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="checkeAll" value="全选" />

            <input type="button" id="checkeNo" value="全bu选" />

            <input type="button" id="checkerev" value="反选" />

            <input type="button" id="send" value="提交" />

        </form>

    </body>

</html>

如果需要复选框处于选中状态或者不选状态，必须通过控制元素的checked属性来达到目的，如果属性为true，说明被选中，如果值为false则说明没被选中。

全选操作就是当用户点击全选按钮的时候，需要讲复选框全部选中，此时需要为全选按钮绑定单击事件，然后使用选择器寻找符合要求的复选框。通过attr()方法来设置属性checked的值，使之选中。代码如下

$("#checkeAll").click(function() {

    $("[name = items]:checkbox").attr("checked",true);

});

全不选操作

$("#checkeNo").click(function() {

    $("[name = items]:checkbox").attr("checked",false);

});

反选操作

$("#checkerev").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);

            });

表格应用

HTML代码

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            table thead th{

                width: 80px;

                text-align: left;

                margin: 0px;

                border-style: none;

                border-bottom: 1px solid darkgray;

            }

            table {

                border-collapse:collapse;

            }

            table tbody td {

                border-style: none;

            }

            .even{

                background: #fff38f;

            }

            .odd {

                background: #ffffee;

            }

        </style>

        <script src="../js/jquery-2.1.1.min.js"></script>

    </head>

    <body>

        <table border="1px solid blue">

            <thead>

                <tr><th>姓名</th><th>性别</th><th>曾驻地</th></tr>

            </thead>

            <tbody>

                <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>

                <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>

                <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>

                <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>

                <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>

                <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>

            </tbody>

        </table>

        <script>

            //隔行变色

            $(function() {

                //偶数行

                $("tr:odd").addClass("odd");

                //奇数行

                $("tr:even").addClass("even");

            });

        </script>

    </body>

</html>

上面的变色表头也会算进去现在去除标头

//                选择器"tbody>tr"选取tbody中的tr

                $("tbody>tr:odd").addClass("odd");

                $("tbody>tr:even").addClass("even");

如果需要选中某一行进行高亮显示

//选中某一行进行高亮显示

//                $("tbody>tr:contains('张三')").addClass("selected");

                //点击某一行显示高亮

                $("tbody>tr").click(function() {

                    $(this).addClass("selected");

                    //周边的变成普通颜色

                    $(this).siblings().removeClass("selected");

                })

可以展开隐藏的表格

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../js/jquery-2.1.1.min.js" ></script>

        <style type="text/css">

             .selected {

                 background: aqua;

             }

        </style>

    </head>

    <body>

        <table>

            <thead>

                <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>

            </thead>

            <tbody>

                <tr class="parent" id="row_01"><td colspan="3">前台组合设计</td></tr>

                <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>

                <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>

                <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>

                <tr class="child_row_02"><td>王五</td><td>男</td><td>浙江宁波</td></tr>

                <tr class="child_row_02"><td>王五</td><td>男</td><td>浙江宁波</td></tr>

                <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>

                <tr class="child_row_03"><td>赵六</td><td>男</td><td>浙江宁波</td></tr>

                <tr class="child_row_03"><td>赵六</td><td>男</td><td>浙江宁波</td></tr>

            </tbody>

            <script>

                $(function() {

                    $("tr.parent").click(function() {

                        $(this).toggleClass("selected");

                        $(this).siblings(".child_"+this.id).toggle();//控制显示隐藏

                    });

                });

            </script>

        </table>

    </body>

</html>

制作选项卡

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

        *{

            margin: 0px;

            padding: 0px;

        }

            .table {

                width: 250px;

                height: 180px;

                border: 1px solid brown;

                padding: 0px;

            }

            div.tab_menu {

                width: 200px;

                height: 30px;

                margin:10px 25px 0px 25px;

            }

            ul li {

                display: inline-block;

                background: darkcyan;

                width: 50px;

                height: 30px;

                margin: 0px 5px;

                text-align: center;

                line-height: 30px;

            }

            div.tab_box {

                width: 200px;

                height: 120px;

                border: 1px solid darkgray;

                margin: 5px 25px 10px 25px;

            }

            .hide {

                display: none;

            }

            .selected {

                background: aqua;

            }

        </style>

        <script type="text/javascript" src="../js/jquery-2.1.1.min.js" ></script>

    </head>

    <body>

        <div class="table">

            <div class="tab_menu">

                <ul>

                    <li class="selected">时事</li>

                    <li>体育</li>

                    <li>娱乐</li>

                </ul>

            </div>

            <div class="tab_box">

                <div>时事</div>

                <div class="hide">体育</div>

                <div class="hide">娱乐</div>

            </div>

        </div>

        <script>

            $(function() {

                var $div_li = $("div.tab_menu ul li");

                $div_li.click(function() {

                    $(this).addClass("selected").siblings().removeClass("selected");

                    var index = $div_li.index(this);

                    $("div.tab_box > div").eq(index).show().siblings().hide();

                });

            })

        </script>

    </body>

</html>