日常整理
1： 图片加链接后有的浏览器默认蓝色边框， 消除方法
img{border:0;}或者 img{border:none;}
img虽然没有border，但是这种情况可以解决遇到a标签包裹的时候出现的问题。
2 3条以上 ie 和 ff 的脚本兼容问题
一、脚本差异：
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底层是===判断：如果数值相等数据类型不同，那么也不算。
