jQuery 控制表单和表格

这里总结了jQuery中对表格和表单的一些常用操作, 通过这里的实例和操作肯定对jQuery的掌握有一个新得提高, 希望大家耐心看完, 多实践.
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin:0; padding:0;border:none;}
        form {width:800px;margin:auto;margin-top:40px;}
        form legend {
            margin-bottom:5px;
            background: #eee;
            color:#363636;
            font-weight:bold;
            display: block;
            width:100%;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
            padding:8px 15px;
        }
        form div {
            margin-bottom:5px;
        }
        form input, form textarea{
            border:1px solid #888;outline:none;
            border-radius:3px;
        }
        form input {
            width:174px;height:28px;line-height: 28px;padding:0 5px;
        }
        form textarea {
            width:480px;line-height: 20px;
            padding:5px;
        }
        form input.focus,form textarea.focus {
            border:1px solid #878;
            box-shadow: 0 0 4px rgba(3,3,3, 0.3);
        }
        form input[type="submit"], form input[type="reset"] {
            width:80px;
            margin-right:5px;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <!-- 单行问本框应用 -->
    <form action="">
        <fieldset>
            <legend>个人基本信息</legend>
            <div>
                <label for="username">　　名称:</label>
                <input type="text" value="" id="username" name="username" />
            </div>
            <div>
                <label for="pwd">　　密码:</label>
                <input type="password" id="pwd" name="pwd" />
            </div>
            <div>
                <label for="msg">详细信息:</label>
                <textarea name="msg" id="msg" cols="30" rows="10"></textarea>
            </div>
        </fieldset>
    </form>
    <script src="../jquery-1.11.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 需求
            $("input,textarea").focus(function (){
                $(this).addClass('focus');
            }).blur(function () {
                $(this).removeClass('focus');
            })
        })
    </script>

    <!-- 多行文本框应用 -->
    <style>
        .msg-caption {

        }
        .msg_caption span {
            display: inline-block;*display:inline;*zoom:1;
            height:26px;text-align: center;
            color:#363636;
            line-height: 26px;
            padding:0 15px;
            border:1px solid #dcdcdc;
            cursor: pointer;
            margin-right:5px;
        }
        .msg_caption span:last-child {
            margin-right:0;
        }
        .msg_caption span:hover, .msg_caption span.active{
            background: maroon;
            color:#fff;
            border:1px solid maroon;
        }
        .demo2 textarea {
            height:100px;
        }
    </style>
    <form class="demo2" action="">
        <legend>多行文本框应用</legend>
        <div class="msg_caption">
            <span class="bigger">放大</span><span class="smaller">缩小</span><!--
            --><span class="up">向上</span><span class="down">向下</span>
        </div>
        <textarea name="" id="msg2" cols="30" rows="10"></textarea>
    </form>
    <style>
        .demo3 div.dv1 input {
            width:0;height:0;
            width:15px;height:15px;
            display: inline-block;*display: inline;*zoom:1;
            vertical-align: middle;
        }
        .demo3 div.dv1 label {
            margin-right:35px;
            height:20px;line-height: 20px;
            font-size:12px;
            display: inline-block;*display: inline;*zoom:1;
        }
        .demo3 div.dv1 {
            margin-top:5px;
        }
        .demo3 div.dv2 input {
            width:60px;
            cursor:pointer;
        }
    </style>
    <form class="demo3" action="">
        <legend>复选框的应用</legend>
        你爱好的运动是 ?<br/>
        <div class="dv1">
            <label for="items0"><input type="checkbox" id="items0" name="items" value="足　球" />足球</label><!--
            --><label for="items1"><input type="checkbox" id="items1" name="items" value="篮　球" />篮球</label><!--
            --><label for="items2"><input type="checkbox" id="items2" name="items" value="羽毛球" />羽毛球</label><!--
            --><label for="items3"><input type="checkbox" id="items3" name="items" value="乒乓球" />乒乓球</label>
        </div>
        <div class="dv2">
            <input type="button" value="全　选" id="checkAll" />
            <input type="button" value="全不选" id="checkNone" />
            <input type="button" value="反　选" id="checkReverse" />
            <input type="button" value="提　交" id="sub_ckbtn" />
        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            (function () {
                /* 1. 信息框高度的变化 */
                var $bigger = $("span.bigger");
                var $smaller = $("span.smaller");
                var $msg = $("#msg2");
                var $msgHeight = $msg.height();
                $bigger.click(function () {
                    var h = $msg.height();
                    if(h<300) {
                        // $msg.height(h+50);
                        if(!$msg.is(":animated")) {
                            $msg.animate({"height":"+=50"}, "slow");
                        }
                    }
                })
                $smaller.click(function () {
                    var h = $msg.height();
                    if(h>100) {
                        // $msg.height(h-50);
                        if(!$msg.is(":animated")) {
                            $msg.animate({"height":"-=50"}, "slow");
                        }
                    }
                })

                /* 2. 信息框滚动条高度的变化 */
                var $up = $("span.up");
                var $down = $("span.down");
                var $msgLineHeight = parseInt($msg.css('line-height').split('px')[0]);
                $down.click(function () {
                    if(!$msg.is(":animated")) {
                        $msg.animate({"scrollTop":"+="+($msgHeight-$msgLineHeight)}, "slow");
                    }
                })
                $up.click(function (){
                    if(!$msg.is(":animated")) {
                        $msg.animate({"scrollTop":"-="+($msgHeight-$msgLineHeight)}, "slow");
                    }
                })

                /* 复选框操作 */
                var $checkAll = $("#checkAll");
                var $checkNone = $("#checkNone");
                var $checkReverse = $("#checkReverse");
                var $subCkBtn = $("#sub_ckbtn");
                var $cks = $(".demo3 input[type=checkbox]");
                $checkAll.click(function () {
                    $cks.prop('checked',true);
                })
                $checkNone.click(function() {
                    $cks.removeProp('checked',false);
                })
                $checkReverse.click(function () {
                    // 反选采用原生
                    $cks.each(function () {
                        this.checked = !this.checked;
                    })
                })
                $subCkBtn.click(function () {
                    var msg = "你爱好的运动是: \r\n";
                    var $cked = $(".demo3 input[type=checkbox]:checked");

                    $cked.each(function () {
                        msg += $(this).val()+"\r\n";
                    })
                    alert(msg);
                })
            }());
        })
    </script>

    <!-- 上例的变种 -->
    <style>
        .demo4 input[type="checkbox"] {
            width:0;height:0;
            width:15px;height:15px;
            display: inline-block;*display: inline;*zoom:1;
            vertical-align: middle;
        }
        .demo4 div.dv1 label {
            margin-right:35px;
            height:20px;line-height: 20px;
            font-size:12px;
            display: inline-block;*display: inline;*zoom:1;
        }
        .demo4 div.dv1 {
            margin-top:5px;
        }
        .demo4 div.dv2 input {
            width:60px;
            cursor:pointer;
        }
    </style>
    <form class="demo4" action="">
        <legend>复选框的应用 例2</legend>
        你爱好的运动是 ? <label for="checkAllOrNot"><input type="checkbox" id="checkAllOrNot" />全选/全不选</label><br/>
        <div class="dv1">
            <label for="item_0"><input type="checkbox" id="item_0" name="item" value="足　球" />足球</label><!--
            --><label for="item_1"><input type="checkbox" id="item_1" name="item" value="篮　球" />篮球</label><!--
            --><label for="item_2"><input type="checkbox" id="item_2" name="item" value="羽毛球" />羽毛球</label><!--
            --><label for="item_3"><input type="checkbox" id="item_3" name="item" value="乒乓球" />乒乓球</label>
        </div>
        <div class="dv2">
            <input type="button" value="提　交" id="sub_ckbtn2" />
        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            (function (){
                var $ckAll = $("#checkAllOrNot");
                var $cks = $(".demo4 [name=item]");
                $ckAll.click(function () {
                    $(".demo4 [name=item]").prop('checked', this.checked);
                })
                $cks.click(function () {// 当复选框没有全部选中时, 取消全选.
                    $tmpChecked = $(".demo4 [name=item]:checked");
                    $ckAll.prop('checked', $cks.length == $tmpChecked.length);
                })
            }())
        })
    </script>
    <style>
        .content {
            width:800px;margin:auto;
            margin-top:15px;
        }
        .h3 {
            background: #eee;
            color:#363636;
            font-weight:bold;
            display: block;
            width:100%;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
            padding:8px 15px;
            font-size:13px;
            width:800px;
            margin:auto;
            margin-top:25px;margin-bottom:5px;
        }
        #select1 {
            width:114px;height:160px;
            border:1px solid #565656;
            padding:5px;margin-right:105px;
        }
        #select2 {
            width:114px;height:160px;
            border:1px solid #565656;
            padding:5px;
        }
        .fbox {
            width:114px;
            display: inline-block;*display: inline;*zoom:1;
        }
        .fbox:first-child {
            margin-right:105px;
        }
        .fwrap {

        }
        .u-btn {
            display: inline-block;*display: inline;*zoom:1;
            width:114px;
            background: #464646;
            color:#fff;
            height:26px;line-height: 26px;
            cursor:pointer;
            margin-right: 5px;
            text-align: center;
            margin-top:3px;
        }
        .u-btn:hover {
            background: maroon;color:#fff;
        }
    </style>
    <div class="content">
        <h3 class="h3">下拉框应用</h3>
        <div>
            <select multiple name="" 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>
                <option value="6">选项6</option>
                <option value="7">选项7</option>
                <option value="8">选项8</option>
            </select><!--
            --><select multiple name="" id="select2">
                
            </select>
        </div>
        <div class="fwrap">
            <div class="fbox">
                <span class="add u-btn">选中添加到右边>></span><span class="add_all u-btn">全部添加到右边>></span>
            </div><!--
            --><div class="fbox">
                <span class="remove u-btn"><<选中添加到左边</span><span class="remove_all u-btn"><<全部添加到左边</span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            (function (){
                var $slc1 = $("#select1");
                var $slc2 = $("#select2");

                var $add = $(".add");
                var $add_all = $(".add_all");
                $add.click(function () {
                    // 左边的添加到右边
                    // 获取选中的选项
                    var $selected = $slc1.find('option:selected');
                    if($selected.length<=0) {
                        alert('请选择要移动的选项');
                    }
                    $selected.appendTo($slc2);//删除且追加操作 appendTo
                })
                $add_all.click(function () {
                    // 将左边所有添加到右边
                    $slc1.find("option").appendTo($slc2);
                })
                var $remove = $(".remove");
                var $remove_all = $(".remove_all");
                $remove.click(function () {
                    var $selected = $slc2.find("option:selected");
                    if($selected.length<=0) {
                        alert("请选择要移动的选项");
                    }
                    $selected.appendTo($slc1);
                })
                $remove_all.click(function () {
                    var $selected = $slc2.find("option");
                    $selected.appendTo($slc1);
                })
                //双击某个选项, 添加给对方
                $slc1.dblclick(function () {
                    // 将选中的选项添加给对方
                    var $options = $("option:selected");
                    $options.appendTo($slc2);
                })
                $slc2.dblclick(function () {
                    // 将选中的选项添加给对方
                    var options = $("option:selected");
                    options.appendTo($slc1);
                })
            }())  
        })
    </script>
    
    <!-- ///////////////////////////// 表单验证 //////////////////////////// -->
    <style>
        .highlight {
            color:red;
            font-style:normal;
            font-weight: normal;
        }
        .formtips.onError {
            color:red;
        }
        .formtips.onSuccess {
            color:green;
        }
        #form_validate textarea {
            width:400px;
        }
    </style>
    <form id="form_validate" class="form_validate" method="post" action="">
        <legend>表单验证</legend>
        <div class="int">
            <label for="username">　用户名: </label><input type="text" id="username" class="required" /> 
        </div>
        <div class="int">
            <label for="">　　邮箱: </label><input type="text" id="email" class="required" /> 
        </div>
        <div class="int">
            <label for="">个人资料: </label><input type="text" id="personalinfo" /> 
        </div>
        <div class="int">
            <label for="info">详细介绍: </label><textarea class="required" name="info" id="info" cols="30" rows="10"></textarea>
        </div>
        <div class="sub">
            　　　　　<input type="submit" value="提交" id="send" /><input type="reset" id="res" value="重置" />
        </div>
    </form>
    <script type="text/javascript">
    $(function () {
        (function (){
            var form = $("#form_validate");
            // 有required类的元素是必填项
            var $required = "<strong class='highlight'>*</strong> ";
            form.find(".required").parent().append($required);

            form.find(":input").blur(function () {
                var $parent = $(this).parent();
                // 验证用户名
                if($(this).is("#username")) {
                    $parent.find(".formtips").remove();
                    if(this.value == "" || this.value.length<6) {
                        var errorMsg = "请输入至少6位字符的用户名";
                        $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
                    } else {
                        var okMsg = '输入正确';
                        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                    }
                }

                // 验证邮箱
                if($(this).is("#email")) {
                    $parent.find(".formtips").remove();
                    if(this.value == '' || (this.value!="" && !/^.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
                        var errorMsg = "请输入正确的邮箱地址";
                        $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
                    } else {
                        var okMsg = "输入正确";
                        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                    }
                }

                return false;
            }).keyup(function() {
                $(this).triggerHandler('blur');
            }).focus(function() {
                $(this).triggerHandler('blur');
            })
            $("#send").click(function() {
                $("form .required:input").trigger('click');
                var errorCount = form.find(".onError").length;
                if(errorCount>0) {
                    return false;
                }
                alert('注册成功, 密码已发到你的邮箱, 请查收');
                return false;
            })
        }())
    })
    </script>
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 表单验证 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->

    <!-- 表格应用 -->
    <style>
        table {
            border-collapse: collapse;
            border-radius: 5px;
            width:800px;
            margin:auto;
            border:1px solid #454545;
            border-width:1px 0 0 1px;
        }
        table th, table td {
            border-collapse: collapse;
            border:1px solid #454545;
            height:30px;line-height: 30px;
            padding:0 5px;
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            -o-box-sizing:border-box;
            font-size: 12px;
        }
        table th {
            padding:5px 5px;
            text-align: center;
            font-size:16px;
        }
        .odd-color {
            background: #f4f4f4;
        }
        .even-color {
            background: beige;
        }
        .highlight-color {/*高亮放后才有效果*/
            background: maroon;
            color:#fff;
        }
        table {
            margin-top:15px;
        }
    </style>

    <!-- 表格变色 -->
    <h3 class="h3">单选框控制表格高亮</h3>
    <table class="cl-tb">
        <thead>
            <tr><th width="25"></th><th>姓名</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td><input checked="checked" type="radio" name="list" /></td><td>圆通</td><td>浙江宁波</td></tr>
            <tr><td><input type="radio" name="list" /></td><td>中通</td><td>浙江杭州</td></tr>
            <tr><td><input type="radio" name="list" /></td><td>顺丰</td><td>江苏苏州</td></tr>
            <tr><td><input type="radio" name="list" /></td><td>天天</td><td>北京</td></tr>
        </tbody>
    </table>

    <h3 class="h3">复选框控制表格高亮</h3>
    <table class="cl-tb">
        <thead>
            <tr><th width="25"></th><th>姓名</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td><input checked="checked" type="checkbox" name="cklist" /></td><td>圆通</td><td>浙江宁波</td></tr>
            <tr><td><input type="checkbox" name="cklist" /></td><td>中通</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox" name="cklist" /></td><td>顺丰</td><td>江苏苏州</td></tr>
            <tr><td><input type="checkbox" name="cklist" /></td><td>天天</td><td>北京</td></tr>
        </tbody>
    </table>
    <style>
        table .parent {
            background: #555;
            color:#fff;
            border:1px solid #555;
            font-size:12px;
            font-weight:bold;
            cursor:pointer;
        }
        table .parent.close {
            background: #f3f3f3;
            color:#777;
            border:1px solid #888;
            border-left:none;
            border-right:none;
        }
        table.cl-tb.m1 {
            border:none;
            border:1px solid #888;
            border-right:none;
            border-left:none;
            padding:5px;
        }
        table.cl-tb.m1 td {
            border:none;
            border-left:none;
            border-right:none;
            font-size:12px;
        }
        table.cl-tb.m1 th {
            border:none;
            border-bottom:2px solid #000;
            background: #f4f4f4;
            color:maroon;
            text-align: left;
        }
        .mgb35 {
            margin-bottom: 45px;
        }
        table.cl-tb.m1 tbody tr.wtline td{
            border-bottom: 1px solid #fff;
            height:2px;
        }
        table.cl-tb.m1 tbody tr.highlight-color {
            background: beige;
            color:maroon;
        }
    </style>
    <h3 class="h3">表格展开和关闭</h3>
    <table id="cltbm1" class="cl-tb m1">
        <thead>
            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
            <tr class="child_row_01 highlight-color"><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>
    </table>

    <h3 class="h3">这里添加内容筛选的行(该行高亮显示)</h3>
    <table id="apttb"></table>
    
    <style>
        .input-box {
            width:800px;
            margin:auto;
        }
        #ipt-filter{
            height:30px;width:250px;line-height: 30px;
            border:1px solid #888;
            padding:0 5px;outline: none;
        }
        #ipt-filter:focus {
            box-shadow: 0 0 4px rgba(3,3,3,0.3);
        }
    </style>
    <h3 class="h3">根据用户输入的内容来筛选表格</h3>
    <div class="input-box">
        <input type="text" placeholder="请输入搜索内容" value="" id="ipt-filter" />
    </div>
    <table id="cltbm2" class="cl-tb m1">
        <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>

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

    <div class="mgb35"></div>
    <script type="text/javascript">
        $(function () {
            // 隔行变色
            $(".cl-tb:lt(2)").find("tbody>tr").filter(":odd").addClass('odd-color').end().filter(':even').addClass('even-color');
            
            // $(".cl-tb").find("tbody>tr").filter(":eq(3)").addClass('highlight-color');//高亮
            // 页面初始化, 如果有单选框被选中, 或者复选框时选中的, 则对应的一行tr高亮
            $("tbody>tr:has(':checked')").addClass('highlight-color');


            // 单选框控制表格行高亮
            $(".cl-tb").eq(0).find("tbody>tr").click(function () {
                $(this).addClass("highlight-color").find("[name=list]").prop('checked',true).end().siblings("tr").removeClass("highlight-color").find("[name=list]").prop('checked',false);
            })

            //复选框控制表格高亮
            $(".cl-tb").eq(1).find("tbody>tr").click(function () {
                // !$(this).hasClass('highlight-color') ? 
                // $(this).addClass('highlight-color').find("[name=cklist]").prop('checked',true)
                // :$(this).removeClass('highlight-color').find("[name=cklist]").prop('checked',false);
                // 精简写法
                var hasSelected = $(this).hasClass('highlight-color');
                $(this)[!hasSelected?"addClass":"removeClass"]("highlight-color").find("[name=cklist]").prop("checked",!hasSelected);
            })

            // 单机父行, 相应的子行收缩
            $("#cltbm1 tbody>tr.parent").each(function (i) {
                $(this).click(function () {
                    $(this).toggleClass('close').siblings(".child_"+this.id).toggle();
                }).click();
            })

            // 表格内容筛选
            // 筛选内容中含有"小"的文本的行, 给该行加高亮
            var cln_tr = $("#cltbm1 tbody>tr:contains('大')").clone(true);
            $("#apttb").append(cln_tr.show().addClass('highlight-color'));

            // // 具有 placeholder 属性的 (*1*)
            // $("[placeholder]").each(function () {
            //     var placeholder = $(this).attr('placeholder');
            //     $(this).val(placeholder).focus(function () {
            //         if(this.value == this.placeholder) {
            //             $(this).val('');
            //         }
            //     }).blur(function () {
            //         if(this.value == '' || this.value==placeholder) {
            //             $(this).val(placeholder);
            //         }
            //     });
            // });

            // 输入内容筛选对应表格 *****
            $("#ipt-filter").keyup(function (){
                $("#cltbm2 tbody>tr").hide().filter("#cltbm2 tbody>tr:contains('"+$(this).val()+"')").show();
            }).keyup();// 但是表单元素的特点是刷新元素其值保持不变-----如果用jquery提前控制了搜索中focus事件除外, 如: (*1*)
        })
    </script>
    
    <style>
        .h-msg {
            width:800px;
            margin:auto;
        }
        .h-msg p{
            line-height: 1.5em;
            font-size: 12px;
            padding:10px 0;
        }
    </style>
    <h3 class="h3">改变网页字体的大小</h3>
    <div id="Hmsg" class="h-msg">
        <div class="msg_caption">
            <span class="zm_bigger">放大</span><span class="zm_smaller">缩小</span>
        </div>
        <div>
            <p id="para">PHP原始为Personal Home Page的缩写，已经正式更名为 "PHP: Hypertext Preprocessor"。注意不是“Hypertext Preprocessor”的缩写，这种将名称放到定义中的写法被称作递归缩写。PHP于1994年由Rasmus Lerdorf创建，刚刚开始是Rasmus Lerdorf为了要维护个人网页而制作的一个简单的用Perl语言编写的程序。这些工具程序用来显示 Rasmus Lerdorf 的个人履历，以及统计网页流量。后来又用C语言重新编写，包括可以访问数据库。他将这些程序和一些表单直译器整合起来，称为 PHP/FI。PHP/FI 可以和数据库连接，产生简单的动态网页程序。<br/><br/>
            在1995年以Personal Home Page Tools (PHP Tools) 开始对外发表第一个版本，Lerdorf写了一些介绍此程序的文档。并且发布了PHP1.0！在这的版本中，提供了访客留言本、访客计数器等简单的功能。以后越来越多的网站使用了PHP，并且强烈要求增加一些特性。比如循环语句和数组变量等等；在新的成员加入开发行列之后，Rasmus Lerdorf 在1995年6月8日将 PHP/FI 公开发布，希望可以透过社群来加速程序开发与寻找错误。这个发布的版本命名为 PHP 2，已经有 PHP 的一些雏型，像是类似 Perl的变量命名方式、表单处理功能、以及嵌入到 HTML 中执行的能力。程序语法上也类似 Perl，有较多的限制，不过更简单、更有弹性。PHP/FI加入了对MySQL的支持，从此建立了PHP在动态网页开发上的地位。到了1996年底，有15000个网站使用 PHP/FI。</p>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            (function () {
                var $sp = $("#Hmsg .msg_caption span");
                var $p = $("#para");
                
                $sp.click(function () {
                    var $fontSize = parseInt($p.css("font-size"));
                    if($(this).attr('class') == 'zm_bigger') {
                        $fontSizeUnit = "+=2";
                    } else {
                        $fontSizeUnit = "-=2";
                    }

                    $p.css("font-size", $fontSizeUnit);
                });
            }())
        })
    </script>
    
    <style>
        .tab {width:800px;margin:auto;}
        .tab .tab_menu {
            height:30px;
        }
        .tab .tab_menu li {
            border: 1px solid #dcdcdc;
            float: left;
            height:30px;
            font-size:14px;
            line-height: 30px;
            margin-right:4px;
            list-style:none;
            padding:0 15px;
        }
        .tab .tab_menu li.active,.tab .tab_menu li:hover {
            background: #f4f4f4;
            color:maroon;
            cursor:pointer;
            border-color:#f4f4f4;
        }
        .tab .tab_box div {
            width:400px;
            height:150px;
            font-size: 12px;
            line-height: 1.5em;
            border:1px solid #dcdcdc;
            padding:5px;
        }
        .tab .tab_box div.hide {
            display: none;
        }
        .tab .tab_box {
            word-break:break-all;
            letter-spacing: 1px;
            word-spacing: normal;
            word-wrap: break-word;
            margin-top:4px;
            clear:both;
        }
    </style>
    <h3 class="h3">网页选项卡</h3>
    <div class="tab">
        <div class="tab_menu">
            <ul>
                <li class="active">时事</li>
                <li>体育</li>
                <li>娱乐</li>
            </ul>
        </div>
        <div class="tab_box">
            <div>时事</div>
            <div class="hide">体育</div>
            <div class="hide">娱乐</div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            (function () {
                var $tab_menu = $(".tab>.tab_menu>ul>li");
                $tab_menu.mouseover(function () {
                    $(this).addClass('active').siblings('li').removeClass('active').parents(".tab").find(".tab_box>div").eq($(this).index()).removeClass('hide').siblings("div").addClass('hide');
                })
            }())
        })
    </script>
    
</body>
</html>
复制上面的代码, 将其存储为html文件, 然后打开, 根据实例和效果学习.
posted @ 2015-08-17 14:18 Zell~Dincht 阅读(583) 评论(0) 编辑收藏举报
刷新页面返回顶部
jQuery 控制表单和表格

公告
