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>

时间： 2024-08-02 07:10:21

jQuery链式语法 用js生成页面 并且响应click事件的相关文章

JS编程建议——68：推荐使用链式语法

建议68:推荐使用链式语法使用过jQuery框架的读者,都会对jQuery简洁的语法.灵巧的用法赞叹不已,其中一个最大亮点就是jQuery的链式语法.在JavaScript中,很多方法没有返回值,一些设置或修改对象的某个状态却不返回任何值的方法就是典型的例子.如果让这些方法返回this,而不是undefined,那么就要启用级联功能,即所谓的链式语法.在一个级联中,单独一条语句可以连续调用同一个对象的很多方法.getElement('box'). move(350, 150). width(10

jQuery链式操作的问题

两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来,对象当然可以继续调用方法啦,所以就可以链式操作了.那么,简单实现一个: //定义一个JS类 function Demo() { } //扩展它的prototype Demo.prototype ={ setName:function (name) { this.na

jQuery链式操作实例分析_jquery

本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <script type="text/javascript"> $(function() { $("div").addClass("css1").filter(function(index) { return index == 1 || $(this).

jQuery链式调用与show知识浅析_jquery

上篇文章给大家介绍了jQuery的框架,有关jquery的基础知识可以参考下. jQuery使用许久了,但是有一些API的实现实在想不通.下面将使用简化的代码来介绍,主要关注jQuery的实现思想. 相较于上一篇,代码更新了:21~78 (function(window, undefined){ function jQuery(sel){ return new jQuery.prototype.init(sel); } jQuery.prototype = { constructor: jQue

jQuery链式操作如何实现以及为什么要用链式操作_jquery

两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来,对象当然可以继续调用方法啦,所以就可以链式操作了.那么,简单实现一个: 复制代码 代码如下: //定义一个JS类 function Demo() { } //扩展它的prototype Demo.prototype ={ setName:function (name

jquery链式操作的正确使用方法

 jQuery实现方法的链式操作是非常容易的.这里给出正确的使用方法 糟糕的使用方法   代码如下: $second.html(value); $second.on('click',function(){ alert('hello everybody'); }); $second.fadeIn('slow'); $second.animate({height:'120px'},500);     建议使用方法    代码如下: $second.html(value); $second.on('c

jquery插件 ata ables-DataTables怎么给某一列加上click事件

问题描述 DataTables怎么给某一列加上click事件 DataTables的数据是动态生成的, $('#example tbody').on('click','tr', function () { var name = $('td', this).eq(3).text(); alert(name); } ); 这种是点击一行的任何一列都会弹出name值,我现在情况是,想点击每一行的第三列都会弹出一个框,点击其他列不会有反应求指教啊 解决方案 nth-child选择器,注意下标从1开始 $

jquery链式操作的正确使用方法_jquery

糟糕的使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500); 建议使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody'

jQuery对象的链式操作用法分析_jquery

本文实例讲述了jQuery对象的链式操作用法.分享给大家供大家参考,具体如下: jQuery对象的链式操作 首先来看一个例子: 复制代码 代码如下: $("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good"); 对一个jQuery对象先调用了css()函数修改样式,然后使用attr()函数修改属性,这种调用方式象链一样,所以称为&qu