前端几个常用的方法

最新推荐文章于 2024-04-17 20:23:58 发布

背藏玫瑰

最新推荐文章于 2024-04-17 20:23:58 发布

阅读量625

点赞数

/*判断是不是微信内核*/
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}

/* JSON.stringify */
// 此处为了示例, 采用字面量的形式构造了一个对象
// 实际使用中, 一般是某个POJO,或者VO之类的值对象
var myObject = {
"myProp": "myValue",
"subObj": {
"prop": "value"
}
};
// 格式化
var formattedStr = JSON.stringify(myObject, null, 2);

回到顶部
不需要其他插件,简单通过使用jquery 中的 animate and scrollTop 方法,就能实现
// 回到顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});

<a class="top" href="#">Back to top</a>
通过改变scrollTop的值控制滚动条到达哪个位置

预加载图片
如果你的页面有很多图片,并且默认情况下是看不到的,当你鼠标移动过的时候才出现,这时候就需要预加载功能
$.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').load(function () {
console.log('image load successful');

});

优雅处理加载不成功的图片
使用一张默认的图片来代替加载不成功的图片
$('img').on('error', function () {
$(this).prop('src', 'img/broken.png');
});
Hover事件切换类
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
混合写法,
$('.btn').hover(function () {
$(this).toggleClass('hover');
});

禁用一个表单元素
比如有时候 ,只想提交一次表单,就可以设置禁用
$('input[type="submit"]').prop('disabled', true);
如果想解禁 ,
$('input[type="submit"]').prop('disabled', false);

阻止超链接的默认行为
有时候我们常常用超链接作为按钮,但是超链接本身是有链接会跳转的,假如我们不想要跳转的时候就需要阻止默认行为
$('a.no-link').click(function (e) {
e.preventDefault();
});

fade(渐入渐出)效果和slide(下拉收起)效果的切换
// 渐入渐出
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// 下拉收起
$('.btn').click(function () {
$('.element').slideToggle('slow');
});

动态设置两个div的高度一样
不管他们的内容怎样他们的高度都会保持一致
通过css设置最低高度值,
$('.div').css('min-height', $(.main-div).height());
无论内容是什么都保持高度一致
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});

$columns.height(height);

遍历设置一序列的元素的高度统一

var $rows = $('.same-height-columns');

$rows.each(function () {
$(this).find('.column').height($(this).height());
});

新的标签或者窗口打开外部链接
$('a[href^="http"]').attr('target','_blank');
$('a[href^="//"]').attr('target','_blank');
$('a[href^="'+window.location.origin+'"]').attr('target','_self');
注意: window.location.origin 不兼容IE10 解决方案

根据内容来寻找元素
通过 jquery的contains() 方法
var search = $('#search').val();

$('div:not(:contains("'+search+'"))').hide();//表示如果没有包含search内容的都隐藏

//字符串分割
function toArray(string) {
    return string.split(',')
}

//是否字符串
function isString(o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'String'
}
//是否数字
function isNumber(o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}
//是否对象
function isObj(o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
}
//是否数组
function isArray(o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
}

function isDate(o) { //是否时间
    return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
}
//是否boolean
function isBoolean(o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
}
//是否函数
function isFunction(o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
}
//是否为null
function isNull(o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}
//是否undefined
function isUndefined(o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
}
// 是否 为false
function isFalse(o) {
    if (!o || o === 'null' || o === 'undefined' || o === 'false' || o === 'NaN') return true
    return false
}

function isTrue(o) {
    return !this.isFalse(o)
}

//是否为ios
function isIos() {
    var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
        // return "Android";
        return false
    } else if (u.indexOf('iPhone') > -1) {//苹果手机
        // return "iPhone";
        return true
    } else if (u.indexOf('iPad') > -1) {//iPad
        // return "iPad";
        return false
    } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
        // return "Windows Phone";
        return false
    } else {
        return false
    }
}
//是否为PC端
function isPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
//判断浏览器的类型
function browserType() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
    var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
    var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
    if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion == 7) return "IE7"
        else if (fIEVersion == 8) return "IE8";
        else if (fIEVersion == 9) return "IE9";
        else if (fIEVersion == 10) return "IE10";
        else if (fIEVersion == 11) return "IE11";
        else return "IE7以下"//IE版本过低
    }

    if (isFF) return "FF";
    if (isOpera) return "Opera";
    if (isEdge) return "Edge";
    if (isSafari) return "Safari";
    if (isChrome) return "Chrome";
}
//格式判断
function checkStr(str, type) {
    switch (type) {
        case 'phone':   //手机号码
            return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
        case 'tel':     //座机
            return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
        case 'card':    //身份证
            return /^\d{15}|\d{18}$/.test(str);
        case 'pwd':     //密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
            return /^[a-zA-Z]\w{5,17}$/.test(str)
        case 'postal':  //邮政编码
            return /[1-9]\d{5}(?!\d)/.test(str);
        case 'QQ':      //QQ号
            return /^[1-9][0-9]{4,9}$/.test(str);
        case 'email':   //邮箱
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
        case 'money':   //金额(小数点2位)
            return /^\d*(?:\.\d{0,2})?$/.test(str);
        case 'URL':     //网址
            return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)
        case 'IP':      //IP
            return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);
        case 'date':    //日期时间
            return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
    }
}

背藏玫瑰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
前端几个常用的方法

/*判断是不是微信内核*/function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ return true; }else{ return false; }}...
复制链接

扫一扫