程序员人生 网站导航

JQuery小练习

栏目:php教程时间:2015-01-29 09:06:22
1、加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第3个文本框中。
<script src="jquery⑴.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                var first = parseInt($('#btnFirst').val());
                var second = parseInt($('#btnSecond').val());
                var sum = first + second;
                $('#btnResult').val(sum);
            });
        });
    </script>
</head>
<body>
    <input type="text" name="name" value="" id="btnFirst" />+
    <input type="text" name="name" value="" id="btnSecond" />
    <input type="button" name="name" value="=" id="btn" />
    <input type="text" name="name" value="" id="btnResult" />
</body>
2、10秒钟后协议文本框下的注册按钮才能点击,时钟倒数。设置可用性等jQuery未封装方法:attr("")setInterval()
 <script type="text/javascript">
        $(function () {
            var i = 5;
            var setId = setInterval(function () {
                i--;
                if (i <= 0) {                    
                    $('#btnShow').val('同意').attr('disabled', false);
                    clearInterval(setId);
                }
                else {
                    $('#btnShow').val('请仔细浏览协议(' + i + ')');
                }
            }, 500);
        });
    </script>

<input type="button" name="name" value="请仔细浏览协议(5)" id="btnShow" disabled="disabled" />
3、无刷新评论。(已做)
  <script src="jquery⑴.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //创建1行和两个单元格
                $('<tr><td>' + $('#txt').val() + '</td><td>' + $('#textContent').val() + '</td></tr>').appendTo($("#tb"));
            });
        });
    </script>
</head>
<body>
    <table id="tb" style="border:1px solid red;">
        <tr>
            <td>
                猫猫:
            </td>
            <td>
                沙发耶!
            </td>
        </tr>
    </table>
    <br />
    昵称:<input type="text" id="txt" value="" /><br />
    <textarea id="textContent" rows="10" cols="15"></textarea><br />
    <input type="button" value="评论" id="btn1" />
</body>
4、案例1:创建若干个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背风景设置为红色,如果不为空则为白色。提示:焦点进入控件的事件是focus,焦点离开控件的事件是blur。
 $(function () {
            $('input').blur(function () {
                if ($(this).val().length == 0) {
                    $(this).css('backgroundColor', 'red');
                }
                else {
                    $(this).css('backgroundColor','');
                }
            });
        });
5、案例:选择球队,两个ul。被悬浮行高亮显示(背景是红色),点击球队将它放到另外一个的球队列表。//清除所有事件。.unbind();
<script type="text/javascript">
        $(function () {
            //鼠标经过
            $('#uul li').mouseover(function () {
                $(this).css('cursor', 'pointer').css('backgroundColor', 'red');
            //鼠标离开
            }).mouseout(function () {
                $(this).css('cursor', 'pointer').css('backgroundColor', '')
                //鼠标点击
                .click(function () {
                    $(this).unbind().removeAttr('style').appendTo($('#ul2'));
                });
            })
        });
    </script>
1、加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第3个文本框中。
<script src="jquery⑴.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                var first = parseInt($('#btnFirst').val());
                var second = parseInt($('#btnSecond').val());
                var sum = first + second;
                $('#btnResult').val(sum);
            });
        });
    </script>
</head>
<body>
    <input type="text" name="name" value="" id="btnFirst" />+
    <input type="text" name="name" value="" id="btnSecond" />
    <input type="button" name="name" value="=" id="btn" />
    <input type="text" name="name" value="" id="btnResult" />
</body>
2、10秒钟后协议文本框下的注册按钮才能点击,时钟倒数。设置可用性等jQuery未封装方法:attr("")setInterval()
 <script type="text/javascript">
        $(function () {
            var i = 5;
            var setId = setInterval(function () {
                i--;
                if (i <= 0) {                    
                    $('#btnShow').val('同意').attr('disabled', false);
                    clearInterval(setId);
                }
                else {
                    $('#btnShow').val('请仔细浏览协议(' + i + ')');
                }
            }, 500);
        });
    </script>

<input type="button" name="name" value="请仔细浏览协议(5)" id="btnShow" disabled="disabled" />
3、无刷新评论。(已做)
  <script src="jquery⑴.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //创建1行和两个单元格
                $('<tr><td>' + $('#txt').val() + '</td><td>' + $('#textContent').val() + '</td></tr>').appendTo($("#tb"));
            });
        });
    </script>
</head>
<body>
    <table id="tb" style="border:1px solid red;">
        <tr>
            <td>
                猫猫:
            </td>
            <td>
                沙发耶!
            </td>
        </tr>
    </table>
    <br />
    昵称:<input type="text" id="txt" value="" /><br />
    <textarea id="textContent" rows="10" cols="15"></textarea><br />
    <input type="button" value="评论" id="btn1" />
</body>
4、案例1:创建若干个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背风景设置为红色,如果不为空则为白色。提示:焦点进入控件的事件是focus,焦点离开控件的事件是blur。
 $(function () {
            $('input').blur(function () {
                if ($(this).val().length == 0) {
                    $(this).css('backgroundColor', 'red');
                }
                else {
                    $(this).css('backgroundColor','');
                }
            });
        });
5、案例:选择球队,两个ul。被悬浮行高亮显示(背景是红色),点击球队将它放到另外一个的球队列表。//清除所有事件。.unbind();
<script type="text/javascript">
        $(function () {
            //鼠标经过
            $('#uul li').mouseover(function () {
                $(this).css('cursor', 'pointer').css('backgroundColor', 'red');
            //鼠标离开
            }).mouseout(function () {
                $(this).css('cursor', 'pointer').css('backgroundColor', '')
                //鼠标点击
                .click(function () {
                    $(this).unbind().removeAttr('style').appendTo($('#ul2'));
                });
            })
        });
    </script>
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐