JavaScript 一些使用方法

1.jq 另一种取值方式

// var val =  $input.val()var val = $("#input")['val'] 

2.正则表达式html模板的运用

<div id="template">    <div>{{ firstName }} {{ lastName }}</div></div>

var mjson = { firstName:'lyqhn2012', lastName :'Hello' }function createTemplate(tag,items){    var tpls = {        personInfo: $("#template").html()    }    var template =  tpls[tag]    var regx = template.match(/({{.*?}})/g)    regx.forEach(function(ap){        template = template.replace(ap,eval(ap.replace(/^{{|}}$|\s/g,"")))       })    return template}createTemplate("personInfo",mjson)

3.打乱数组顺序

var arr =[1,2,3,4];arr.sort(function(){    return Math.random() - 0.5;})// [4, 2, 1, 3]

4.js中this的指向

this 是永远指向最后调用它的那个对象

var o = {  a: 2,  m: function(){    return this.a + 1;  }};// 当调用 o.m 时,'this'指向了o.console.log(o.m()); // 3

4.通过监听scroll事件，实现无限加载

// 注册无限加载事件$(".infinite-content").height(document.documentElement.clientHeight).scroll(function(){    var scrollTop = event.target.scrollTop || document.body.scrollTop,        clientHeight = event.target.clientHeight,        scrollHeight = event.target.scrollHeight,        offsetBottom = scrollHeight - scrollTop - clientHeight;    // 默认50    var distance = event.target.dataset.instance || 50;    // 判断执行状态    if(offsetBottom <= distance){        $(this).trigger("infinite");    }    return false;})var isLoading = false,    maxCount = 14,    lastCount = $(".productli").length;// 注册加载事件,简单示例$(".infinite-content").on("infinite",function(event){        // 延时器，模拟加载动作        var timer = setTimeout(renderHTML,1000);        var self = this        function renderHTML(){            var selfHtml = "",length = 5;            if(lastCount >= maxCount){                clearTimeout(timer);                // 注销无限加载事件                $.detachInfiniteScroll($(self))                return false;            }            for(var i=0;i< length; i++){                selfHtml += $("#prodsTemplate").html();            }            lastCount += length;            // 添加到列表            $(".infinite-content-list").append(selfHtml);            isLoading = false;        }});// 注销无限加载$.detachInfiniteScroll = function(eleObj) {    eleObj.find(".infinite-scroll-preloader").remove();    eleObj.off("infinite")}

5.实现下拉效果(仅供参考)

.infinite-content {    overflow: auto;    margin-top: -50px;}.pull-to-content:before {    font-size: 30px;    content: "\e62e";    line-height: 50px;    display: block;    background: #f9f9f9;    text-align: center;}

var scrollTop = 0,startY = 0,maxDistance = 50,isTrigger = false// 下拉,注册 pullstart 事件接受返回结果$(".pull-to-content").height(document.documentElement.clientHeight).scroll(function(){        scrollTop = event.target.scrollTop || document.body.scrollTop;    }).on("touchstart",function(event){        startY = event.targetTouches[0].pageY;    }).on("touchmove",function(event){        var moveY = event.targetTouches[0].pageY;        var distance = moveY - startY;        if(scrollTop == 0 && moveY > startY && distance <= maxDistance){            $(this).css({                "transform":"translate3d(0px, "+ distance +"px, 0px)",                "transition-duration":"0ms"})            if(distance >= maxDistance -5 && !isTrigger){                $(this).trigger("pullstart");                isTrigger = true;            }        }    }).on("touchend",function(event){        isTrigger = false;        $(this).css({"transform":"translate3d(0px, 0px, 0px)","transition-duration":"500ms"})    })

$(".pull-to-content").on("pullstart",function(){    console.log("下拉成功，执行操作")})

6.网页禁用鼠标右键

//禁止使用右键window.oncontextmenu = function () {   return false;}

7.获取鼠标或手指点击位置

function getTouches(event) {    // touchstart touchmove    if (event.touches !== undefined) {        return {            x: event.touches[0].pageX,            y: event.touches[0].pageY        };    }    // mousedown click event    if (event.touches === undefined) {        if (event.pageX !== undefined) {            return {                x: event.pageX,                y: event.pageY            };        }    if (event.pageX === undefined) {        return {                x: event.clientX,                y: event.clientY            };        }    }}