jQuery学习笔记4

来源：互联网发布：弹性刚度矩阵编辑：程序博客网时间：2024/06/05 03:43

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo8.aspx.cs" Inherits="jQuery.demo8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery表单</title>
    <style type="text/css">
        .focus
        {
            border: 1px solid #f00;
            background: #fcc;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(":input").focus(function () {
                $(this).addClass("focus");
            }).blur(function () {
                $(this).removeClass("focus");
            });
            var $comment = $("#comment");
            $("#bigger").click(function () {
                if ($comment.height() < 500) {
                    $comment.height($comment.height() + 50)
                    $comment.width($comment.width() + 50);
                }
            });
            $("#smaller").click(function () {
                if ($comment.height() > 50) {
                    $comment.height($comment.height() - 50);
                    $comment.width($comment.width() - 50);
                }
            });
            //            $("#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;
            //                });
            //            });

            $("#choose").click(function () {
                $("[name=items]:checkbox").attr("checked", this.checked);
            });
            $("#send").click(function () {
                var str = "你选中的是:\r\n";
                $("[name=items]:checkbox:checked").each(function () {
                    str += $(this).val() + "\r\n";
                });
                alert(str);
            });

            $("#add").click(function () {
                var $options = $("#select1 option:selected");
                $options.appendTo("#select2");
            });
            $("#addAll").click(function () {
                var $options = $("#select1 option");
                $options.appendTo("#select2");
            });
            $("#delete").click(function () {
                var $options = $("#select2 option:selected");
                $options.appendTo("#select1");
            });
            $("#deleteAll").click(function () {
                var $options = $("#select2 option");
                $options.appendTo("#select1");
            });
            $("#select1").dblclick(function () {
                var $options = $("#select1 option:selected");
                $options.appendTo("#select2");
            });
            $("#select2").dblclick(function () {
                var $options = $("#select2 option:selected");
                $options.appendTo("#select1");
            });
        });
    </script>
</head>
<body>
    <form id="regForm" action="#" method="post" runat="server">
    <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" type="password"></textarea>
        </div>
    </fieldset>
    <div class="message">
        <div class="msg_caption">
            <span id="bigger">放大</span> <span id="smaller">缩小</span>
        </div>
        <div>
            <textarea id="comment" rows="8" cols="20">
怒发冲冠，凭栏处,潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切。　　靖康耻，犹未雪；臣子恨，何时灭？驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头，收拾旧山河，朝天阙！
</textarea>
        </div>
    </div>
    <div>
        你爱好的运动是?<input type="checkbox" id="choose" />全选/全不选<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="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="提交" />
    </div>
    <div class="content">
        <select multiple="multiple" id="select1" style="width: 100px; height: 160px;">
            <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>
            <option value="6">选项6</option>
            <option value="7">选项7</option>
            <option value="8">选项8</option>
            <option value="9">选项9</option>
        </select>
        <div>
            <span id="add">选中添加到下边>></span> <span id="addAll">全部添加到下边>></span>
        </div>
    </div>
    <div class="content">
        <select multiple="multiple" id="select2" style="width: 100px; height: 160px;">
        </select>
        <div>
            <span id="delete">选中删除到上边<<</span> <span id="deleteAll">全部删除到上边>></span>
        </div>
    </div>
    </form>
</body>
</html>