javascript杂记

title: javascript杂记
date: 2017-05-21 14:34:25
tags: javascript笔记

this的基本用法

首先有一个函数

function fn1(){
    alert(this);
}

直接调用则this指向window

fn1();  // 指向window;

如果是被元素对象调用

div.onclick = function(){
    var _this = this;    // 这个this指的就是div元素对象
    fn1();    // 这里打印的this值的就是window，因为上面fn1函数的环境就是在全局，所以如果直接调用函数，那么this都是window
}

div.onclick = fn1;    // 这里打印的this就是div元素对象，这里已经改变了fn1函数的环境，赋值给了div元素对象的事件属性中，环境自然也从全局变为div元素对象。

判断浏览器名称

function myBrowser(){
    var userAgent = navigator.userAgent;   //取得浏览器的userAgent字符串
    if (userAgent.indexOf("Opera") > -1) {   //判断是否Opera浏览器
        return "Opera"
    };
    if (userAgent.indexOf("Firefox") > -1) { //判断是否Firefox浏览器
        return "FF";
    };
    if (userAgent.indexOf("Chrome") > -1){  //判断是否Chrome浏览器
        return "Chrome";
    }
    if (userAgent.indexOf("Safari") > -1) { //判断是否Safari浏览器
        return "Safari";
    }
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {  //判断是否IE浏览器
        return "IE";
    };
}

火狐浏览器禁止页面滚动

if (navigator.userAgent.toLowerCase().indexOf('firefox')>=0){
    if (e.preventDefault)
    e.preventDefault();
    e.returnValue = false;
}

鼠标滚轮事件

非FireFox浏览器是使用onmousewheel事件，而FireFox浏览器使用DOMMouseScroll事件。

非FireFox浏览器使用的是wheelDelta方法判断滚动方向，FireFox浏览器使用的是detail方法判断滚动方向。

wheelDelta:-120和detail:3 代表向下滚动。wheelDelta:120和detail:-3代表向上滚动。

document.body.onmousewheel = function(event) {
    event = event || window.event;
    console.log(event.wheelDelta)
};

document.body.addEventListener("DOMMouseScroll", function(event) {
    console.log(event.detail)
});

jquery兼容性的滚轮事件

$('#scrollSelect-view').on("mousewheel DOMMouseScroll", function (e) {

    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||        // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));                  // firefox

    if (delta > 0) {
        // 向上滚
        console.log("wheelup");
    } else if (delta < 0) {
        // 向下滚
        console.log("wheeldown");
    }
});

自定义属性

有时候写方法时会定义大量变量，有的变量其实比较多余，很多数据可以存储到元素对象的自定义属性中去。这样不用去考虑作用域的问题，因为只要这个元素对象存在在这个方法内就可以去使用，但是最好只保存和这个元素对象有关的属性。

比如：下面代码就是，在事件处理函数内部只能获取i循环完毕之后的值，而通过把i的值作为元素对象的自定义属性赋值，就没有作用域的限制。

for(var i = 0; i < 5; i++) {
    div.index = i;
    div[i].onclick = function(){
        alert(i);
        alert(this.index);
    }
}

排他思想和清空上一个

排他

通常在tab栏切换中经常用到排他，比如有10个选项，只有当前项才有背景色，通常颜色是通过一个类名挂钩到css中去设置的，那么排他就是每次先将所有导航选项的类名清空，然后只给当前点击的这个元素对象添加类名。

for(var i = 0;i < Lis.length;i++){
    Lis[i].index = i;
    Lis[i].onclick = function(){
        // 这里开始排他
        for(var i = 0; i < Lis.length;i++){
            Lis[i].className = '';
        }
        // 单独设置当前选项
        Lis[this.index].className = 'active';
    };
};

清空上一个

这种效果除了排他之外还可以通过清除上一个选项来完成。创建一个变量存储上一个选中元素，在点击当前元素时候清空上一个类名，之后把自己赋值给这个变量，如此每次只需要清空一个元素的类名即可。

var oElem = null;
// 初始化，默认第一个元素是当前项
Lis[0].className = 'active';
Elem = Lis[0];

for(var i = 0;i < Lis.length;i++){
    Lis[i].index = i;
    Lis[i].onclick = function(){
        // 这里开始清空上一个
        Elem.className = '';
        Elem = this;
        Lis[this.index].className = 'active';
    };
};

jquery的stop()方法

$(selector).stop(stopAll,goToEnd)

stopAll 可选。规定是否停止被选元素的所有加入队列的动画。

goToEnd 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

使用懒加载插件

使用的 jquery.lazyload

调用下载好的插件

$(function(){
    $("img.imglazyload").lazyload({
        threshold : 200,
        effect : "fadeIn"
    });
});

html部分，一定要在外层包一个div并且设置宽高，不要用图片去撑开。

<div class="item-image">
    <img class="imglazyload" data-original="图片地址">
</div>

js中的NaN

  1. NaN是一个数字类型但不是一个数值。
  2. 出现NaN肯定是进行了非法操作而不是获取数值有错，如果获取数值有错是undefind。
  3. NaN与自己本身也是不相等的。
  4. NaN转为布尔是false。
  5. NaN本身的意思是'不是一个数值'

isNaN可以判断某些类型是不是一个数字类型。如果判断到是一个数字为false(不是一个数值这个判定是错的)，而不是数字类型的是true(不是一个数值这个判定是对的)。

NaN在判断时是在内部使用Number()方法转换，所以是不是数字类型的依据主要是看Number()转出的是什么类型。比如布尔值、空字符串、字符串数字都会被认为是数字类型而返回false。

js的作用域基础

作用域实际上是浏览器js解析器的一种工作方式。

浏览器的js解析器在读取javascript代码时会先提升变量和函数，再去逐行解读代码。这是每个作用域的解析步骤。

预解析

根据var、function、参数 找一些东西。

首先js解析器会搜索所有var和function找到所有变量，var声明的变量提升时值都是未定义，提升function时候会将整个函数代码块一起提升。

当var和function重名时，会保留function，覆盖var,但是如果两个以上同名的function，那么就看声明的先后顺序了。

逐行解析

变量提升之后，js解析器会开始逐行解析代码，这时只有表达式可以改变变量的值，用下边的案例来说明。

alert(a);   // function a(){alert(4);}
var a = 1;
alert(a);   // 1
function a(){alert(2);}
alert(a);   // 1
var a = 3;
alert(a)    // 3
function a(){alert(4);}
alert(a);   // 3

a();    // 报错

第一个alert打印出函数的原因是变量提升的规则，后面的a打印的都是变量的值而不是函数，因为变量赋值是一种表达式，而函数只是一个声明并不是表达式。并且因为现在a是一个数值，所以调用时自然会报错。

多组script

自上而下的作用域大部分指的是多组script标签，如下代码

<script>
    alert(a);   // 报错
</script>
<script>
    var a = 1;
</script>
<script>
    alert(a);   // 1
</script>
/

如果碰到这种情况，js解析器会对每个script代码块进行独立预解析和逐行解析，第一块script的代码还没声明a，第二块script的代码声明和赋值了，这时到第三块script代码块时a已经声明并赋值了，所以直接会打印1。

函数

由内而外主要指函数，一个函数也是一个单独的作用域，javascript中，函数是唯一能分隔作用域的。

var a = 1;
function fn1(){
    alert(a);
    var a = 2;
}
fn1();      // undefined
alert(a);   // 1

var a = 1;
function fn1(){
    alert(a);
    a = 2;
}
fn1();      // 1
alert(a);   // 2

第一个例子中在函数内部声明了a，那么在fn1中的a变量就和上级作用域的a变量没有任何关系了。按照预解析的步骤这里打印的是undefined。

第二个例子没有声明a变量，所以在fn1作用域中就找不到a，这时就会去上级作用域中寻找，上级作用域声明了a并且赋值为1了，所以打印1。

如果是下面这种情况

var a = 1;
function fn1(a){
    alert(a);
    a = 2;
}
fn1();      // undefined
alert(a);   // 1

var a = 1;
function fn1(a){
    alert(a);
    a = 2;
}
fn1(a);     // 1
alert(a);   // 2

参数其实就是一个局部变量，第一个例子没有传参，参数就相当于var a; 第二个例子传了参数就相当于var a = 1;

一个函数的解析顺序是先从参数开始的。

下面看一个最常见的案例

for(var i = 0; i < 3; i++){
    btn[i].onclick = function(){
        alert(i);   // 3
    }
}

最开始我以为这里打印的i是会随着遍历打印出0,1,2的，但实际上onclick函数中相当于一个独立的作用域，这个作用域中没有声明i变量，所以就要去上级作用域去获取，那为什么是3呢，因为函数只有在点击时才会调用，只有调用时才会发生预解析和逐步解析，这时去获取i的值上级作用域早已遍历完毕。

js运算符%取余的应用

下面的例子中要在li元素中添加背景色，颜色存储在arr数组。如果不用取余运算符只能写两层for循环，而使用取余运算，可以直接让取余后的值自己循环。

arr的长度是3，i是0开始每次+1，那么arr数组每次的索引就是：arr[0%3=0],arr[1%3=1],arr[2%3=2],arr[3%3=0],arr[4%3=1],arr[5%3=2],arr[6%3=0]，这样就达到了遍历颜色数组的目的。这种操作很适合于在一个数组的遍历内部又需要遍历另外一个数组的情况。

var li = document.getElementsByTagName('li');
var arr = ['yellow','pink','orange'];
for(var i = 0; i < li.length; i++){
    li[i].style.backgroundColor = arr[i%arr.length];
}

下面扩展一下这个案例，加上任意li元素点击后变色，再去点击另一个li，另一个li元素变色，上一个li元素变回原来的颜色。通常这种功能会用排他来做，这次不用排他，使用取余操作来写。

var li = document.getElementsByTagName('li');
var arr = ['yellow','pink','orange'];
var elem = null;

for(var i = 0; i < li.length; i++){
    li[i].index = i;
    li[i].style.backgroundColor = arr[i%arr.length];

    li[i].onclick = function(){
        if(elem){
            elem.style.backgroundColor = arr[elem.index%arr.length];
        }
        elem = this;
        this.style.backgroundColor = 'gray';
    }
}

排他是将所有li元素变色，再去更改当前点击的元素的背景色，而这种思路是记录上一次点击的元素，在下一次点击时只改变上一次点击的元素的背景色就可以了。这里elem.index和i的作用是相同的。

另外取余操作还可以换算时间，比如现在要将70秒转为分钟，那么可以这样写

var s = 70;
var m = Math.floor( 70/60 + '分' + 70%60 + '秒');

js获取浏览器计算后的属性值

像width或者height这种属性直接获取只能得到行内样式，如果不写在行内就获取不到，使用getComputerStyle可以获取浏览器计算后的样式，也就是被浏览器渲染之后得到的元素实际的属性的值。格式是getComputerStyle(element).width;

但是这个方法在ie6、7、8不兼容。这三个非标准浏览器使用的currentStyle属性。格式是element.currentStyle.width;。

不要用这两个方法去获取没有设置过的属性。

不能用这两个属性去获取复合样式，比如要获取背景色不要用background而是要用backgroundColor，不论css是怎么写的，都要写具体的属性。因为如果写background的话会获取到所有这个属性可以设置的属性值，如果css没写的会获取到默认的。

另外在firefox浏览器4.0版本之前，getComputerStyle的参数要写两个，第二个参数可以随便写比如getComputerStyle(element,'').width;或getComputerStyle(element,true).width;，总之只要写一个参数就可以。

jq中的即使搜索事件

在jq中实现input搜索框的即时搜索和其他即时性的改变需要用到input和propertychange(兼容ie8及以下浏览器)事件。

input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化。

propertychange只要当前对象属性发生改变都会触发，所以使用propertychange时最好排除一下不想触发事件的元素。

window.parent

在b.html页面使用iframe的时候，引入一个Html页面名称暂定为a.html，呢么在a.html中，window指的是a的window对象，而window.parent指的就是b.html的window对象。

监听DOM树加载完成的事件

DOM的加载顺序：

  1. 解析HTML结构。

  2. 加载外部脚本和样式表文件。

  3. 解析并执行脚本代码。

  4. 构造HTML DOM模型。

  5. 加载图片等外部文件。

  6. 页面加载完毕

DOMContentLoaded事件 可以在DOM模型加载完成后就执行代码，而不用等到加载完图片或外部文件

移动端获取屏幕的宽高

document.documentElement.clientWidth 和 document.documentElement.clientHeight
这个得到的是设备像素可见宽高，比如iPhone 5里为320和504。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,100评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,862评论 2赞 378
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,993评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,309评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,303评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,421评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,830评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,501评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,689评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,506评论 2赞 318
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,564评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,286评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,826评论 3赞 305
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,875评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,114评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,705评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,269评论 2赞 341

推荐阅读更多精彩内容

  • 前端面试题汇总
    <a name='html'>HTML</a> Doctype作用？标准模式与兼容模式各有什么区别? （1）、<...
    clark124阅读 3,453评论 1赞 19
  • 《辩护人》
    “一个小弟” 宋佑硕开始的目标就是为着赚些钱，过上好日子。他去求见金常弼，为的借一些钱，在釜山创建自己的事...
    小Zer阅读 612评论 0赞 0
  • 《高手》拆书1
    R p2 1.1 图片发自简书App图片发自简书App图片发自简书App图片发自简书AppI 1，运气可以放大 如...
    若轩_a4a9阅读 304评论 0赞 0
  • 陪嫂子
    好久没有设计一个给自闲下来的时间去作些消遣的事情了。因为嫂子来，所以要空出半天时间来陪她逛街。早上，灵修后，按...
    比萨列阅读 260评论 1赞 1