目录
1、$(document).ready和window.onload的区别
1、$(document).ready和window.onload的区别
前者是DOM树加载完毕就执行，不必等待页面中图片或其他外部文件都加载完毕，并且可以写多个ready
后者是页面所有元素都加载完毕，包括图片等所有元素，并且只能执行一次
要获取DOM绑定的属性，则使用后者，因为window还没有生效；Jquery中也有load方法，会在元素的onload事件中绑定一个处理函数，如果处理函数给window，则会在所有内容加载完毕之后触发，如果处理函数绑定在元素上，则在元素内容加载完毕之后触发。
2、form表单当前页面无刷新提交
Ajax最大的特点就是可以不刷新页面而实现数据的通信及更改页面信息。那么用AJAX进行后台通信传递字符串还是可以的，遇到上传文件该怎么办呢？基于安全考虑，JS是不能直接进行文件操作的，只好用原始的from来提交文件上传了。这样一来，用form不就要刷新页面了吗？其实也不是。
给我们的from加一个target属性，并且将这个属性的值设置为隐藏的iframe的ID，这样一来，刷新的页面是我们隐藏的iframe，我们的页面就不会刷新了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AjaxUpload</title>
</head>
<body onLoad="javascript:alert('onload')" onUnload="javascript:alert('onunload')">
<form name="AjaxUpload" method="post" action="upload.jsp" target="hidden_frame">
<input type="submit" name="Submit" value="提交">
</form>
<iframe name='hidden_frame' id="hidden_frame" style="display:none"></iframe>
</body>
</html>3、setTimeout和setInterval的区别
setTimeout只在指定时间后执行一次；setInterval以指定时间为周期循环执行
两种方法根据不同的场景和业务需求择而取之，
一般情况下setTimeout用于延迟执行某方法或功能，
setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步
模拟 setInterval()：将 setTimeout() 包含在一个执行函数A中，而setTimeout() 自己的code执行函数又是A，然后在函数A外将函数A执行一次，即达到了循环执行的目的
var intervalNum = 0;
function testsetInterval() {
var date = new Date();
console.log(date.getSeconds());
console.log("setInterval", intervalNum++);
}
function recursive() {
testsetInterval();
setTimeout(function () {
recursive() //递归，每隔4秒调用一次recursive()
}, 4000)
}
function testFuntion() {
recursive(); //在方法recursive外，调用一次recursive,以启动循环调用！
}模拟 setTimeout()：用 setInterval() 模拟 setTimeout() 很简单，在 setInterval() 执行一次后，立刻关闭窗口(当然这是耍无赖)或者执行 clearInterval() 方法(这个靠谱点)。clearInterval() 需要在 setInterval()执行code方法内或其他地方执行，不能紧接着 setInterval() 后面执行，那样setInterval() 还没等到执行，就已经被干掉了。
var intervalNum = 0, clearId = 0;
function testsetInterval(){
var date = new Date();
console.log(date.getSeconds());
console.log("setInterval", intervalNum++);
clearInterval(clearId); //也可以在此执行
}
function testFuntion() {
clearId = setInterval(function () {
testsetInterval(); //每隔4秒调用testsetInterval()
// clearInterval(clearId); //可以在此执行
},4000);
}4、重排及重绘，及何时进行重排
- 添加或删除可见的DOM元素。
- 元素的位置、尺寸（内外边距、边框厚度、宽高等属性）改变
- 内容改变（文本改变或图片被另一个不同尺寸的图片替代）
- 页面渲染器初始化
- 浏览器窗口尺寸改变。
"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。
js中一些方法会导致重新获取布局信息,刷新渲染队列。
- offsetTop，offsetLeft，offsetWidth，offsetHeight
- scrollTop，scrollLeft，scrollWidth，scrollHeight
- clientTop，clientLeft，clientWidth，clientHeight
- getComputedStyle(currentStyle in IE)
最小化重绘和重排 （合并）
批量修改DOM
当需要对DOM元素进行一系列操作，可以通过以下步骤来减少重绘和重排的次数：
1、使元素脱离文档流（重排）
2、对应用多重改变
3、把元素带回文档（重排）
有三种基本方法可以使DOM脱离文档流：
1、隐藏元素，应用修改，重新显示
2、使用文档片段在当前DOM之外构建一个子树，再把它拷贝回文档（推荐）
3、将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。
5、伪元素和伪类
伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容
-
伪类
Selector Meaning CSS :active 选择正在被激活的元素 1 :hover 选择被鼠标悬浮着元素 1 :link 选择未被访问的元素 1 :visited 选择已被访问的元素 1 :first-child 选择满足是其父元素的第一个子元素的元素 2 :lang 选择带有指定 lang 属性的元素 2 :focus 选择拥有键盘输入焦点的元素 2 :enable 选择每个已启动的元素 3 :disable 选择每个已禁止的元素 3 :checked 选择每个被选中的元素 3 :target 选择当前的锚点元素 3 :first-of-type 选择满足是其父元素的第一个某类型子元素的元素 3 :last-of-type 选择满足是其父元素的最后一个某类型子元素的元素 3 :only-of-type 选择满足是其父元素的唯一一个某类型子元素的元素 3 :nth-of-type(n) 选择满足是其父元素的第n个某类型子元素的元素 3 :nth-last-of-type(n) 选择满足是其父元素的倒数第n个某类型的元素 3 :only-child 选择满足是其父元素的唯一一个子元素的元素 3 :last-child 选择满足是其父元素的最后一个元素的元素 3 :nth-child(n) 选择满足是其父元素的第n个子元素的元素 3 :nth-last-child(n) 选择满足是其父元素的倒数第n个子元素的元素 3 :empty 选择满足没有子元素的元素 3 :in-range 选择满足值在指定范围内的元素 3 :out-of-range 选择值不在指定范围内的元素 3 :invalid 选择满足值为无效值的元素 3 :valid 选择满足值为有效值的元素 3 :not(selector) 选择不满足selector的元素 3 :optional 选择为可选项的表单元素，即没有“required”属性 3 :read-only 选择有"readonly"的表单元素 3 :read-write 选择没有"readonly"的表单元素 3 :root 选择根元素 3
注意：p:first-child表示选择的元素既要是p标签，同时要是其父元素的第一个子元素，不要错误认为是表示p元素的第一个子元素；同理，p:first-of-type表示选择的元素要是p标签，同时要是其父元素的第一个p标签元素；其他类似的伪类含义相似。
-
伪元素
Selector Meaning CSS ::first-letter 选择指定元素的第一个单词 1 ::first-line 选择指定元素的第一行 1 ::after 在指定元素的内容前面插入内容 2 ::before 在指定元素的内容后面插入内容 2 ::selection 选择指定元素中被用户选中的内容 3