日期:2014-05-16  浏览次数:20366 次

jQuery链式语法 用js生成页面 并且响应click事件

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

<!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></title>
    <style type="text/css">
    .panel{
        padding:60px;
        background-color:red;
        color:#FFFFFF;
        font-size:50px;
        font-weight:bold;
        width:600px;
        text-align:center;
        }
    </style>
    <script type="text/javascript" src="JqueryCode/jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(function () {
            //向页面中添加几个按钮
            $('<input type="button" value="click me"/><input type="button" value="triggle click me"/><input type="button" value="detach handler"/><input type="button" value="show/hide text"/>').appendTo($('body'));
            //将四个按钮分别绑定四个不同的事件处理函数
            $('input[type="button"]').eq(0).click(function () {
                alert('you clicked me');
            }).end().eq(1).click(function () {
                $('input[type="button"]:eq(0)').trigger('click');
            }).end().eq(2).click(function () {
                $('input[type=button]:eq(0)').unbind('click');
            }).end().eq(3).toggle(function () {
                $('.panel').hide('slow');
            }, function () {
                $('.panel').show('slow');
            });
        });
    </script>
   
</head>
<body style="text-align:center">
    <form id="form1" runat="server">
    <div style="text-align:center">
    <div class="panel">Welcome to jQuery!</div>
    </div>
    </form>
</body>
</html>

1楼s10141303昨天 20:17