平常整理

1： 图片加连接后有的浏览器默认蓝色边框， 消除方法

    img{border:0;}或者 img{border:none;}
   img虽然没有border，可是这种状况能够解决遇到a标签包裹的时候出现的问题。

2 3条以上 ie 和 ff 的脚本兼容问题

 

1、脚本差别：

一、事件绑定：addEventListener 与 attachEvent  事件处理函数中this指向不一样， IE中指向window

二、获取事件对象 ：事件处理函数     window.event 

三、获取触发事件的DOM元素： target  srcElement

四、阻止默认行为： e.preventDefault（）   e.returnValue= false

五、阻止冒泡：e.stopPropagation()  e.cancelBubble = true;

六、获取样式信息：getComputedStyle（obj,null）.width  currentStyle.width

七、 实例化XHR对象  new XMLHttpRequest（）  newActiveXObject（）

八、获取dom元素： parentNode parentElement  

 

 

2、css差别

 

一、!important  优先级最高，在IE6如下异常。

 

 

3 XHTML与HTML区别是什么？

html:超文本标记语言 (Hyper Text Markup Language)

xhtml:可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）相似，不过语法上更加严格。XHTML 元素必须被正确地嵌套

     XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
     XHTML 标签名必须用小写字母
     XHTML 文档必须拥有根元素
     XHTML 文档要求给全部属性赋一个值
     XHTML 要求全部的属性必须用引号""括起来
     XHTML 文档须要把全部 < 、>、& 等特殊符号用编码表示
     XHTML 文档不要在注释内容中使“--”
     XHTML 图片必须有说明文字
     XHTML 文档中用id属性代替name属性


4 构建一个自定义版本的foeach函数


5 slice方法返回字符串的片断。 
strObj.slice(start[,end]) 
说明： 
start下标从0开始的strObj指定部分其实索引。若是start为负，将它做为length+start处理，此处length为字符串的长度。 
end小标从0开始的strObj指定部分结束索引。若是end为负，将它做为length+end处理，此处length为字符串的长度。 
例如： 
012345 
var str = "ABCDEF"; 
str.slice(2,4); 
结果：CD 
slice(start,end) 从某个已有的数组返回选定的元素
请注意，该方法并不会修改数组，而是返回一个子数组

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。  一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。若是没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

 

6 jQuery事件绑定on()、bind()与delegate() 方法详解

 

bind   

给匹配到的元素直接绑定事件（不推荐，1.7之后的jQuery版本被on取代）

第一个参数：事件类型

第二个参数：事件处理程序

$("p").bind("click mouseenter", function(e){

    //事件响应方法

});

优势：能够同时绑定多个事件，好比：bind(“mouseenter  mouseleave”, function(){})

缺点：仍然没法给动态建立的元素绑定事件

 

delegate方式

做用：给匹配到的元素绑定事件，对支持动态建立的元素有效（特色：性能高，支持动态建立的元素）

// 第一个参数：selector，要绑定事件的元素

// 第二个参数：事件类型

// 第三个参数：事件处理函数

$(".parentBox").delegate("p", "click", function(){

    //为 .parentBox下面的全部的p标签绑定事件

});

与前两种方式最大的优点：减小事件绑定次数提升效率，支持动态建立出来的元素绑定事件

on

咱们如今用on的方式来绑定事件（最现代的方式，强烈建议使用的方式）

jQuery1.7版本后，jQuery用on统一了全部的事件处理的方法

做用：给匹配的元素绑定事件，包括了上面全部绑定事件方式的优势

 

 

  事件解绑

unbind() 方式

做用：解绑 bind方式绑定的事件

$(selector).unbind(); //解绑全部的事件

$(selector).unbind(“click”); //解绑指定的事件

 

undelegate() 方式

做用：解绑delegate方式绑定的事件

$( selector ).undelegate(); //解绑全部的delegate事件

$( selector).undelegate( “click” ); //解绑全部的click事件

 

 

 

off解绑on方式绑定的事件（重点）

// 解绑匹配元素的全部事件

$(selector).off();

// 解绑匹配元素的全部click事件

$(selector).off(“click”);

// 解绑全部代理的click事件，元素自己的事件不会被解绑

$(selector).off( “click”, “**” );

 

1.选择器匹配到的元素比较多时，不要用bind()迭代绑定

2.用id选择器时，能够用bind()

3.须要给动态添加的元素绑定时，用delegate()或者on()

4.用delegate()和on()方法，dom树不要太深

5.尽可能使用on()

  事件触发（重点）

简单事件触发

$(selector).click(); //触发 click事件

trigger方法触发事件

$(selector).trigger(“click”);

triggerHandler触发 事件响应方法，不触发浏览器行为

好比:文本框得到焦点的默认行为

$(selector).triggerHandler(“focus”);

 

 

forEach

    语法: 数组.forEach( callback )

    执行: 遍历数组中的每个元素, 而且将每个元素的处理过程交给回调函数

    回调函数中会传入两个参数, 一个是遍历的数组元素, 一个是当前的索引.

 

// 首先若是不提供参数, 那么 this 是 window

        // 若是提供一个对象 那么 这个对象就是 回调函数中的 this

        // 可是 forEach 这个方法执行一次, 也就是说这个对象是固定不变的

        // 也就代表回调函数中的 this 不会随着遍历元素的改变而改变, 它是固定的

 

    例如: 遍历打印数组中的每个元素与索引号

    传统:

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

            console.log( i + ', ' + arr[ i ] );  // 打印, 索引号 与 当前元素

        }

    forEach:

        arr.forEach( function ( value, index ) { 

            console.log( index + ', ' + value );

        } );

    比较一下 jq 中的 each 方法

        $.each( arr, function ( i, v ) { ... } )

    为何要这样抽象???

        因为大多数循环数组都是将数组所有遍历, 所以 forEach 默认就是将数组遍历出来

        咱们遍历数组的重点是在操做数组中的 当前元素与当前索引. 所以咱们将其抽象出来

        单独放到回调函数中处理. 那么咱们的业务逻辑更加集中.

 

    思考: 为何 jq 的 each 方法中回调函数的 参数是 i, v; 而数组中的参数是 v, i 呢?

        从实际开发中考虑, 统计上来讲遍历数组的时候使用 i 多仍是 v 多?

        js 中不少特征是动态的, 所以将回调函数写成 v, i 的形式, 若是不须要使用索引, 直接不提供 i 这个参数

 

        arr.forEach( function ( v, i ) { 

            // 在函数中只会用到 v 而不会用到 i

        } );

 

        // 若是在设计这个 api 的时候是将 i 放在前面, 那么使用的时候即便不使用 i 也得写

        arr.forEach( function ( i, v ) { 

            // 在函数中只会用到 v 而不会用到 i

        } );

 

        在 jq 中遍历 each 方法有两个, 一个是静态的, 一个是实例.

        $.each( arr, callback );

        $( 'div' ).each( callback );

        在 jq 中遍历每个 dom 对象的时候 通常不是使用 参数 v 而是使用 this

 

        $( 'div' ).each( function ( i ) {

            this 直接就是 DOM 元素, 若是要使用 索引, 在参数中提供 i 便可

        });

 

 

 

 

map 函数

    语法:

        数组.map( 回调函数 )

    简单的来理解, map 也是在遍历数组. 这种理解不许确.

 

    map 原意 映射, 通俗的理解就是将一个集合按照特定的规律变成另外一个集合.

    例如: 有数字构成的集合, 将其中 的数字扩大一倍.

 

    map 的实现逻辑

    1> map 函数要返回一个数组

    2> map 返回的这个数组的元素由 回调函数的返回值决定

 

    类比: 

        [ 1, 2, 3 ], []

        [ 1, 2, 3 ], [ 2 ]

        [ 1, 2, 3 ], [ 2, 4 ]

        [ 1, 2, 3 ], [ 2, 4, 6]

    map 函数也是如此, map 函数中的回调函数来实现咱们的规则

        var newArr = arr.map( function ( v, i ) {

            return v * 2;

        });

    若是回调函数没有返回值, 注意默认返回了 undefined

 

    咱们的要求是将数组中的元素转换成另外一个东西, 那么这个转换的过程由回调函数来实现

 

    典型的案例:

        'a,b,c'.split( ',' ).map(function ( v ) {

            return '<td>' + v + '</td>';

        });

        // [ 'a', 'b', 'c' ] => [ '<td>a</td>', '<td>b</td>', '<td>c</td>' ]

 

    将箭头函数引入 map. 上面的案例就能够改良成

        'a,b,c'.split( ',' ).map( v => '<td>' + v + '</td>' );

 

7. jq 中 map 方法与数组 中提供的 map 的异同( 讨论 )

 

8. every 和 some

    some 方法, 表示判断数组中的元素只要含有某一个条件便可

    every 方法, 表示判断数组中的每个元素必须含有某个条件

 

    语法: 

        数组.方法名( 回调函数 ) -> boolean

    说明:

    1> 回调函数依旧是遍历数组的每个元素

    2> 回调函数的参数依旧是 v, i

    3> 回调函数的做用是用来判断数组中的元素, 因此回调函数有返回值, 返回一个 boolean

    4> some 方法凡是发现知足了条件的元素就会中止遍历, 并返回 true, 不然返回 false.

    5> every 方法凡是发现了一个元素不知足条件就会中止遍历, 并返回 false, 不然返回 true.

 

    该方法与逻辑中断相似 是逻辑中断的升级版.

 

    ||  表达式1 || 表达式2

        若是表达式1为假, 才会判断表达式2, 若是表达式1已经真 那么不执行表达式2, 就获得结果

    &&  表达式1 && 表达式2

        若是表达式1为假, 那么不在判断表达式2, 直接获得结果为假, 若是表达式1为真, 再判断表达式2

 

    

    练习: 有一个数组, 判断该数组中是否含有数字.

        var arr = [ 'a', 'b', '12', 123 , 'd' ];

        arr.some( function ( v ) {

            return typeof v == 'number';

        });

    若是说练习是 判断数组中是否都为 DOM 元素( 潜规则, 判断元素是否含有属性 nodeType )

        arr.every( function ( v ) {

            // 若是是dom 元素应该返回 true

            // 若是不是 dom 元素 返回 false

            return v.nodeType;

        });

 

 

    ( 扩展 ) 有些项目中须要判断两个表达式, 可是仍是要实现逻辑运算

 

    if ( ( v1 = xxxxxx ) || ( v2 = xxxxxxxxxx ) ) {

    }

 

    可使用 按位或( | ) 与 按位与( & )

 

    注意在逻辑真假中 按位与 和 逻辑与, 以及 按位或与逻辑或 真值等价.

 

    按位与, 就是比较二进制数据中每个二进制位 而且求 与

 

        0011 & 1100 = 0000 => 3 & 12 == 0

 

        0111 & 0100 = 0100 => 7 & 4 == 4

    

    位运算在前端领域通常在权限限制 状态操做等方面使用. 可是不是绝对的.

 

    算法: 在 a, b, c, d, e, f, g 这几个字符中, 随机的取出 3 个字符串来, 不容许重复 将全部的取法求出来.

 

 

 

9. 问题

    数组中遍历方法能不能使用 this.

    在 js 中这个 this 在函数中被称为上下文( 环境 ).

 

 

10. filter 函数

    功能: 将一个数组中符合某要求的全部元素筛选出来, 组成一个新的数组返回.

    语法: 数组.filter( 回调函数 ) -> 新数组

    回调函数的参数依旧是 v, i

    回调函数判断的时候, 判断元素 v 是否符合要求, 若是符合返回 true, 不然返回 false

    filter 就会将全部的符合元素组成新的数组

 

    案例: 将全部的数字中奇数取出来.

        var arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ];

        arr.filter( v => v % 2 == 1 );

 

        等价于

        arr.filter( function ( v ) {

            return v % 2 == 1;

        } );

 

 

 

 

 

forEach    语法: 数组.forEach( callback )    执行: 遍历数组中的每个元素, 而且将每个元素的处理过程交给回调函数    回调函数中会传入两个参数, 一个是遍历的数组元素, 一个是当前的索引.
// 首先若是不提供参数, 那么 this 是 window        // 若是提供一个对象 那么 这个对象就是 回调函数中的 this        // 可是 forEach 这个方法执行一次, 也就是说这个对象是固定不变的        // 也就代表回调函数中的 this 不会随着遍历元素的改变而改变, 它是固定的
    例如: 遍历打印数组中的每个元素与索引号    传统:        for ( var i = 0; i < arr.length; i++ ) {            console.log( i + ', ' + arr[ i ] );  // 打印, 索引号 与 当前元素        }    forEach:        arr.forEach( function ( value, index ) {             console.log( index + ', ' + value );        } );    比较一下 jq 中的 each 方法        $.each( arr, function ( i, v ) { ... } )    为何要这样抽象???        因为大多数循环数组都是将数组所有遍历, 所以 forEach 默认就是将数组遍历出来        咱们遍历数组的重点是在操做数组中的 当前元素与当前索引. 所以咱们将其抽象出来        单独放到回调函数中处理. 那么咱们的业务逻辑更加集中.
    思考: 为何 jq 的 each 方法中回调函数的 参数是 i, v; 而数组中的参数是 v, i 呢?        从实际开发中考虑, 统计上来讲遍历数组的时候使用 i 多仍是 v 多?        js 中不少特征是动态的, 所以将回调函数写成 v, i 的形式, 若是不须要使用索引, 直接不提供 i 这个参数
        arr.forEach( function ( v, i ) {             // 在函数中只会用到 v 而不会用到 i        } );
        // 若是在设计这个 api 的时候是将 i 放在前面, 那么使用的时候即便不使用 i 也得写        arr.forEach( function ( i, v ) {             // 在函数中只会用到 v 而不会用到 i        } );
        在 jq 中遍历 each 方法有两个, 一个是静态的, 一个是实例.        $.each( arr, callback );        $( 'div' ).each( callback );        在 jq 中遍历每个 dom 对象的时候 通常不是使用 参数 v 而是使用 this
        $( 'div' ).each( function ( i ) {            this 直接就是 DOM 元素, 若是要使用 索引, 在参数中提供 i 便可        });

 

 

 

10 :    switch底层是===判断：若是数值相等数据类型不一样，那么也不算。