获取当前页面的宽度和高度
var width = document.documentElement.clientWidth||document.body.clientWidth
var height = document.documentElement.clientHeight||document.body.clientHeight Math方法及应用
Math.abs(); // 取绝对值
Math.ceil(); // 向上取整（出现小数点就向上+1） Math.floor(); // 向下取整 Math.round(); // 四舍五入 Math.max(val1,val2,val3...) // 取最大值 Math.min(val1,val2,val3...) // 取最小值 Math.random(); // 获取[0-1)之间的随机小数（不包含1） Math.round(Math.random()*(m-n)+n); // 获取任意两个数之间的随机数 获取4个 0 - 40 之间随机整数
function getRound(n,m) {
n=Number(n); m=Number(m); //n和m其中有一个不是数字的情况 if(isNaN(n)||isNaN(m)){ //如果传递进来的参数不是一个数字，就直接返回一个0-1之间的随机小数 return Math.random(); } //n和m都是数字的情况下 if(n>m){ var temp=n; n=m; m=temp; } var ary=[]; for (var i=0;i<4;i++){ var val=Math.round(Math.random()*(m-n)+n); ary.push(val); } return ary; } console.log(getRound(0,40)); 字符串中大小写字转换
toLowerCase(); // 转化为小写
toUpperCase(); // 转换为大写 获取本地时间
var date = new Date(); // 获取当前电脑时间
// 将时间转换为 xxxx年xx月xx日.. 的格式 var str='2016/11/9 12:39:1'; //2016年11月09日12时39分01秒 //空格分 ['2016/11/9','12:39:01'] //'2016/11/9' 按照/分割 ['2016','11','9'] //'12:39:01' 按照:分割['12','39','01'] function getTime(str) { var ary=str.split(' ');//['2016/11/9','12:39:01'] var ary1=ary[0].split('/');//["2016", "11", "9"] var ary2=ary[1].split(':');//['12','39','01'] return ary1[0]+'年'+zero(ary1[1])+'月'+zero(ary1[2])+'日'+zero(ary2[0])+'时'+zero(ary2[1])+'分'+zero(ary2[2])+'秒'; } console.log(getTime(str)); function zero(num) { num=Number(num);//先将参数转为数字 return num<10?'0'+num:num; } Data应用
var year=time.getFullYear();//设置 Date 对象中的年份（四位数字） var month=time.getMonth();//根据世界时设置 Date 对象中的月份 (0 ~ 11) var day=time.getDate();//从 Date 对象返回一个月中的某一天 (1 ~ 31) var week=time.getDay();//从 Date 对象返回一周中的某一天 (0 ~ 6) 代表周日-周六 var hours=time.getHours();//返回 Date 对象的小时 (0 ~ 23) var minutes=time.getMinutes();//返回 Date 对象的分钟 (0 ~ 59) var seconds=time.getSeconds();//返回 Date 对象的秒数 (0 ~ 59) var mSeconds=time.getMilliseconds();//返回 Date 对象的毫秒(0 ~ 999) 定时器
window.setInterval(fn,1000); // 每1秒执行一次 window.setTimeout(fn,1000); //1秒后执行一次，只执行一次 clerarTimeout(); //关闭定时器 cleraInterval(); //关闭定时器 闭包
函数执行的时候，产生了一个私有作用域，保护里面的私有变量不受外界干扰(外部获取不到也修改不了)，我们将函数执行时候形成的这种保护机制叫做“闭包”。
数组
数组的增加、修改、删除
ary.push(); // 向数组末尾添加一项
ary.pop(); // 删除数组最后一项 (ary.length--) ary.unshift(); // 向数组开头添加 ary.shift(); // 删除数组第一项 splice // 删除、修改、增加 1）删除 - splice(n,m); // 从索引n开始，删除m项 - splice(n); // 从索引n开始，删除到最后 - splice(0)/splice(); // 清空原数组 2）修改 - splice(n,m,x); // 从索引n开始，删除m项，x替换删除部分 3）增加 - splice(n,0,x); // 从索引n开始，一个都不删除，返回空数组，将x增加到索引n的前面 - splice(ary.length,0,'增加项'); // 向数组末尾增加 - splice(ary.length-1)/splice(ary.length-1,1) // 删除末尾项 数组的截取和拼接 -- slice
1) 数组的截取
- slice(n,m); // 从索引n开始找到索引m，(不包括m) - slice(n); // 从索引n开始，找到末尾 - slice(0)/slice(); // 克隆一份数组 2) 数组的拼接 - concat(参数是另一个数组); // 将两个数组拼接到一起 (可拼接多个数组，用逗号分隔) - concat(); // 将原数组克隆一份 将数组转换为字符串
toString();
join('符号'); // 将这个符号替换掉原数组的逗号，将其转换为字符串 eval() // 将js中的字符串变成js表达式执行 数组的排序和排列
reverse();
sort();
sort(function(a,b){ return a-b }) 从指定字符中查找不重复的随机数
var box=document.getElementById('box');
var str='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';//索引0-61 长度62 var tem=null; function getRound(n,m) { n=Number(n);m=Number(m); if(isNaN(n)||isNaN(m)) return Math.random(); if(n>m){ var temp=n; n=m; m=temp; } return Math.round(Math.random()*(m-n)+n) } function change() { var str2=''; for(var i=0;;i++){ var eg=getRound(0,61);//得到了四个索引 var val=str.charAt(eg);//得到字符串中四个索引代表的字符 if(str2.indexOf(val)===-1){//如果这个字符没有在新的字符串中出现过，就添加到新的字符串中 str2+=val; } if(str2.length==4){ break; }//如果这个字符串的长度为4，停止循环 } box.innerHTML=str2; return str2; } change(); box.onclick=change; 继承
原型继承：B.prototype = new A();
- 子类的原型指向父类一个实例，父类的公有和私有方法和属性，都是子类的公有方法
function A(){
this.x = 100; } A.prototype.getX = fnction(){ console.log(this.x); } function B(){ } B.prototype = new A(); B.prototype.constructor = B; var a = new A(); var b = new B(); call继承 C.call(this);
- 在子类的构造函数中，把父类的私有方法继承到子类的私有方法
function C(){
this.x = 100; // this.x = 100 => d.x = 100 => 给d添加一个100私有属性 this.y = 200; } C.prototype.getX = function (){ console.log(this.x); } function D(){ //this => d C.call(this); // 核心代码 // 把C类中的this修改成d } var c = new C(); var d = new D(); 冒充对象继承 this[key] = e[key];
- 在子类的构造函数中遍历父类实例，把父类的公有和私有都变成子类的私有
function E(){
this.x = 100; } E.prototype.getX = function (){ // xxxfff000 console.log(this.x); } function F(){ var e = new E(); for(var key in e){ // key : x, getX //if(e.propertyIsEnumerable) 可枚举 if(e.hasOwnProperty(key)){ // 这个判断可以把getX这个公有属性过滤 } this[key] = e[key]; // 核心代码 // f.x = e.x => f.x = 100; // f.getX = e.getX => f.getX = E.prototype.getX; } } var f = new F(); console.dir(f); // x : 100, getX : funciton console.log(f.getX === E.prototype.getX); // true 组合继承
- 原型 + call,无论是私有还是公有全部继承到。原来是私有的通过call继承仍然是私有，原来是公有的，通过原型继承仍然是公有
function G(){
this.x = 100; } G.prototype.getX = function () { console.log(this.x); } function H(){ G.call(this); } H.prototype = new G(); H.prototype.constructor = H; 中间件继承 K.prototype.proto = J.prototype;
- 让子类原型上的__proto__属性，本来应该指向Object.prototype;现在指向父类原型。父类的公有属性变成子类的公有属性
function J(){
this.x = 100; } J.prototype.getX = function (){ console.log(this.x); } function K(){} K.prototype.__proto__ = J.prototype; // 核心代码 JSONP 跨域实现原理
ajax受浏览器同源策略的影响，不允许进行跨域请求，而script标签的src属性中的链接可以进行跨域访问，利用这个特性，服务端不返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行调用，就实现了跨域。
Jquery实现跨域。
$(document).ready(function(){
$.ajax({
type : "get", async: false, url : "http://www.practice-zhao.com/student.php?id=1", dataType: "jsonp", jsonp:"callback", //请求php的参数名 jsonpCallback: "jsonhandle",//要执行的回调函数 success : function(data) { alert("age:" + data.age + "name:" + data.name); } }); }); cors实现跨域的原理是，把所有的代码放在服务器端做，客户端只需要发送正常的ajax请求就可以了，服务器端根据需要配置不同的头信息。
数组去重
var arr = [1,2,3,4,1,6,3,2]; var obj = {}; for(var i=0;i<arr.length;i++;){ var cur = arr[i]; if(cur == obj[cur]){ arr.splice(i,1); i--; } obj[cur] = cur; } console.log(arr); 如何找出字符串中串中出现最多的字符
var str = "zhaochucichuzuiduodezifu";
var o = {};
for (var i = 0, length = str.length; i < length; i++) { // var char = str[i]; var char = str.charAt(i); if (o[char]) { //char就是对象o的一个属性，o[char]是属性值，o[char]控制出现的次数 o[char]++; //次数加1 } else { o[char] = 1; //若第一次出现，次数记为1 } } console.log(o); //输出的是完整的对象，记录着每一个字符及其出现的次数 //遍历对象，找到出现次数最多的字符和次数 var max = 0; var maxChar = null; for (var key in o) { if (max < o[key]) { max = o[key]; //max始终储存次数最大的那个 maxChar = key; //那么对应的字符就是当前的key } } console.log("最多的字符是" + maxChar); console.log("出现的次数是" + max); </script> window.onload 和 ready() 的区别
- window.onload 是在页面中包括图片的所有元素加载完成后执行的
- ready方法是在DOM结构加载完成后执行的
- onload方法不能同时编写多个，如果有多个，只会执行一个
- ready可以同时编写多个，并且都可以执行
this和$(this)的区别
- this是DOM（javascript）对象,$(this)是Jquery对象，可以使用jquery原型上的所有方法。
- this加上 $()包起来可以转换为jquery对象。 $(this)转DOM对象在小括号后面加上[0]即可。
移动端适配，设置meta标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <!-- //为了在各个设备上都兼容 width=device-width 布局视口的宽度 = 设备的宽度 initial-scale 起始缩放值 user-scalable:no|yes 是否允许用户去缩放 maximum-scale 最大缩放倍数 minimum-scale 最小缩放倍数 --> 如何设置rem
<script>
// 各个设备宽度比例 = 各个设备根元素字体大小的比例 var desW = 640; /*设计稿的宽度*/ var winW = document.documentElement.clientWidth;//设备的宽度 //desW / winW = 100/fs; //fs = winW/desW*100; document.documentElement.style.fontSize = winW/desW*100+"px"; </script> 检测数据类型
typeof 返回一个字符串，不能清晰的判断引用数据类型 instanceof 判断一个实例是否属于这个类，返回值的true/false constructor 直接打印自己是哪个类的实例，这个属性是可以被修改的 object.prototype.toString.call()
call apply bind
call方法：
1、fn通过自己的 __proto__ 属性找到定义在 Function.prototype 上的call方法 2、把fn函数中的this修改成了call的第一个参数 3、最后fn执行 PS：无论哪个函数实例调用call方法都已经执行结束（修改了this之后就立刻执行了） PS：call的第一个参数的确是用来修改this的。从第二个参数开始是传给调用call方法的那个函数实例的 ps:如果是多个call方法连用，那么是最后一个call方法的第一个参数执行，如果这个参数不是函数会报错 apply方法： 相同点：用法和call基本相同。都是用来修改this关键字的 不同点：传给调用apply的那个函数实例参数不同，apply第二个参数是一个数组。是把数组里的每一项当做参数传给调用apply的函数的。 bind方法 ：不兼容低版本ie 用法：都是用来修改this关键字的 1、区别于 call 和 apply ，bind 是返回一个处理好 this 的新函数 2、返回值函数需要通过自来执行。在执行的时候再传参数 res（） 字符串转数组
- split()
数组转字符串
- toString()
- join('')
本地存储
cookie
- 存储大小有限制，一般只能4KB大小
- 有过期时间，一般不超过一个月
- 不稳定，可以用安全卫士清理。不安全，可以被修改，是问号传参
localStorage
- 是H5提供的方法，不谦容IE6-8
- 大小限制，最多只能存5M大小
- 没有过期时间，永久保存到本地，只要我们不手动清除的话
- 和服务器没有半点关系
localStorage.setItem([key],[val]); 设置本地的存储信息
localStorage.getItem([key],[val]); 获取本地的存储信息
localStorage.removeItem([key]); 删除指定key对应的本地的存储信息 localStorage.clear();//清除所有的本地存储信息 localStorage.key[index]//使用localStorage存储的信息是一个Storage集合，会把所有的属性名key放在集合中，这个方法就是通过索引获取指定位置的属性名信息 ajax
//->创建一个AJAX对象
var xhr=new XMLHttpRequest(); //->打开请求的URL,配置一些基本的参数信息 xhr.open('get','',false);//false同步，true异步(默认) //->监听AJAX状态的改变,在不同的状态中做不同的事情 xhr.onreadystatechange=function(){ if(xhr.readyState===4 && /^2\d{2}$/.test(xhr.status)){ var data=xhr.responseText; } }; //->向服务器发送请求 xhr.send(null); 事件冒泡的典型案例 --- 事件委托
事件委托:如果一个容器下的很多元素，都要发生某个行为，我们可以把这个行为委托他们共同的父级来做，然后通过事件源来做不同的区分； 事件触发的顺序：先捕获（从外向里），再冒泡（从里向外）
e = e || window.event;
e.target : e.srcElement 事件源 => 真正触发事件的元素
e.stopPropagation : e.cancelBubble = true; 阻止事件传播 e.preventDefault : e.returnValue = false; 阻止默认行为 前端模块化开发的理解
- 主要考察的是你对OPO（面向对象编程）的理解，即类的封装、继承、多态。
- 所谓模块化开发就是封装细节，提供接口使用，每个模块都是实现某一特定的功能，最基础的就是函数。
- es6 一个模块通过export声明来导出多个，然后在需要用的地方使用import导入。
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
