一行jQuery代码打印九九乘法表

简介:

网友西西用一行代码打印九九乘法表 展示了jQuery的级联语法,简介且功能强大 这个程序的要求:不能用if,for,var xx =等常见js代码。只能用jquery的链式代码。

于是,要生成99表,必然要递归。可递归必然有终止的条件,那就得有if(n==0)return这样的 代码,又是不被允许的。那么jquery怎么才能终止呢?我想到了用find('p:lt(n)'),n<0的时候 是会终止的。

而bind的使用,纯粹是为了递归循环。我们首先建立一个对象,绑定一个事件,无所谓了,比如error,然后在这个对象最后,triggerHandler一下,就能完成递归了。

这个程序有两个递归循环,外层的是建立九个,内层的是建立9个,在创建p的时候,把99口诀打出来。 代码如下:


$(document).ready(function(){
    
    $("
").data('fact',8).css('margin','10px')
             .appendTo(document.body)
             .bind('error',function(){           
                $(this).parent().find("div:lt("+ ($(this).data('fact')) +")").eq(0)
                       .before($(this).clone(true).data('fact',$(this).data('fact') - 1))
                       .unbind('error')
                       .append(
                         $("
").data('fact',$(this).data('fact')).width(20).height(20)
                            .css('display','inline').css('margin','10px')
                            .appendTo($(this))
                            .bind('focus',function(){
                                $(this).text(($(this).data('fact') + 1) + 
                                     "x" + 
                                     ($(this).parent().data('fact') + 1) + 
                                     "=" + 
                                     ($(this).data('fact') + 1)*($(this).parent().data('fact') + 1)
                                     )
                                    .parent().find("p:lt("+ ($(this).data('fact')) +")").eq(0)
                                    .before($(this).clone(true).data('fact',$(this).data('fact') - 1))
                                    .unbind('focus')
                                    .parent().find("p").eq(0).triggerHandler('focus');
                                }).triggerHandler('focus')
                       ).parent().find("div").eq(0).triggerHandler('error');        
             }).triggerHandler('error');
});


相关文章
|
2月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
34 7
jQuery幸运大转盘抽奖活动代码
|
6月前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
33 0
|
8月前
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
67 0
|
8月前
|
JavaScript 开发者
|
4月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
43 1
|
2月前
|
JavaScript
jQuery模态框弹窗提示代码
jQuery模态框弹窗提示代码
18 1
jQuery模态框弹窗提示代码
|
2月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
31 0
|
10月前
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
75 0
|
5月前
|
JavaScript 程序员
让我们一起抄代码,JQuery 用法整理
让我们一起抄代码,JQuery 用法整理
31 0