分类目录归档:javascript

jQuery使用prop与attr读取a标签的href属性

昨天写代码的时候,遇到需要读取a标签的href属性。

<a href="#tab">标签页</a>

为了装个B,就用了prop而没有用attr,结果始终不对。。调试走起才发现,使用prop读取到的是
http://xxxxx.com/xxx/xx#tab,而不是预期的#tab,换用attr问题解决。

jQuery 获取 checkbox选中状态

使用jQuery获取checkedbox的选中状态的两种方式:

1 使用jQuery的内部属性

$('#checkboxid').on('change', function(e){
var checked = $(this).is(':checked');
});

2 使用jQuery的参数中的target属性

$('#checkboxid').on('change', function(e){
var checked = e.target.checked;
});

取巧-在Javascript中判断一年是不是闰年

先说说思路:
判断一年是不是闰年,在数学上是通过被4或者400整除来求得的;
换个角度想想,闰年和平年的区别在哪呢?
那就是闰年的2月有29天,而平年的2月只有28天,如此说来,只要能够知道这年的2月是28天还是29天,那就可以知道这年是不是闰年了。
在JS中怎么简单的知道2月有多少天呢?这就需要使用JS提供的日期计算了。
JS的日期计算提供了setDate()函数,用于直接在原有日期上对日期进行加减计算。
我们先来获取指定年的3月1号的日期对象,然后将这个日期对象减1得到3月1号的前一天的日期对象,也就是2月的最后一天。
阅读全文 取巧-在Javascript中判断一年是不是闰年

Javascript 工具函数库

Javascript 工具函数库

这是一个各种工具的库,每个文件都包含一个独立的功能。

有兴趣可以通过下方的地址贡献代码
阅读全文 Javascript 工具函数库

分享: 使用 JS 让浏览器全屏的代码

这个代码,用来把某个元素给全屏。没有用插件,也没有flash,就是CSS和JS。。
阅读全文 分享: 使用 JS 让浏览器全屏的代码

Echarts3 中设置自定义的 markline

在折线上,想要添加一条阈值标线,在echarts2中,这样写:

var category = [....];
var threshold = 80;

var option = {
    xAxis : [{
            type : 'category',
            data : category
        }
    ],
    yAxis : [{
            type : 'value',
            min : 0,
            max : 100
        }
    ],
    series : [
        type : 'line',
        markLine : {
            data : [
                [{
                        name : '阈值',
                        value : threshold,
                        xAxis : 0,
                        yAxis : threshold
                    }, {
                        xAxis : category.length,
                        yAxis : threshold
                    }
                ]
            ]
        }
    ]
};

在2中,x轴是使用类目的索引,要从最左侧画到最右侧,就使用从0到 category.length 一直画就行。

在echars3中,不再建议这样的写法(文档上说不建议,我这样写却是啥也不显示啊),而是改成了:

var category = [....];
var threshold = 80;

var option = {
    xAxis : [{
            type : 'category',
            data : category
        }
    ],
    yAxis : [{
            type : 'value',
            min : 0,
            max : 100
        }
    ],
    series : [
        type : 'line',
        markLine : {
            data : [
                [{
                        name : '阈值',
                        value : threshold,
                        coord : [category[0], threshold]
                    }, {
                        coord : [category[category.length - 1], threshold]
                    }
                ]
            ]
        }
    ]

};

在3中,使用的是坐标系的坐标位置 [x, y]。这时候,x轴上使用的不再是索引,而是类目的值,所以这里取第1个值(category[0])和最后一个值(category[category.length – 1])来作为x坐标的起始点。

Javascript日期时间处理库 moment.js

这是一个在Javascript操作时间的工具库。包括

  • 转换
  • 验证
  • 操作
  • 显示

等功能。
阅读全文 Javascript日期时间处理库 moment.js

jQuery 扁平风格提示条

这是一个依赖jQuery的简单扁平提示组件,tip和dialog两种模式。

使用说明

$.flatip.timeout  = 3000; // 设置tip默认的显示时长

$.flatip.success(message, timeout)
$.flatip.info(message, timeout)
$.flatip.warn(message, timeout)
$.flatip.error(message, timeout)

$.flatip.alert(option)
$.flatip.prompt(option)
$.flatip.dialog(option)

阅读全文 jQuery 扁平风格提示条

Javascript 对象深度克隆

对象的深度克隆,最大的问题就循环引用了。

现在,就在函数中使用一个数组,将所有的引用都保存起来,在clone前先检查,这个引用是否已经存在了,如果已经存在,就不再解析这个对象。

然后就很简单的了,直接上代码:

function cloneObject(obj){
    if(typeof obj !== 'object' || obj === null){
        return obj;
    }
    // 保存引用 
    var refs = arguments[1];
    // 通过 _refid 属性判断参数是不是需要的refs
    if(typeof refs === 'undefined' || refs === null || !refs._refid){
        refs = [obj];
        refs._refid = Math.random();
    } else if((function(refs, obj){
        // 检查引用是否存在  存在时返回true
        for(var i = 0;i < refs.length; i++){
            if(refs[i] === obj){
                return true;
            }
        }
        
        return false;
    })(refs, obj)){
        return obj;
    } else {
        // 保存当前对象的引用
        refs.push(obj);
    }
    
    var newobj = {};
    // 检查对象是否是数组
    if(typeof obj === 'object' && typeof obj.length === 'number' && obj.slice === Array.prototype.slice){
        newobj = [];
    }
    
    for(var key in obj){
        newobj[key] = cloneObject(obj[key], refs);
    }
    
    return newobj;
}

更多信息请到 http://git.oschina.net/hyjiacan/jsfunc