发表于 | 分类于

DOM事件

1、DOM事件的级别

DOM0 element.onclick=function(){}
DOM2 element.addEventListener(‘click’,function(){}, true)
DOM3 element.addEventListener(‘click’,function(){}, true)

2、DOM事件模型（你了解DOM事件模型吗）

捕获 冒泡
window document html body …

3、DOM事件流

事件捕获 -》 目标阶段 -〉冒泡

4、描述DOM事件捕获的具体流程

捕获是从上到下的过程
冒泡是从下到上的过程
dom


5、Event对象的常见应用

event.preventDefault() // 阻止默认行为
event.stopProgration() // 阻止冒泡
event.stopImmediateProgration() // 事件响应优先级的方法
event.target // 事件委托/代理，当前被点击的元素，早期的ie是不支持的
event.currentTarget // 返回触发事件的元素

e.target 指向触发事件监听的对象。// 谁触发
e.currentTarget 指向添加监听事件的对象 // 谁绑定

6、自定义事件

var eve = new Event(‘look’);
ele.dispachEvent(eve);
以上这种创建方法不好的地方就是不能带参数
需要带参数用 customEvent

7、事件绑定

有三种常用的事件绑定方式：
(1)直接在DOM中绑定；

1
<button onclick=test()>test</button>

1
2
3
function test(){
	alert(‘test’);
}

(2)在JavaScript代码中绑定；

1
2
3
document.getElementById(‘test’).onclick = futnciton(){
	alert(‘test’);
}

(3)绑定事件监听函数
document.getElementById(‘test’).addEventListener(‘click’,function(){ alert(‘test’)}, true);

8、事件监听（事件流）

addEventListener(‘click’,function(){}, true); // 第三个参数true捕获，false冒泡
element.attachEvent(event, function) //ie8 以下
事件捕获阶段，目标阶段，事件冒泡阶段
事件监听的优点是可以绑定多个事件，可以移除事件绑定（常规事件绑定只执行最后一个）

9、事件委托

事件委托就是利用冒泡的原理，把事件加的父元素或者祖先元素上，触发执行效果。
事件委托的优点：
(1)提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用；
(2)动态的添加DOM元素，不需要因为元素的改动而修改事件绑定

发表于 | 分类于

基本数据类型

Boolean Null Spring Number Undefined Symbol
对象
Object

显示类型转换

（1）Number函数

  • 数值：转换后还是原来的值
  • 字符串：如果可以被解析为数值则转换为相应的数值，如果不能则转换为NaN，空字符串转换为0
  • 布尔值： true转成1，false转成0
  • undefined: 转成 NaN
  • null：转成0
    （2）String函数
  • String(true) // ’true’
  • String(undefined) // ‘undefined’
  • String(null) // ’null’
    （3）Boolean函数
  • undefined, null, 0, NaN, ‘’ 转成 false

隐示类型转换

什么时候会触发隐式类型转换？

  • 四则运算
  • 判断语句

常见题目

[]+[] // 0
{}+[]
[]+{} // 0
{}+{}
true+true // 2
1+{a:1}

typeof
对变量或值调用 typeof 运算符将返回下列值之一：

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的
  • object - 如果变量是一种引用类型或 Null 类型的

发表于 | 分类于

CSS盒子模型

1、基本概念：基本模型+IE模型及区别；

盒子模型


2、CSS如何设置两种模型

box-sizing: content-box/border-box;

3、JS如何获取和设置盒模型对应的宽度和高度

dom.style.width/height (只能获取行内样式定义的宽高)
dom.currentStyle.width/height（只能ie获取）
window.getComputedStyle(dom).width/height(支持chrome/firfox)
dom.getBountingClientRect().width

4、BFC边距重叠解决方案

父子元素边距重叠（子元素有margin-top:10px;）
解决方案：1、overflow（相当于给父元素创建了个BFC）; 2、border-top-width:1px; 3、padding-top:1px; 4、假个行内元素；
兄弟元素边距重叠
哥元素有margin-bottom:20px; 弟元素有margin-top:30px，结果两个的边距是30px
空元素边距 margin-top , margin-bottom 取最大的

5、BFC的渲染规则（原理）

BFC元素的垂直方向会发生重叠
BFC的区域不会与浮动元素重叠（用来清除浮动的）
BFC在页面上是一个独立的容器，外面的元素不会影响里边的元素，里边的元素也不会影响外边的元素
计算BFC元素高度的时候浮动元素也会计算

6、如何创建BFC

overflow:hidden/auto/
float不为none
postion的值不为static 或者 relative
table-cell

7、BFC使用场景有哪些？

清除浮动

8、CSS清除浮动的8种方式

父元素增加高度；
父元素也浮动；
结尾处加空标签div clear both；
父元素增加一个伪元素:after 然后clear both；
结尾处加
clear both;
overflow:hidden/auto；
父级元素dispaly table

发表于 | 分类于

原型链

1、创建对象有几种方式？ 

1
2
3
4
5
6
7
8
var o1={name:’o1’} // 第一种
var o11=new Object({name:’o11’}); // 第二种
var M=function(){
	this.name=‘o2’;
}
var o2 = new M(); // 第三种
var P = {name:’o3’};
var o3=Object.create(P); // 第四种

2、原型、构造函数、实例、原型链
原型链

3、new运算符

发表于 | 分类于

Web页面布局

要求：三栏布局左右各300像素，中间自适应

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    html,body{ margin: 0; width: 100%; }
	/* other style */
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>
</html>

一、浮动

1
2
3
4
.container{ overflow: hidden; }
.left{ width: 300px; float: left; background-color: red; padding-bottom: 10000px; margin-bottom: -10000px;}
.right{ width: 300px; float: right; background-color: blue; }
.center{ background-color: yellow; margin: 0 310px;}

上面的HTML结构要调整下

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
  /* ... */
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div> <!-- 让右栏先浮上去 -->
    <div class="center">center</div>
  </div>
</body>
</html>

使用

1
2
.container{ overflow: hidden; }
.left{ padding-bottom: 10000px; margin-bottom: -10000px;}

实现左边栏始终随center部分撑满页面

二、绝对定位

1
2
3
4
.container{ position: relative; }
.left{ width: 300px; position: absolute; left: 0; top: 0; background-color: red;}
.right{ width: 300px; position: absolute; right: 0; top: 0; background-color: blue; }
.center{ background-color: yellow; position: absolute; left: 300px; right: 300px; top: 0;}

三、table

1
2
3
4
.container{ display: table; width: 100%; }
.left{ width: 300px; display: table-cell; background-color: red;}
.right{ width: 300px; display: table-cell; background-color: blue; }
.center{ background-color: yellow; display: table-cell;}

四、flex

1
2
3
4
.container{ display: flex; overflow: hidden;}
.left{ width: 300px; background-color: red;}
.right{ width: 300px; background-color: blue;}
.center{ background-color: yellow; flex: 1;}

五、网格grid

1
2
3
4
.container{ display: grid; grid-template-rows: auto; grid-template-columns: 300px auto 300px; }
.left{ background-color: red;}
.right{ background-color: blue; }
.center{ background-color: yellow;}

发表于 | 分类于

前后端通信类

什么是同源策略及限制

同源必须是协议、域名、端口都一样才叫同源
浏览器限制不同源的资源进行交互的
cookie\localStorage\IndexDB无法读取
DOM无法获得
AJAX请求不能发送

前后端如何通信

Ajax // 同源下的通信方式
WebSocket // 不受同源策略的限制 html5新加的
CORS // 支持跨域通信，也支持同源通信

跨域通信的几种方式

如果主域相同使用 document.domain = ‘xxx.com’;
如果是完全不同的两个域

  • JSONP
  • Hash
  • postMessage
  • webSocket
  • CORS

发表于 | 分类于

BFC

BFC (block formatting context 块级格式化上下文)

如何产生BFC

float的值为none
overflow的值为visible
position的值不为relative 和 static
display的值为table-cell,table-caption,inline-block中的任何一种

BFC能用来做什么？

不和浮动元素重叠
清除浮动元素内部浮动
解决上下相邻两个元素重叠

发表于 | 分类于

magnifier

一个简单的图片放大镜效果
这是一个简单放大镜效果，写着玩的！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML>
<html>
<head>
<title>Magnifier</title>
<meta charset="utf-8">
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
.t{ padding-bottom:12px;}
.st{ padding:6px 0 4px;}
.c{ margin:0 0 30px 0;}
pre{ padding:12px 8px; margin-bottom:30px; background-color:#EEECCC;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}

#zoom{ width:375px; height:500px; position:relative; margin:10px 0; border:1px solid #000;}
.magnifier{ width:120px; height:120px; position:absolute; border:1px solid #CCC; display:none; background:url(temp.jpg) no-repeat; border-radius:100%;}
</style>
</head>

<body>
<h4 class="t">放大镜插件</h4>
<p class="st">演示效果：</p>
<div class="c">
<!------------------------------->

<div id="zoom">
	<img src="temp.jpg" width="375" height="500" border="0"> 
</div>

<!------------------------------->
<div id="ddd">
</div>

</div>
<p class="st">使用方法：</p>
<pre>
<code>$("seletor").magnifier()</code>
</pre>

<script src="jquery.js"></script>
<script src="magnifier.js"></script>
<script>
$(function(){
	$("#zoom").magnifier();
});
</script>
</body>
</html>

源码地址

发表于 | 分类于

txtTip

一个文本框信息提示的jQuery插件！
不论你是input text还是 input password 它都可以完美提示。
这个插件写于2013年，现已成为世纪天成平台及各游戏官网通用的标准。

使用说明：
1
2
3
4
5
6
$("input选中器").txtTip({
    tipTxt:"this is a test", // 提示信息	
    objStyle:{defaultColor:"#000",fontSize:"12px",ww:150,hh:30},// input框字体颜色和大小及文本框长度宽度设置
    labelStyle:{focusColorNull:"color",blurColorNull:"color"}, // 获得焦点和失去焦点时的文本信息的颜色设置
    wrapStyle:"float:left;margin-right:9px;text-align:left" // input的样式
})

发表于 | 分类于

page

在这里，page是一个简单的jQuery分页插件，它实现了纯静态的前端分页效果。

使用方法如下：
1
2
3
4
5
6
$("selector").page({
  showLineCount:1, // 每页显示行数
  showMaxPages:7, // 最大显示页数
  bPrevNext:true, // 是否显示“上一页” 和 “下一页”
  bPagination:true // 是否显示页码
});

查看源码