1、js的类型转换（自动转换和强制转换）
1、转为字符串（string）
toString()方法 ：可将其它类型转为字符串类型，但对null和undefined不适用
2、转字符串快捷方法
其它类型 + ’ ’ 或 ’ ’ + 其它类型：其他类型与一个空字符串相加，此方法对null和undefined也适用
3、转字符串全局方法
String()函数：可将任意类型的值转为字符串，对null和undefined也适用
4、转布尔值全局方法
Boolean()函数：可将其他类型转为布尔值。
5、转布尔值快捷方法
!! 其它类型：!为“取反”之意，因此加两个!!取反两次即得到本身的布尔值。
6、转数字全局方法
Number()函数：可以将任意类型的值转化成数值。
7、转数字全局函数
parseInt()函数：转为整数时最好加上进制；因为浮点数只有十进制，所以转为浮点数时进制可省略。
转为整数：parseInt(字符串，进制)
转为浮点数：parseFloat()
2、类的创建、继承、闭包
类的创建：new一个function
继承：用prototype
闭包：一个函数有权访问另一个函数作用域中的变量，即在一个函数内部创建另一个函数
3、事件绑定的几种方式
在Javascript中，事件绑定一共有3种方式：
① 行内绑定
② 动态绑定
③ 事件监听
行内绑定
<input type=’button’ onclick=’display()’ />
把结构+样式+行为都绑定在同一个标签中，不利于后期维护。
动态绑定
dom对象.事件 = 事件的处理程序（通常是一个匿名函数）
事件监听addEventListener
<button id="btn3">事件监听</button>
//show和print两个方法都可以触发
document.getElementById("btn3").addEventListener("click",show);
document.getElementById("btn3").addEventListener("click",print);
//移除事件监听
document.getElementById("btn3").removeEventListener("click");
语法：
element.addEventListener(event, function, useCapture);
element.removeEventListener(event, function);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
useCapture的默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。对于这类浏览器版本可以使用:
element.attachEvent(event, function);
element.detachEvent(event, function);
事件冒泡和捕获
事件传递有两种方式：冒泡与捕获，定义了元素事件触发的顺序。将 p元素插入到 div中，用户点击 p元素：
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： p元素的点击事件先触发，然后会触发 div 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件。
行内绑定与动态绑定的区别
行内绑定中，其事件处理中的this指向了全局window对象
动态绑定中，其事件处理中的this指向了当前正在操作的dom对象
4、图片轮播
具体思路：
一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index
二、添加定时器，每隔2秒钟index递增一次、调用一次切换图片函数
提示:
1、 index不能一直无限制的递增下去，需做判断
2、调用切换图片函数时需将递增之后的index作为参数传过去
三、定义图片切换函数
提示:
1.遍历所有放数字索引的li，将每个li上的类去掉。
2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。
3. 根据传递过来的index值计算放图片的ul的top值
4. 改变index的值，让其等于传递过来的参数值
注意：放图片的ul的top值=-index*单张图片的高度（所有图片必须等高）
四、鼠标划过整个容器时，图片停止切换，离开继续
提示:
- 鼠标滑过整个容器时清除定时器
- 鼠标离开时继续执行定时器，切换至下一张图片
五、遍历所有放数字的li，且给他们添加索引、鼠标滑过时切换至对应的图片。
鼠标滑过时调用图片切换函数，将滑过的li的索引传过去。
具体代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;
padding:0;
list-style:none;}
.wrap{height:170px;
width:490px;
margin:60px auto;
overflow: hidden;
position: relative;
margin:100px auto;}
.wrap ul{position:absolute;}
.wrap ul li{height:170px;}
.wrap ol{position:absolute;
right:5px;
bottom:10px;}
.wrap ol li{height:20px; width: 20px;
background:#ccc;
border:solid 1px #666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;}
.wrap ol .on{background:#E97305;
color:#fff;}
</style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic').getElementsByTagName("li"),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
// 定义并调用自动播放函数
timer = setInterval(autoPlay, 2000);
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function () {
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function () {
timer = setInterval(autoPlay, 2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
clearInterval(timer);
index = this.innerText - 1;
changePic(index);
};
};
function autoPlay () {
if (++index >= pic.length) index = 0;
changePic(index);
}
// 定义图片切换函数
function changePic (curIndex) {
for (var i = 0; i < pic.length; ++i) {
pic[i].style.display = "none";
list[i].className = "";
}
pic[curIndex].style.display = "block";
list[curIndex].className = "on";
}
};
</script>
</head>
<body>
<div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
转载自：https://www.jb51.net/article/74736.htm
5、对浏览器内核的理解,常见的浏览器内核
渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：取得HTML、XML、图像等，加入CSS等，计算网页的显示方式，输出至显示器或打印机。JS引擎：解析和执行javascript，实现网页的动态效果。
Trident内核：IE,360,搜狗
Gecko内核：火狐
Presto内核：Opera（13年之后，宣布加入谷歌，弃用了Presto）
Webkit内核：Safari,曾经的Chrome
Blink内核：现在Chrome（谷歌还开发了自己的JS引擎——V8）
6、行内元素和块级元素有哪些，区别是什么
每个元素都有display属性和默认的display值，如div默认值为“block”，为“块级”元素；span默认值为“inline”，是“行内”元素。
默认情况下，块级元素独占一行。
行内元素可以和其他行内元素位于同一行，且不能设置其高度和宽度。
空元素，即行内块级元素，可以和其他行内元素位于同一行，同时可以设置其高度和宽度。
（1）行内元素有：a b span img input select strong
（2）块级元素有：div ul ol li dl dt dd h1~h6 p
（3）常见的空元素：br hr img input link meta area
7、表单向服务器提交数据有几种方式？有什么区别？
Get 和 Post
浏览器发送给服务器的HTTP请求分为请求头（header）和请求主体（body）。必须包含头部分，用于指定发送请求的方式、目的地以及其他关键信息，在头数据和主体数据之间用一个空白行来隔开。
区别：
1.get通过地址栏URL传参，可以直接看到get传递的参数，get把请求的数据在URL后用？连接，用&进行参数分割。psot将参数存放在HTTP的包里。
2.get传递的数据长度受到URL字节数的限制；post没有长度限制。
3.get后退不会有影响，post后退会重新进行提交。
4.get请求可以被缓存，post不可以
5.get请求只URL编码，post支持多种编码方式。
6.get请求的记录会留在历史记录中，post不会
7.get只支持ASCII字符，post没有字符类型限制。
8、link 和@import 都可以为页面引入 CSS 文件，其区别是？
1）祖先的差别。link 属于 XHTML 标签，而@import 完全是 CSS 提供的一种方式。 link 标签除了可以加载 CSS 外，还可以定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS 了；
2）加载顺序的差别。当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载。
3）兼容性的差别。@import只有在 IE5 以上的才能识别，而 link 标签无此问题；
4）使用 DOM 控制样式时的差别。当使用 JavaScript 控制 DOM 去改变样式的时候，只能使用 link 标签，因为@import 不是 DOM 可以控制的；
5）@import 可以在 css 中再次引入其它样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
