javascript小功能

/**
 * 功能说明:     是否为数组
 *
 **/

function isArray(value) {
 if(typeof Array.isArray === "function") { 
//ES5新增加的判断数组的方法，IE9+支持
 return Array.isArray(value); 
} else { 
return Object.prototype.toString.call(value) === "[object Array]"; 
} 
}

---------------------------------------------------------------------------------

/**
 * 功能说明:     合并数组
 *
 **/

function arrayConnect(array1,array2){

Array.prototype.push.apply(array1,array2);
}

---------------------------------------------------------------------------------

/**
 * 功能说明:      邮箱验证
 *
 **/

utils.isEmail=function(str){
    var reg = /^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
    return reg.test(str);
}

---------------------------------------------------------------------------------

/**
 * 功能说明:      判断密码强度
 * @param:    val<密码值>
 **/
verifyCheck.pwdStrong = function (val) 

{
    var lv = 0;
    if (val.match(/[a-z]/g)) { lv++; }
    if (val.match(/[A-Z]/g)) { lv++; }
    if (val.match(/[0-9]/g)) { lv++; }
    if (val.match(/(.[^a-z0-9A-Z])/g)) { lv++; }
    if (lv > 4) { lv = 4; }
    if (lv === 0) return false;
    return lv;
};

---------------------------------------------------------------------------------

/**
 * 功能说明:     获取属性值
 * @param:    obj<元素> ，attr<属性> 参数不能有空格

 * 调用实例： getStyle(oDiv,"maxWidth");

**/

function getStyle(obj,attr) 
{
return obj.currentStyle ?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}

---------------------------------------------------------------------------------

/**
 * 功能说明: 全选
 * @param:    

**/

$("#checkboxAll").click(function(){
    var state = $(this).prop('checked');
    $("input:checkbox[name='checkbox']").prop('checked',state);
});

---------------------------------------------------------------------------------

/**
 * 功能说明:    IE6浏览器提示
 * @param:    

 * 调用实例： getStyle(oDiv,"maxWidth");

**/

  <!--[if IE 6]>

        <script>

            var fRemindBox = $('<div class="FRemindBox"></div>');

            var fRemind = $('<div class="FRemind"></div>');

            var femindInfo = $('<div class="RemindInfo"><span>您的浏览器版本过旧，请升级您的浏览器。</span></div>');

            var femindLogo = $('<div class="RemindLogo"><a class="ChromeLogo" href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html" target="_blank">' +

                '<img src="/Content/themes/images/ChromeLogo.jpg" /></a><a class="firefoxLogo" href="http://www.firefox.com.cn/download/" target="_blank">' +

                '<img src="/Content/themes/images/FFLogo.jpg" /></a><a class="ieLogo" href="http://www.iefans.net/" target="_blank">' +

                '<img src="/Content/themes/images/ieLogo.jpg" /></a></div>');  

            fRemindBox.append(fRemind.append(femindInfo).append(femindLogo));

            $("body").prepend(fRemindBox);

        </script>

    <![endif]-->

---------------------------------------------------------------------------------

/**
 * 功能说明:   string格式化
 * @param:    

 * 调用实例：expample var template1="我是{0}，今年{1}了"; var result1=template1.format("loogn",22);

**/

    String.prototype.format = function (args) {

        var result = this;

        if (arguments.length > 0) {

            if (arguments.length == 1 && typeof (args) == "object") {

                for (var key in args) {

                    if (args[key] != undefined) {

                        var reg = new RegExp("({" + key + "})", "g");

                        result = result.replace(reg, args[key]);

                    }

                }

            }//example   var template2="我是{name}，今年{age}了";var result2=template2.format({name:"loogn",age:22});

            else {

                for (var i = 0; i < arguments.length; i++) {

                    if (arguments[i] != undefined) {

                        var reg = new RegExp("({)" + i + "(})", "g");

                        result = result.replace(reg, arguments[i]);

                    }

                }//expample var template1="我是{0}，今年{1}了"; var result1=template1.format("loogn",22);

            }

        }

        return result;

    }

---------------------------------------------------------------------------------

/**
 * 功能说明: 判断浏览器是否支持 placeholder属性
 * @param:    

 * 调用实例：

**/

  

 

 function isPlaceholder(){

        var input = document.createElement('input');

        return 'placeholder' in input;

    }

---------------------------------------------------------------------------------

/**
 * 功能说明:分享到新浪微博
 * @param:    

 * 调用实例：

**/

base.sharetosina=function(title,url,picurl)
{
    var picStr=picurl?'&pic='+picurl:"";//图片
  //var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+encodeURI(title)+'&url='+url+'&content=utf-8&sourceUrl='+url+picStr;
    title="标题  "+escape(title)+" （想看更多？点击创新宝链接：http://www.chuangxb.com）";
  var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+title;

window.open(sharesinastring,'newwindow','height=400,width=400,top=100,left=100');   

}

---------------------------------------------------------------------------------

/**
 * 功能说明:事件代理

 * @param:    

 * 调用实例：

**/

事件代理时，你能够在事件被DOM绑定后仍然可以添加多个被匹配的元素到其中，而它们同样能够正常工作 

$('#myTable').click(function(e)

{

var clicked = $(e.target);

clicked.css('background','red');

}); //e'包含了事件的信息，包括了实际接收到click事件的目标元素。我们所要做的就是检查是哪个单元格被点击了。

 

---------------------------------------------------------------------------------

/**
 * 功能说明:data()方法

 * @param:    

 * 调用实例：

**/

jQuery内置的data()方法存储状态,它可以用来存储key/value类型的数据

$('#myDiv').data('currentState', 'off');

$('.button').click(function() { var menuItem = $(this).parent();var panel = menuItem.find('.panel'); if (menuItem.data('collapsed')) { menuItem.data('collapsed', false); panel.slideDown(); } else { menuItem.data('collapsed', true); panel.slideUp(); } });

自定义选择器

$.extend($.expr[':'], { over100pixels: function(a) { return $(a).height() > 100; } }); //创建一个自定义的选择器，它可以找出所有长度超过100px的元素。 $('.box:over100pixels').click(function() { alert('The element you clicked is over 100 pixels high'); });

 

---------------------------------------------------------------------------------

/**
 * 功能说明:图片已加载完毕

 * @param:    

 * 调用实例：

**/

使用场景：有些元素需要按图片的实际尺寸来设置其大小，以绝对布置方式放置。元素的大小设置可以在图片加载完成后计算。

$('#myImage').attr('src', 'image.jpg').load(function() { alert('Image Loaded'); });

 

HTML属性增加JS类

在jQuery加载之后你可以使用方法将”JS”类添加到HTML标签中：

$('HTML').addClass('JS');

因为这仅仅发生在javascript有效的时候，如果用户打开JavaScript开关，那么你可以使用它给元素添加上CSS风格：

.JS #myDiv{display:none;}

 

---------------------------------------------------------------------------------

/**
 * 功能说明:回到顶部按钮

 * @param:    

 * 调用实例：

**/

回到顶部按钮

$('.top').click(function (e) {

  e.preventDefault();

  $('html, body').animate({scrollTop: 0}, 800);

});

---------------------------------------------------------------------------------

/**
 * 功能说明:图片预加载

 * @param:    

 * 调用实例：

**/

图片预加载

如果你的网页使用了很多隐藏图片文件（例如：鼠标悬停展示的图片），那么图片的预加载是有意义的：

$.preloadImages = function () {

  for (var i = 0; i < arguments.length; i++) {

    $('<img>').attr('src', arguments[i]);

  }

};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

 

自动修补破损图像

如果你碰巧发现在你的网站上发现破损的图像链接，一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦：

$('img').on('error', function () {

  if(!$(this).hasClass('broken-image')) {

    $(this).prop('src', 'img/broken.png').addClass('broken-image');

  }

});

即使你没有任何断开的链接，加入这代码也不会有任何影响。

 

禁用输入

$('input[type="submit"]').prop('disabled', true); //你需要做的只是需要在输入框上再次运行prop方法，但设置的被禁用值是false：

对地不了解prop函数的jQuery开发者来说，最常使用的是attr函数，但是，在开发例如 checkbox、radio、select时，会发现使用attr无法让属性生效，在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好

 

 

根据文本获取元素

通过jQuery中的contains()选择器，你能找到一个元素内的文本内容。如果文本不存在，则这个元素将被隐藏：

var search = $('#search').val();

$('div:not(:contains("' + search + '"))').hide();

可见变化的触发

当用户不再聚焦或者重新聚焦一个标签时触发javascript脚本：

$(document).on('visibilitychange', function (e) {

  if (e.target.visibilityState === "visible") {

    console.log('Tab is now in view!');

  } else if (e.target.visibilityState === "hidden") {

    console.log('Tab is now hidden!');

  }

});

浅析Prototype的模板类--Template

var str = '#{what.name} may have gone, but there is a time of #{how}';
var object = {

 what : {
                name : 'Swallows'
            },

how : 'return'
}
var template_1 = new Template(str);
var result = template_1.evaluate(object);
console.log('result:',result);
//输出：'Swallows may have gone, but there is a time of return'

---------------------------------------------------------------------------------

/**
 * 功能说明:isFunction()兼容IE等各浏览器

 * @param:    

 * 调用实例：

**

function IsFunction(fn){
    if(!fn)return false;
    var s="toString", v="valueOf",
     t=typeof fn[s]==="function" && fn[s],
     o=typeof fn[v]==="function" && fn[v],
     r;
    if(t) delete fn[s];
    if(o) delete fn[v];
    r=typeof fn !=="string" && !(fn instanceof String)&& !fn.nodeName && fn.constructor !=Array && /^[s[]?function/.test(fn+"");
    if(t) fn[s]=t;
    if(o) fn[v]=o;
    return r;
}

---------------------------------------------------------------------------------

/**
 * 功能说明:倒计时跳转

 * @param:    

 * 调用实例：

**/

<span id="tiao">10</span>秒后系统会自动跳转到佰腾网首页

 function countDown(secs) {

        if (--secs > 0) {

            $("#tiao").text(secs);

            setTimeout("countDown(" + secs + ")", 1000);

        } 

        else {

            location.href = "http://www.baiten.cn/";

        }

    }

    countDown(11);

 

---------------------------------------------------------------------------------

/**
 * 功能说明:统计字符串个数

 * @param:    

 * 调用实例：

**/

 "abcdedftdaaafddddfer".split('').reduce((left, right) => { console.log(left,right);left[right] ? left[right]++ : left[right]=1 ; return left}, {})