文档章节

前端常用的JavaScript和jquery代码片段

o
 osc_x4h57ch8
发布于 2018/04/24 14:09
字数 855
阅读 0
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

记录一下自己写前端整理下来的一些笔记。

1、数组去重

// 数组排重
function getFilterArray (array) {
    const res = [];
    const json = {};
    for (let i = 0; i < array.length; i++){
        const _self = array[i];
        if(!json[_self]){
            res.push(_self);
            json[_self] = 1;
        }
    }
    return res;
}

2、双向绑定(面试常考)

Object.defineProperty() //方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
  <div id="app">
        <input type="text" id="txt">
        <p id="show-txt"></p>
    </div>
    <script>
        var obj = {}
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj
            },
            set: function (newValue) {
                document.getElementById('txt').value = newValue
                document.getElementById('show-txt').innerHTML = newValue
            }
        })
        document.addEventListener('keyup', function (e) {
            obj.txt = e.target.value
        })
    </script>

3、平稳滑动到页面顶部

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

 var handleGoTop = function () {
        var offset = 300;
        var duration = 500;

        if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {  // ios supported
            $(window).bind("touchend touchcancel touchleave", function(e){
               if ($(this).scrollTop() > offset) {
                    $('.scroll-to-top').fadeIn(duration);
                } else {
                    $('.scroll-to-top').fadeOut(duration);
                }
            });
        } else {  // general 
            $(window).scroll(function() {
                if ($(this).scrollTop() > offset) {
                    $('.scroll-to-top').fadeIn(duration);
                } else {
                    $('.scroll-to-top').fadeOut(duration);
                }
            });
        }
        
        $('.scroll-to-top').click(function(e) {
            e.preventDefault();
            $('html, body').animate({scrollTop: 0}, duration);
            return false;
        });
    };
View Code

4、固定在顶部

$(function(){
    var $win = $(window)
    var $nav = $('.mytoolbar');
    var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
    var isFixed=0;

    processScroll()
    $win.on('scroll', processScroll)

    function processScroll() {
    var i, scrollTop = $win.scrollTop()

    if (scrollTop >= navTop && !isFixed) { 
        isFixed = 1
        $nav.addClass('subnav-fixed')
    } else if (scrollTop <= navTop && isFixed) {
        isFixed = 0
         $nav.removeClass('subnav-fixed')
    }
}
View Code

5、自动定位并修复损坏图片(如果你的站点比较大而且已经在线运行了好多年,你或多或少会遇到界面上某个地方有损坏的图片。这个有用的函数能够帮助检测损坏图片并用你中意的图片替换它,并会将此问题通知给访客。)

$('img').error(function(){
    $(this).attr('src', 'img/broken.png');
});

6、在文本或密码输入时禁止空格键

$('input.nospace').keydown(function(e) {
    if (e.keyCode == 32) {
        return false;
    }
});

7、在图片上停留时逐渐增强或减弱的透明效果

$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
    });
});
View Code

8、检测复制、粘贴和剪切的操作

$("#textA").bind('copy', function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
    $('span').text('cut behaviour detected!')
});
View Code

9、随机生成字符串

//生成随机字符串
function GenerateRanCode(length) {
    length = length || 8;
    var source = "abcdefghzklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    var s = "";
    for (var i = 0; i < length; i++) {
        s += source.charAt(Math.ceil(Math.random() * 1000) % source.length);
    }
    return s;
}
View Code

10、设置复选框(单选/全选)

function SelectAllCheckBoxOrNot(chAllId, TagName) {
    var allValue = $("#" + chAllId).prop("checked");
    $("#" + TagName + " input[name='test']").prop("checked", allValue);
};
View Code

11、点击空白处隐藏菜单

(function ($) {
    /*点击空白处隐藏菜单*/
    $.fn.autoHide = function () {
        var ele = $(this);
        $(document).on('click', function (e) {
            if(ele.is(':visible') && (!$(e.target)[0].isEqualNode(ele[0]) && ele.has(e.target).length === 0)){
                ele.hide();
            }
        });
        return this;
    }

})(jQuery);
View Code

12、时间格式

//时间格式
Date.prototype.format = function (format) {
    var date = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S+": this.getMilliseconds()
    };
    if (/(y+)/i.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (var k in date) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1
                ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
        }
    }
    return format;
};
View Code

13、获取一周的开始日期和结束日期

function getStartAndEndOfWeek(flag) {
    var result;
    var now = new Date(); //当前日期
    var nowDayOfWeek = now.getDay(); //今天本周的第几天
    var nowDay = now.getDate(); //当前日
    var nowMonth = now.getMonth(); //当前月
    var nowYear = now.getYear(); //当前年
    nowYear += (nowYear < 2000) ? 1900 : 0;
    if (flag == 1){
        //获得本周的开端日期
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1);
        result = weekStartDate.format('yyyy-MM-dd');
    }else if(flag == 2){
        //获得本周的停止日期
        var weekEndDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek) + 1);
        result = weekEndDate.format('yyyy-MM-dd');
    }
    return result;
};
View Code

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

PHP中的startsWith()和endsWith()函数 - startsWith() and endsWith() functions in PHP

问题: How can I write two functions that would take a string and return if it starts with the specified character/string or ends with it? 我如何编写两个带字符串的函数,如果它以......

技术盛宴
12分钟前
0
0
OSChina 周一乱弹 —— 你想用屁治疗一下谁

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《Rain in the Park》- Marika Takeuchi 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
16分钟前
18
0
在C#中调用基本构造函数 - Calling the base constructor in C#

问题: If I inherit from a base class and want to pass something from the constructor of the inherited class to the constructor of the base class, how do I do that? 如果我从基类......

富含淀粉
42分钟前
7
0
用Python构建个性化智能闹钟

作者|Kumar Shubham 编译|VK 来源|Towards Data Science 你可能之前有见过有人使用Python语言构建闹钟,帮助他唤醒或提醒他一个重要的会议。 这些都是很简单,没有任何智能,他们所做的只是播...

人工智能遇见磐创
51分钟前
18
0
前端学数据结构与算法(二):数组与栈

前言 数据结构与算法有相互依存的关系,如果将这个两个又进行划分,无疑数据结构又是这座大厦的基础。首先从线性数据结构开始,介绍大家耳熟能详的数据结构-数组。因为JavaScript已经为数组封...

飞跃疯人院
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部