JS学习笔记
typeof 与 instanceof的区别
typeof
typeof 返回值
1."undefined"
2."number"
3."string"
4."boolean"
5."function"
6."Object"试试下面的练习题
console.log(typeof [])
console.log([].constructor == Object)instanceof
instanceof 用于判断一个变量是否某个对象的实例，如
var a=new Array();
alert(a instanceof Array); //返回 true
alert(a instanceof Object) //返回 true;这是因为 Array 是 object 的子类。再如：
function test(){};
var a=new test();
alert(a instanceof test) //返回 true谈到 instanceof 我们要多插入一个问题，就是 function 的 arguments，我们大家也许都认为 arguments 是一个 Array，但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象，尽管看起来很像。
另外：
测试
var a=new Array();
if (a instanceof Object) alert('Y');else alert('N');//得'Y'但
if (window instanceof Object) alert('Y');else alert('N');//得'N'所以，这里的 instanceof 测试的 object 是指 js 语法中的 object，不是指 dom 模型对象。
使用 typeof 会有些区别
alert(typeof(window)) 会得 object
写法上的一些注意事项
window.onscroll = test(); //仅IE有效
window.onscroll = test; //IE和chrome等都有效in操作符
“string” in obj||array
in操作符左侧操作数必须是字符串类型或可以转换为字符串类型的其他类型，右侧操作数必须是对象或者数组。只有左侧的值是右侧操作数的属性名，才返回true。即当右侧是对象时，左侧操作数是右侧的属性名，当右侧是数组时，左侧的值相当于数组角标（索引）。
例子：
var box = {box_width: 200,box_height: 300};
var arr = ["arr_length",200,"300"];
var x = "box_height";
var y = 2;
if(x in box){
console.log("变量x包含在对象box中");
console.log(box[x]);
}
else{
console.log("变量x包含在对象box中");
}
if(y in arr){
console.log("变量y包含在数组arr中");
console.log(arr[y]);
}
else{
console.log("变量y不包含在数组arr中");
}前端面试题
1.<a href=”zciwp.github.io” id=”link”>zciwp.github.io</a>点击只改变背景色和文字颜色，而不进行跳转
//事件兼容写法
var EventUtil = {
getEvent: function(id,etype,fun){
var element = document.getElementById(id);
if (window.attachEvent){
element.attachEvent("on" + etype, fun);
}
else if (window.addEventListener){
element.addEventListener(etype, fun, false);
}
}
}
//阻止默认事件
function stopDefault(e){
if ( e && e.preventDefault ){
e.preventDefault(); //ff等现代浏览器下
}
else{
window.event.returnValue = false;//IE下用
}
return false;
}
function test(e){
link.style.background = "black";
link.style.color = "white";
stopDefault(e);
}
EventUtil.getEvent("link","click",test);根据上面的题，顺便说一下stopPropagation。 stopPropagation的作用是阻止冒泡，我们都知道事件是一层一层向上冒泡的，即最终会传递到body上。如果我们在子元素上绑定了一个click事件，在父元素及body元素上也都有click事件，那么点击子元素将会触发父元素及body上的click事件。
举个例子说明一下。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="parent-box" id="parent">
<div class="child-box" id="child"></div>
</div>
<script>
function parent(){
console.log("parent");
}
function child(){
console.log("child");
}
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.onclick = parent;
child.onclick = child;
</script>
</body>
</html>上面这个例子是没有阻止事件冒泡的写法，那么点击child，在console中会显示child和parent。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="parent-box" id="parent">
<div class="child-box" id="child"></div>
</div>
<script>
function stopPropagation(e){
if(window.event){
event.cancelBubble = true;
}
else{
e.stopPropagation();
}
}
function parent(){
console.log("parent");
}
function child(e){
console.log("child");
stopPropagation();
}
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.onclick = parent;
child.onclick = child;
</script>
</body>
</html>经过修改，再点击child时，console中只会显示child。
2.<div id=”num”>30</div>每秒div中的数字减少1，一直到0为止。
//start要定义在setInerval函数的外面，要不clearInterval不能停止。
var start,num = Number(document.getElementById("num").innerHTML);
function start_dj(){
start = setInterval(djing,1000);
}
function djing(){
if(num < 0){
clearInterval(start);
}
else{
document.getElementById("num").innerHTML = num--;
}
}
start_dj();具体例子
移动端模拟fixed
手机端可以扫描二维码
登录页背景图随浏览器大小缩放全屏展示
响应式用到的一些jquery插件
1.兼容ie8以下（包括ie8）支持响应式respond.js
2.瀑布流布局isotope.js，还支持筛选排序功能
基于jquery的翻页插件jpages
http://luis-almeida.github.io/jPages/ 只不过不支持ie6，略遗憾