第一个总结：
1.
Splice 函数是直接对原数组进行操作，会影响原数组
Slice 是从原数组中取一段元素，生成新的数组，原数组不变。
第二个总结：
2. 判断一个对象为数组类型。三种方法。
第三个总结：
3. push 从数组末尾加元素，返回新长度。Pop 删除最后一个元素，并且返回
Unshift 向数组开头添加元素，返回新的长度；shift 删除第一个元素，并且返回。
第四个总结：
4. 截取URL 参数方法
//截取URL 的相关方法
fucntion queryURLtoString(url){
var str = url.split("?");
var items = str.split("&");
var result = [];
var arr = “”;
for(var i=0;i<items.length;i++){
arr = items.split("=");
result[arr[0]] = arr[1];
}
return result;
}
第五个总结：
5. 同源策略 与跨域请求。这次我一定要弄明白，而且记住。
首先是著名的同源策略
源 ： 源（origin）就是协议、域名和端口号。
以上url中的源就是：http://www.company.com:80。若地址里面的协议、域名和端口号均相同则属于同源。
以下是相对于 http://www.a.com/test/index.html 的同源检测
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败，域名不同
• https://www.a.com/test/index.html ----失败，协议不同
• http://www.a.com:8080/test/index.html ----失败，端口号不同
假设 在test.com 先的 test.php 页面。他做出如下事情：
$.ajax({
Type: “get”,
url : ‘http://www.qianduan.com/books.php’
});
这时，页面会报错误，报出跨域请求错误。【Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.】因为你发送的请求不是在你现在的服务器目录下的资源。还有一种常见如下：
原因如下：1.
2.
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
• 不受同源策略限制的：
1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的，，，
• 降域 document.domain
同源策略认为域和子域属于不同的域，如：child1.a.com 与 a.com，child1.a.com 与 child2.a.com，xxx.child1.a.com 与 child1.a.com
两两不同源，可以通过设置 document.damain=‘a.com’，浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信，两个页面必须都设置 documen.damain=‘a.com’。
此方式的特点：
- 只能在父域名与子域名之间使用，且将 xxx.child1.a.com域名设置为a.com后，不能再设置成child1.a.com。
- 存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞。
- 这种方法只适用于 Cookie 和 iframe 窗口。
• 其它类似方法 - HTML5的postMessage方法
- window.name
- location.hash
• JSONP跨域
JSONP和JSON并没有什么关系！
JSONP的原理：（举例：a.com/jsonp.html想得到b.com/main.js中的数据）在a.com的jsonp.html里创建一个回调函数xxx，动态添加
1 function addScriptTag(src) {
2 • var script = document.createElement(‘script’);
3 • script.setAttribute(“type”,“text/javascript”);
4 • script.src = src;
5 • document.body.appendChild(script);
6 • }
7 • window.onload = function () {
8 • addScriptTag(‘http://b.com/main.js?callback=foo’);
9 • } //window.onload是为了让页面加载完成后再执行
10 • function foo(data) {
11 • console.log(data.name+“欢迎您”);
12 • };
//b.com/main.js中的代码
foo({name:“hl”})
这样便实现了跨域的参数传递。
采用jsonp跨域也存在问题：
- 使用这种方法，只要是个网站都可以拿到b.com里的数据，存在安全性问题。需要网站双方商议基础token的身份验证，这里不详述。
- 只能是GET，不能POST。
- 可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。
• CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
刚才的例子中，在b.com里面添加响应头声明允许a.com的访问，代码：
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax获取b.com里的数据了。
注意：此方法IE8以下完全不支持，IE8-10部分支持。详见caniuse-CORS
详细内容请参考：跨域资源共享 CORS 详解
那么现在说说我自己对跨域请求和解决方案了》》》
1.由于浏览器的同源策略，在a.com 下请求 b.com 的资源，是不允许的，处于安全考虑，因为不同源。
2.如果要想实现在a.com 下请求 b.com 的资源，那么就是跨域了。就是垮了域名。
3.但是，要想实现跨域，浏览器对img ,link ,script ，iframe, a ，标签这些是不做限制的。
因此就可以使用这些标签的 src 实现跨域，最经典的就是 使用google 的Jquery CDN 。因此是不是理解了。
那么就动态生成script标签，加载src 资源，但是这个src 有要求，要有毁掉函数。
Src = ‘http://www.test.com/test.ptp?callback=JsonpHandle’ ;
本人对实现跨域的使用。
1.jsonp 看着你们学习的
2. document.domain 和window.name 因为当时在深信服使用 iframe 时需要用到。所以印象深刻。
3.CORS 设置（没有用过）Access-Control-Allow-Origin: http://a.com
其中动态生成script 的步骤如下
Function JsonpHandle (data){
} 这个就是处理函数
var Jsonp = document.createElement(‘script’); //创建标签
Jsonp.type = ‘text/javascript’;
Jsonp.src = “http://www.qianduan.com/Jsonp.php?callback=JsonpHandle”;
//在header 后面添加这个script 标签
document.getElementsByTagName(‘head’)[0].appendChild(Jsonp);
//后台Jsonp.php 的代码
echo $_GET["callback"]."([)'helloworld')"; //数据就带回去了
第六个总结：
6. 事件委托实现一波
主要流程有以下：获取父元素，给父元素注册监听事件，获取到以后在给子元素注册监听。
//实现一波事件委托哒
window.onload = function(){
var content = document.getElementById(‘content’);
content.onclick = function(ev){
var e = ev||window.ev;
var target = e.target||e.srcElement;
target.onclick = function(){
alert(‘test’);
}
}
}
事件委托：利用事件冒泡的原理，自己触发的事件，由他的父元素代替执行。
第七个总结：
CSS 的弹性布局和多列布局
弹性布局：有很多的属性设置，其中最主要的就是display 属性的设置，弹性布局是为了兼容各类屏幕和尺寸大小。
display: -webkit-flex; /* Safari /
display: flex;
多列布局：就是为了防止文本一行显示，移动麻烦，就用 多列布局，
-moz-column-count:3; / Firefox /
-webkit-column-count:3; / Safari and Chrome */
column-count:3;
第八个总结：
Reflow 回流 和 replain 重绘
首先 ： 弄清楚什么是回流和重绘
1.浏览器解析html 源码，构造出DOM 树，
2.浏览器开始对CSS 进行解析，构造渲染树。
3.绘制。
4. 重绘与回流
当第一次打开一个页面时，至少会有一次重绘和回流。之后，如果渲染树发生了变动，那么可能会触发重绘或回流中的一个或二者。
如果渲染树的结点发生了结构性变化，例如宽度、高度或者位置上的变化时，那么会触发Reflow(回流)的逻辑。我们第一次进入一个页面时便会至少触发一次这个逻辑。
如果渲染树结点发生了非结构性变化，例如背景色等的变化时，那么会触发Repaint(重绘)的逻辑。
其次，相关触发机制
触发Repaint或Reflow
我们具体看看哪些操作会导致重绘或回流：
增加、删除、修改DOM结点
使用display:none;的方式隐藏一个结点会导致repaint与reflow，使用visibility:hidden;进行dom隐藏仅仅导致repaint(没有结构性变化，仅仅看不见而已)
移动dom或着该dom进行动画
添加新的样式，或者修改某个样式
用户的一些操作诸如改变浏览器窗口大小，调整字体大小，滚动等等
我们看些例子：
var bstyle = document.body.style; // cache
bstyle.padding = “20px”; // reflow, repaint
bstyle.border = “10px solid red”; // another reflow and a repaint
bstyle.color = “blue”; // repaint only, no dimensions changed
bstyle.backgroundColor = “#fad”; // repaint
bstyle.fontSize = “2em”; // reflow, repaint
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode(‘dude!’));
第三点：如何减少。
1. 压缩replaints 和 reflows ，使用CSS 去尽量减少这些，一次性操作完毕。
2. 对多个dom进行操作时，我们可以使用一种“离线”方式。
3. 不要经常去访问计算后的样式
第九个总结：
9.1 实现空格的截取，
window.onload = function(){
var _rstrsBtn = document.getElementById(‘rstrsBtn’);
var _strs = document.getElementById(‘strs’);
_rstrsBtn.onclick = function (){
_strs.value = _strs.value.replace(/^(\s|u00A0)+|(\s|u00A0)+$/g,"");
}
};
9.2 判断文本框内容是否为空
alert(!_strs.value?true:false);
9.3 禁止输入
9.4 禁止复制粘贴
var _banCopyPaste = document.getElementById(‘banCopyPaste’);
_banCopyPaste.oncopy = function(){
return false;
}
_banCopyPaste.onpaste = function(){
return false;
}
9.4 只运行输入数字
这个方式IE 不兼容。
兼容IE 方案，使用正则表达式
var banNumber = document.getElementById(‘banNumber’);
clearNumber = function(tThis){
var _v= tThis.value;
tThis.value = _v.replace(/\D/g,"");
}
’
9.5 限制输入长度
第二种方式 ，截取的方式。
var limitLength = document.getElementById(“limitLength”), //获取限制对象
clearNonumber = function(tThis){ //清除数字
var _v = tThis.value,
_vLen = _v.length,
dataLength = tThis.getAttribute(“data-length”),//获取长度属性
dataModel = tThis.getAttribute(“data-model”),
subLen = dataLength;
if(_vLen > dataLength) tThis.value = _v.substr(0, subLen);//判断长度
};
limitLength.onfocus = function(){ //获取焦点事件
clearNonumber(this);
}
limitLength.onkeyup = function(){ //键盘事件
clearNonumber(this);
}
limitLength.onblur = function(){ //失去焦点事件
clearNonumber(this);
}
9.5 输入框的长度提示实现
测试1：还可以输入：6个字符
var inputLength = document.getElementById(‘inputLength’);
var remainingLength = document.getElementById(‘remainingLength’);
RemainingLength = function(tThis){
var _v = tThis.value;
var _vlength = _v.length;
var maxLength = tThis.getAttribute(‘data-length’);
remainingLength.innerText = maxLength-_vlength;
if(maxLength-_vlength <= 0)
remainingLength.innerText = 0;
if(_vlength>maxLength){
tThis.value = _v.substr(0,maxLength);
}
}
inputLength.onfocus = function(){
RemainingLength(this);
}
inputLength.onkeyup = function(){
RemainingLength(this);
}
inputLength.onblur = function(){
RemainingLength(this);
}
9.6 类似密码复杂度提示实现一下
var inputLength = document.getElementById(‘inputLength’);
var remainingLength = document.getElementById(‘remainingLength’);
RemainingLength = function(tThis){
var _v = tThis.value;
var _vlength = _v.length;
var maxLength = tThis.getAttribute(‘data-length’);
var low = document.getElementById(‘low’);
var middle = document.getElementById(‘middle’);
var high = document.getElementById(‘high’);
if(_vlength <= 6){
middle.style.display = ‘none’;
high.style.display = ‘none’;
}
if(_vlength > 6&&_vlength <=12){
middle.style.display = ‘inline’;
high.style.display = ‘none’;
low.style.background = ‘yellow’;
}
if(_vlength > 12){
high.style.display = ‘inline’;
// high.style.display = ‘none’;
low.style.background = ‘yellow’;
middle.style.background = ‘yellow’;
}
}
inputLength.onfocus = function(){
RemainingLength(this);
}
inputLength.onkeyup = function(){
RemainingLength(this);
}
inputLength.onblur = function(){
RemainingLength(this);
}
9.7 文本框默认提示信息
9.8 提示密码的相关强度
密码强度实时验证
9.8 实现下拉菜单实时更新，省市联动效果
下拉框联动效果
省级:
市级:
9.9 文件的上传相关操作JavaScript对上传文件相关操作
这里，主要了解了，文件的 files[0]的相关属性。
第十个总结：
第十一个总结：