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

简介:             .panel{         padding:60px;         background-color:red;         color:#FFFFFF;         font-size...

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

相关文章
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
35 2
|
2月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
49 6
|
2月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
43 3
|
2月前
|
JavaScript 前端开发 开发者
jQuery 语法
jQuery 是一种高效的 JavaScript 库,用于简化 HTML 文档中元素的选取与操作。其核心语法为 $(selector).action(),允许开发者轻松地对页面元素进行控制。例如,$(this).hide() 可以隐藏当前元素,而 $(&quot;p&quot;).hide() 则会隐藏所有段落。为了确保代码在文档完全加载后执行,通常将 jQuery 代码包裹在 $(document).ready(function(){...}) 或其简写形式 $(function(){...}) 中。这样可以避免因元素未加载而导致的操作失败问题。
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
126 0
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
16 0
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
18 0
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
52 0
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
14 0
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法