前端题基础练习总结。。。。

最新推荐文章于 2023-09-26 16:25:47 发布

Bella-520

最新推荐文章于 2023-09-26 16:25:47 发布

阅读量475

点赞数

文章标签：前端 javascript 原型模式

本文链接：https://blog.csdn.net/weixin_47606392/article/details/124636291

版权

这篇博客详细总结了前端基础训练的多个天数的学习内容，包括三栏布局、变量类型判断、BFC概念、this指向、CSS3渐变阴影、Vue双向绑定原理、事件冒泡、DOM操作、AJAX异步请求、移动端适配、模块化和预加载等关键知识点。通过对不同天数的学习任务和问题的阐述，展示了前端开发的多样性和深度，适合初学者巩固基础知识。

摘要由CSDN通过智能技术生成

day01

1、假如高度已知，请写出三栏布局，其中左栏右栏各为300px，中间自适应？

用不同的方法实现

2、变量分为哪几种类型？如何判断？

基本类型: Boolean Number String undefined

引用类型: Object Array Function Null

3、如何区分普通类型变量与引用类型变量？

typeof 如果 object 引用类型数据

4、如何区分对象与数组？

//constructor--构造函数, 属性返回对创建此对象的数组函数的引用。在对象创建或者实例化时候被调用的方法。通常使用该方法来初始化数据成员和所需资源。
<script>
	var a = {name:"tom"};
	var b = [1,2,3];
	function check(obj){
		if(obj.constructor == Array){
		   console.log("array");
	    }else if(obj.constructor== Object){
	    	console.log("object");
	    }
	}
	check(a);
	check(b);
</script>

5、克隆当前数据，当修改其中一个对象的属性，另一个不受影响；

var objA = {name:”tom”,age:18,score:{chinese:80,math:92,English:86}}

(1)

<script>
	var objA = {name:"tom",age:18,score:{chinese:80,math:92,English:86}};
	var objB = {...objA};
	//console.log(objB);
	objB.score.chinese = 85;
	console.log(objA.score.chinese);
</script>

(2)

	var objA = {name:"tom",age:18,score:{chinese:80,math:92,English:86}};
	function clone(objA){
		var objB = {};
		for(k in objA){
			objB[k] = objA[k]
		}
		return objB;
	}
	var objB = clone(objA);
	objB.score.chinese = 95;
	console.log(objA);

(3)

var objA = {name:"tom",age:18,score:{chinese:80,math:92,English:86}};
	function clone(objA){
		var objB = {};
		for(k in objA){
			if(typeof objA[k]=="object"){
			    objB[k]=clone(objA[k]); // 递归调用
			}else{
			    objB[k] = objA[k]	
			}
			
		}
		return objB;
	}
	var objB = clone(objA);
	
	objB.score.chinese = 95;
	console.log(objA);
	console.log(objB);

5、写出一个原型链的小例子;

<script>
	// 构造函数
	function Person(name,age){
		this.name = name;
		this.age = age;
	}
	// 原型
	Person.prototype.say = function(){
		console.log("my name is "+this.name);
	}
	// 学生的构造函数
	function Student(name,age){
		this.name = name;
		this.age = age;
	}
	Student.prototype = new Person();
	
	Student.prototype.study = function(){
		console.log("i can study");
	}
	// 实例化对象
	var tom = new Student("tom",18);
	var rose = new Student("rose",21);
	tom.say();
	rose.say()
</script>

day02

1、函数参数的默认值

<p id="demo1"></p>
<p id="demo2"></p>

<script>
function myFunction(x, y = 10) {
    // 如果不传入参数 y ，则其默认值为 10
    return x + y;
}
// 输出 2
document.getElementById("demo1").innerHTML = myFunction(0, 2) ;
// 输出 15, y 参数的默认值
document.getElementById("demo2").innerHTML = myFunction(5);
</script>

day04

1、什么是 BFC 块级格式化上下文

2、BFC容器有哪些特征？

(1) 边距重叠;

(2) 浮动元素占位（计算容器高度的时候，浮动元素也计算在内）

(3) 浮动元素不会 BFC元素重叠

3、BFC的使用场景

4、如何触发BFC

(1) over-flow:hidden
(2) float 不为none
(3) position 不为static relative

5、圣杯布局

方法①

<style>
    .wrap,.left,.right,.center{ height: 100vh; }
    .left,.right{width:300px;background-color: green;position: absolute;}
    .center{background: yellowgreen;}
    .left{left:0;top:0;}
    .right{right: 0;top:0}
</style>

<body>
	<div class="wrap">
		<div class="left"></div>
		<div class="right"></div>
		<div class="center"></div>
	</div>
</body>

方法②

<style>
	.wrap,.left,.right,.center{height: 100vh; }
	.wrap{display: flex;}
	.left,.right{width:300px;background-color: green;}
	.center{background: yellowgreen;flex-grow: 1;}
</style>
<body>
	<div class="wrap">
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</div>
</body>

day05

1、this指向

1、普通函数中的this – window

var sex = "男";
 var obj = {name:"tom"}
 
 window.my_fn2 = function(){
 	 console.log(this);
 }

 function my_fn(){
 	console.log(this)
 	console.log(this.sex);
 }
 
 my_fn();

2、对象内部的this – 当前对象

var name = "rose";
var age = 21;

var obj = {
	name:"tom",
	age:18,
	say:function(){
		console.log(this.name,this.age)
	}
}

obj.say= function(){
	// this ---> obj
}

3、事件中的this,就是指事件源(事件发生对象) – 事件发生对象

var mark = "hello";
       
var btn = document.getElementById("btn");

btn.onclick = function(){
      console.log(this.getAttribute("mark"));
}

4、ajax中的this – json参数对象

$.ajax({
	type:"get",
	url:"data.json",
	async:true,
	success:function(res){
		console.log(this);
		//console.log(res);
	}
});

5、箭头函数中的 this – 运行环境 window

$.ajax({
	type:"get",
	url:"data.json",
	async:true,
	success:res=>{
		console.log(this);
	}
});

6、setTimeout – window

window.setTimeout(function(){
     console.log(this);
},2000)

7、构造函数内的this – 通过构造函数实例化的对象;

function Person(name,age){
       	   
      this.name = name;
      this.age = age;
      
      // 1  创建空对象 obj = {}; 
      // 2 this 指向这个空对象 
      // 3  空对象赋值
      // 4  返回新创建的这个对象
      
}

Person.prototype.say = function(){
     console.log(this.name);
}

var tom =  new Person("tom",18);
var rose = new Person("rose",21);

tom.say.call(rose);

// call 函数中的方法,call与apply里的this  --  tom.say.call(rose)  改变this指向;*/

day06

1、css3的渐变和阴影

<style type="text/css">
    .pic{ height: 250px; background: url(images/2.jpg) no-repeat center; background-size: 360px;}
    .x-pic{ height: 80px; box-shadow: -1px 1px 27px -3px; margin-bottom: 20px;}
    .box{ height: 80px; background: -webkit-linear-gradient(left,#8989d2,#f58186);}
	</style>
</head>
<body>
	<div class="pic"></div>
	<div class="x-pic"></div>
	<div class="box"></div>
</body>

day07

1、变量分为哪几种类型？如何判断？

2、如何区分普通类型变量与引用类型变量？

1 变量的作用域以函数为界

<script>
    var a = 100;
    function father(){
       var a= 20;
       function son(){
       	   //var a = 10;
           console.log(a);
       }
       son();
    }
    father();
</script>

2 如果当前作用域有变量声明，就不会向上查找;

3 变量的声明可以自动提升，但赋值不会;

var a = 100;
    function run(){
    	 var a;
         console.log(a);
         a=200;
         return a;
    }
    run(); // undefined 
    console.log(a); // 100
    var b=run();    // undefined;
    console.log(b); // 200

3、如何区分对象与数组？

<script>
	var a = {name:"tom"};
	var b = [1,2,3];
	function check(obj){
		if(obj.constructor == Array){
		   console.log("array");
	    }else if(obj.constructor== Object){
	    	console.log("object");
	    }
	}
	check(a);
	check(b);
</script>

4、克隆当前数据，当修改其中一个对象的属性，另一个不受影响；

var objA = {name:”tom”,age:18,score:{chinese:80,math:92,English:86}}

5、写出一个原型链的小例子;

6、原型与原型链

<script>
	// 构造函数
	function Person(name,age){
		this.name = name;
		this.age = age;
	}
	// 原型
	Person.prototype.say = function(){
		console.log("my name is "+this.name);
	}
	// 学生的构造函数
	function Student(name,age){
		this.name = name;
		this.age = age;
	}
	Student.prototype = new Person();
	
	Student.prototype.study = function(){
		console.log("i can study");
	}
	// 实例化对象
	var tom = new Student("tom",18);
	var rose = new Student("rose",21);
	
	tom.say();
	rose.say()
</script>

day08

1、new 关键词实例化对象时主要做了哪些事儿？

<script>
	// 构造函数
	function Person(name,age){
		//var obj = {};
		// 1  创建空对象;
		// 2 this 指向当前空对象;
		// 3  给空对象赋值
		// 4  返回新创建的对象 
		
		this.name = name;
		this.age = age;
	}
	// 实例化对象
	var tom = new Person("tom",18);
	var rose = new Person("rose",21);
	
</script>

2、请描述this有哪些使用场景，不同场景下的指向？

> 标准属性      class  id   title   src  href value  
> 可以使用点语法来获取和设置
> 自定义属性   setAttribute()  getAttribute();
    	
    /*- 1 普通函数中 -- window
    - 2 对象中的this -- 当前对象
    - 3  事件中的this -- 事件发生对象
    - 4  ajax 里的this -- json参数对象
    - 5 箭头函数的this --  运行环境 window
    - 6 setTimeout 里的this -- window
    - 7 构造函数中的this -- 通过构造函数实例化的对象; 
    - 8 call与apply里的this  --  tom.say.call(rose)  改变this指向;*/
    
    
     // 1 普通函数中的this
     
     var sex = "男";
     var obj = {name:"tom"}
     window.my_fn2 = function(){
     	 console.log(this);
     }
     function my_fn(){
     	console.log(this)
     	console.log(this.sex);
     }
     my_fn();
     
    // 2 对象内部的this
    
    var name = "rose";
    var age = 21;
    
    var obj = {
    	name:"tom",
    	age:18,
    	say:function(){
    		console.log(this.name,this.age)
    	}
    }
    
    obj.say= function(){
    	// this ---> obj
    }
    
    // 3 事件中的this,就是指 事件源(事件发生对象)
    
    var mark = "hello";
    
    var btn = document.getElementById("btn");
    
    btn.onclick = function(){
          console.log(this.getAttribute("mark"));
    }
    
    // 4 ajax中的this 
    
    $.ajax({
    	type:"get",
    	url:"data.json",
    	async:true,
    	success:function(res){
    		console.log(this);
    		//console.log(res);
    	}
    });
    
    // 5 箭头函数中的 this
    
    $.ajax({
    	type:"get",
    	url:"data.json",
    	async:true,
    	success:res=>{
    		console.log(this);
    	}
    }); 
    
    
    // 6 setTimeout
    
    window.setTimeout(function(){
         console.log(this);
    },2000)
    
    // 7 构造函数内的this 
    
    function Person(name,age){
          
          this.name = name;
          this.age = age;
          
          // 1  创建空对象 obj = {}; 
          // 2 this 指向这个空对象 
          // 3  空对象赋值
          // 4  返回新创建的这个对象
          
    }
    
    Person.prototype.say = function(){
         console.log(this.name);
    }
    
    var tom =  new Person("tom",18);
    var rose = new Person("rose",21);
    
    tom.say.call(rose);
    
    // call 函数中的方法,

3、以下代码的执行结果

var a=100;

function run(){
     console.log(a);
     var a=200;
     return a;
}


run();

console.log(a);
var b=run();
console.log(b);

4、以下代码的执行结果

    var a = 100;
    function father(){
       //var a= 50;
       function son(){
           //var a = 30;
           console.log(a);
       }
       son();
    }
    
    father();

5、以下代码执行结果

    function fn(){
    
    	var a=100;
    	return function(){
    		 console.log(a);
    	}
    }
    
    var fn2=fn(); 
    
    var a=200;
    
    fn2();

day09

1、创建10个li标签，点击时弹出对应的序号

<body>
	<ul class="list"></ul>
</body>
var oUl = document.querySelector('.list');
		
for(var i=0; i<10;i++){
	(function(i){   //闭包
		var oLi = document.createElement('li');	
		oLi.onclick = function(){
			console.log(i)
		}
		oLi.innerHTML = "哈哈哈";
		oUl.appendChild(oLi);
	})(i)
}

2、闭包的特征与作用

//判断用户是否第一次访问当前网站
function login(){
	//记录登陆用户的用户名
	var arr = [];
	
	return function check(name){
		//判断是否第一次登陆
		if(arr.indexOf(name) == -1){
			arr.push(name);
			console.log("第一次访问")
		}else{
			console.log("您来过了！")
		}
	}
	
}

var is_first = login();

is_first("tom");
is_first("tom");
is_first("哈哈哈");
is_first("哈哈哈");

3、同步与异步的区别？异步的使用场景有哪些？

day10

1、写出以下dom操作的方法

新增节点，获取父节点，获取子节点，获取兄弟节点，删除节点,追加,移动节点

2、什么是事件冒泡和捕获，冒泡和捕获的区别？

3、什么是事件委派？事件委派的原理和优点

// 通用的事件绑定函数
<a href = "a.html"  id="link">弹出信息</a>

function addEvent(elem,type,fn){
	elem.addEventListener(type,fn);
}
var oA = document.getElementById("link");	

addEvent(oA,"click",function(e){
    e.preventDefault(); // 阻止默认行为
    alert("clicked");
});

day11

1、闭包的作用

<ul id="my_ul"></ul>
	<button id="btn" mark="world" title="火星时代">按钮</button>
	<script>
	  // 判断用户是否第一次访问当前网站
	  function login(){
	  	var arr = [];  // 已访问网站的用户名
	  	return function check(name){
	  		if(arr.indexOf(name)==-1){
	  			arr.push(name);
	  			console.log("你第一次访问");
	  		}else{
	  			console.log("您已经访问过了");
	  		}
	  	}
	  }
	  var is_first = login();
	  is_first("tom");  
	  is_first("tom");  
	  is_first("peter");  
	  is_first("peter");  
	</script>

2、DOM遍历

    <div>
    	<h3>this is title</h3>
    	<p>this is paragraph</p>
    </div>
    <button id="btn" mark="world" title="火星时代">按钮</button>
    <script>
     function show(dom){
     	if(dom.childNodes.length>0){
     		for(var i=0;i<dom.childNodes.length;i++){
     			console.log(dom.childNodes[i].nodeType+dom.childNodes[i].nodeName+dom.childNodes[i].nodeValue);
     			show(dom.childNodes[i]);
     		}
     	}
     }
     var doc = document.documentElement;
     show(doc);
        
    </script>

3、AJAX同步异步

<script>
	console.log(100);
	var url = "http://www.yutang.test:80/order/test";
	//var url2 = "http://127.0.0.1:8020/mianshi/data.json";
	// 协议 http
	// 端口号 8020
	// 域名 127.0.0.1
	// demo_17.html  data.json 同源文件
    $.ajax({
        type:"get",
        url:url,
        success:function(res){
        	console.log(res);
        }
    });
	console.log(300); 
	    
	</script>

4、图片加载异步

    <div>
    	<img id="my_img" />
    	<h3>this is title</h3>
    	<p>this is paragraph</p>
    </div>
    <script>
    console.log(100);
    var img= document.getElementById("my_img");
    img.src = "https://www.baidu.com/img/bd_logo1.png";
    img.onload=function(){
        console.log("loaded");
    }
    
    console.log(200);
        
    </script>

day12

常用数组API

<script>
    /*		
	  - forEach 遍历所有元素
	  - every   判断所有元素是否都符合条件
	  - some   判断是否有至少一个元素符合条件
	  - sort   排序
	  - map   对元素重新组装生成新数组
	  - filter  过滤符合条件的数组
	  */
	 var arr = [11,22,35,13,19,28];
	 // foreach 遍历数组
	/*
	arr.forEach(function(item,index){
	 	console.log(index,item);
	 })
	 */
	 /*
	 function check(num){
	 	return num>33;
	 }
	 //var bool = arr.every(check);  // 所有元素都符合条件才是true
	 var bool = arr.some(check);     // 只要有一个符合条件 true
	 console.log(bool);
	 */
	
	/*
	 * 可以对于数组元素进行重新组装
	var newArr = arr.map(function(item){
		return "#"+item+"@";
	})
	console.log(newArr);
	*/
	
	// 过滤数组元素
	var newArr = arr.filter(function(item){
		return item>20
	})
	
	console.log(newArr);
	
	</script>

1、将以下json数据在页面中遍历并显示，并按销量和价格排序

<body>
	<div id="template">
		<div class="item">
			<h3>图书名字</h3>
			<p>价格</p>
			<p>数量</p>
		</div>
	</div>
	
	<div id="wrap">
		
	</div>
	<script>
		
		var arr1 = [11,2,33,55,9,6];
		
        var arr = [ 
				{"name":"基督山伯爵",num:299,"price":155},
				{"name":"这个杀手不太冷",num:120,"price":158},
				{"name":"寂静山庄",num:230,"price":145},
			]
        
        //var arr2 = [3,1,9,18,22,6];
        // 冒泡排序 
        var newArr = arr.sort(function(a,b){
        	return a.num-b.num;
        })
        
        for(var i=0;i<newArr.length;i++){
        	var tpl = $("#template").html();
        	var $tpl = $(tpl);  // 将dom字符串转为jq对象;
        	$tpl.find("h3").html("书名:"+newArr[i].name);
        	$tpl.find("p").eq(0).html("价格："+newArr[i].price);
        	$tpl.find("p").eq(1).html("数量:"+newArr[i].num);
            $tpl.appendTo($("#wrap"))
        }
        
	</script>
		
	</body>

day13

1. 语法

(1) forEach 遍历所有元素

every 判断所有元素是否都符合条件
some 判断是否有至少一个元素符合条件
sort 排序
map 对元素重新组装生成新数组
filter 过滤符合条件的数组
数组常用方法: unshift shift pop push

(2) 截取字符串

str.substring(start,end); 两个参数都为正数，返回值：[start,end)
也就是说返回从start到end-1的
字符

str.slice(start,end); 两个参数可正可负，负值代表从右截取，返回值：[start,end) 也就是说返回从
start到end-1的字

str.charAt(index); 返回子字符串，index为字符串下标，index取值范围[0,str.length-1]

str.charCodeAt(index); 返回子字符串的unicode编码，index取值范围同上

str.split(separator,limit); 参数1指定字符串或正则，参照2指定数组的最大长度

str.replace(rgExp/substr,replaceText) 返回替换后的字符串

arr.join(分隔符) 以,连接

str.match(rgExp); 正则匹配

2、写一个函数，将css属性例如：border-left-color 转换为js属性: borderLeftColor

<script>
			
	var str = "border-bottom-color";  // borderBottomColor
	var str1 = "border-bottom-width";
	// 函数 将css属性转换驼峰命名方式 (js的样式属性)
	
	function cssToCamel(str){
		
		var arr = str.split("-");
		for(var i=1;i<arr.length;i++){
		    // bottom  color --> Bottom Color
			arr[i]=arr[i][0].toUpperCase()+arr[i].slice(1) 
		}
		return arr.join("")	
	}
	
	var newStr = cssToCamel(str1);
	
	console.log(newStr);
	
</script>

day14

1、DOM的基本方法

<div id="wrap">
	<h3>hello</h3>
	<p>world</p>
	<p id="tom">tom</p>
</div>

<script>
	
	var wrap = document.getElementById("wrap");
	
	/*
	var txt = document.createElement("p");
	txt.innerHTML="txt";

	wrap.appendChild(txt);
	
	var tom = document.getElementById("tom");
	wrap.appendChild(tom)
	*/
	
	// 获取父元素
	//var ele = tom.parentElement;
	//var ele = tom.parentNode;
	//console.log(ele);
	
	var c1 = wrap.childNodes;  // 子节点
	var c2 = wrap.children;    // 子元素
	
	//console.log(c1.length,c2.length);
	
	for(var i=0;i<c2.length;i++){
		var dom = c2[i];
		console.log(dom.nodeType,dom.nodeName,dom.nodeValue);
	}
	
</script>

2、dom的基本优化

    var wrap = document.getElementById("wrap");
    			
    var frag = document.createDocumentFragment(); // 创建虚拟dom容器  ,文档片段
    
    for(var i=0; i<20;i++){
    	var oLi = document.createElement("li");
    	oLi.innerHTML = "list item";
    	frag.appendChild(oLi)
    }
    
    wrap.appendChild(frag);

3、写一个函数实现“千分位”形式，即从个位数起，每三位之间加一个逗号，例如，将7654321输出成7,654,321。----(用递归)

<script>
		  	
    var num = 1234567;
  
    function qian(num){
  	
      	 var str = num + ""; // 转换为字符串
      	 
      	 if(str.length>3){
      	    // 1  234  [0,1)  去掉尾部3个数的其余部分
      	 	 var left = str.slice(0,str.length-3);  
      	 	 left = qian(left);  // 递归调用 1,234
      	 	 var right = str.slice(str.length-3);   // [1,..)  尾部3个数
      	 	 num = left +","+ right;
      	 }
      return num;
    }
    
   var res =  qian(num);
   
   console.log(res);
    
</script>

day15

属性的区别：

<div id="box" mark="tom"></div>
		
<script>
  
  var box = document.getElementById("box");
  
  // 1 property 属性 
  box.index = 102;
  box.obj = {name:"rose"}
  
 // console.log(box.obj);
  
  // 2 attribute  属性    标签的自定义属性
  
  //console.log(box.getAttribute("mark"));
  box.setAttribute("mark","rose")
  
  // 3 id  title name src href  标签标准属性
    
   console.log(box.id);
   console.log(box.getAttribute("id"));
   
</script>

用事件委派创建li元素

(1)

<ul id="my_ul">
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

<button id="btn">创建li元素</button>

<script>
  
  var btn = document.getElementById("btn");
  var my_ul = document.getElementById("my_ul");
  
  var aLi = my_ul.children;
  
  for(var i=0;i<aLi.length;i++){
  	  aLi[i].index = i;
  	  aLi[i].onclick = function(){
  	  	 console.log("this is "+this.index);
  	  }
  }
  
  btn.onclick = function(){
  	 var oLi = document.createElement("li");
  	 oLi.innerHTML = "list item";
  	 my_ul.appendChild(oLi);
  }
  
  // 1 新创建的元素没有点击事件;
  // 2 内存中存在大量相同的函数;

(2)

<style>
	#my_ul{
		border: 2px purple solid;
		height: 500px;
	}
	
	#my_ul li{
		border:1px green solid;
	}
</style>
</head>
<body>
		
	<ul id="my_ul">
		<li>list item</li>
		<li>list item</li>
		<li>list item</li>
	</ul>
	
	<button id="btn">创建li元素</button>
	
	<script>
	  
	  var btn = document.getElementById("btn");
	  var my_ul = document.getElementById("my_ul");
	  
	  var aLi = my_ul.children;
	  
	  my_ul.onclick = function(e){
	  	 
	  	 var src = e.target||e.srcElement;
	  	 //console.log(src.nodeName);
	  	 
	  	 if(src.nodeName == "LI"){
	  	 	 console.log("this is li ");
	  	 }
	  	 
	  }
	  
	  btn.onclick = function(){
	  	 var oLi = document.createElement("li");
	  	 oLi.innerHTML = "list item";
	  	 my_ul.appendChild(oLi);
	  }
	  
	  // 1 新创建的元素没有点击事件;
	  // 2 内存中存在大量相同的函数;
	  
	  // 事件委派的优点
	  
	  // 原理：利用冒泡原理，把子元素的事件 让父元素来代理执行
	  
	  // 1 新创建子元素也有事件;
	  // 2 节约系统资源;
	  
	  // 事件源 --》事件发生对象
      
      
	</script>

事件绑定的区别

<div id="wrap">
	    	
   <button id="btn">创建li元素</button>
	
</div>


<script>
  
 // false 冒泡模式  从里向外触发;
 
 // true  
 
 document.addEventListener("click",function(){
 	 console.log("document");
 },true)
 
  var wrap = document.getElementById("wrap");
  wrap.addEventListener("click",function(){
  	  console.log("wrap");
  },true)
 
  btn.addEventListener("click",function(){
  	console.log("btn");
  },true)
  

 
</script>

day16

bom对象，什么是bom啊？这就是哦哈哈哈！

<body>
	    
    <div id="wrap">
	   <p>hello</p>
	   <p>hello</p>
    </div>
	
	
	<script>
		
     // 保存浏览器的信息		
	 var ua = navigator.userAgent;
	 
	 console.log(ua);
	 
	</script>
	
</body>

来聊聊原生AJAX请求,以及需要的步骤！

<script>
			
// 1 创建ajax对象
var xhr= new XMLHttpRequest();

// 2  请求状态发生变化
 xhr.onreadystatechange=function(){
 	console.log(xhr.readyState);
 	if(xhr.readyState == 4 && xhr.status == 200){
         var data=JSON.parse(xhr.responseText);
         //console.log(data);
         
    }
 }	

// 3 设定请求文件;
xhr.open("get","data.json",true);

// 4 发送请求
xhr.send(null);
	    
	    
	   
        
// xhr.readyState  请求状态
/*   
0 - 请求未初始化
1 - 服务器已建立连接
2 - 请求已接收
3 - 请求处理中
4 - 请求已完成,且响应已就绪;

// xhr.status  
200   ok
404   未找到页面*/
	 
</script>

标签跨域 ( 未写完 )


<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css">
<style>
	.row>div{
		border:1px gray solid;
		height: 100px;
	}
</style>

<body>
	    
  <img src="https://www.baidu.com/img/bd_logo1.png">
  <div class="container">
    <div class="row">
    	<div class="col-md-6"></div>
    	<div class="col-md-6"></div>
    </div>
  </div>
  <script>
  	
	  $.ajax({
	     url:"data.json",
	     success:function(res){
	     	console.log(res);
	     }
	  })	
	    	
  	
  </script>

	
</body>

jsonp跨域访问,什么是Jsonp：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        
<script>
	  	
  $.ajax({
  	 dataType:"jsonp",
  	 jsonp:"cbb",
  	 jsonpCallback: 'cb',
     url:"http://www.yutang.test/api/venue/test",
     success:function(res){
     	console.log(res);
     }
  })	
  
  /*
      jsonp 做了哪些事儿?
      
      1 <script src = "http://www.yutang.test/api/venue/test?callback=JQ123456"></scrip>
      
      2 页面中创建了script，同时声明了回调函数，函数名称是随机字符串 JQ123456
      
      functtion JQ123456(data){
      	 console.log(data); 
      }
   * 
   * 
   * */

</script>

封装insertAfter

<body>
	<ul id="myul">
		<li>tom</li>
		<li id="rose">rose</li>
		<li>peter</li>
	</ul>
    
  <script>
  	
  	 var myul = document.getElementById("myul");
  	 var rose = document.getElementById("rose");
  	 
  	 var newLi = document.createElement("li");
  	 newLi.innerHTML = "i an john";
  	 myul.insertBefore(newLi,rose);
  	 
  	 // insertAfter
	
  </script>
  
  

	
</body>

day17

题目一：要求点击任何一个元素，返回它在事件冒泡时所经过的元素,阿里实习生网上测试题目，当初看着学姐做的,如果元素有id，那么打印id, 如果有className，那么打印className,否则打印小写标签名

例如：点击li时，返回：html body #page .content.main .refer ul li

<div id="page">
    <div class="content main">
        <div class="refer">
            <ul>
                <li>1</li>
                <li>2</li>
                ...
            </ul>
         </div>
    </div>
</div>


document.addEventListener('click', function(e) {
   //点击li时，返回: html body #page .content.main .refer ul li
   return getCssSelecter(e.target)
},false)

代码实现：

function getCssSelecter(ele) {
	var arrDom = [];
 
	while(ele){
		var e = ele.id ? '#'+ ele.id 
				: ( ele.className ?  '.' + ele.className.split(' ').join('.') 
				: ele.tagName.toLowerCase() );
 
		arrDom.push( e );
		ele = ele.parentElement;
	}
	console.log(arrDom.reverse())
	return arrDom;
}

题目二：自己封装 hasChildren()方法，不可用children属性在原型上编程

Element.prototype.hasChildren = function () {
	var child = this.childNodes;
	var len = child.length;
	var arr = [];
	for(var i = 0; i < len; i++){
		if(child[i].nodeType == 1){
			arr.push(child[i]);
		}
	}
	return arr;
}

题目三：找第n个兄弟节点,封装函数，返回元素e的第n个兄弟节点，n为正，返回后面的兄弟节点，n为负，返回前面的，n为0，返回自己

<ul id="parent">
   <li>list item</li>
   <li id="son">list item</li>
   <li>list item</li>
   <li>list item</li>
   <li>list item</li>
<ul>

*/


//findSiblings(son,2)

function findSiblings (ele, n) {
	while(ele && n) {
		if(n > 0 && ele.nextElementSibling) {
			n--;
			ele = ele.nextElementSibling;	//注意是要Element，否则会返回text节点即空格
		} 
	}
	return ele;
}

关于VUE知识点：

(1)解决VUE跨越请求以下代码：

工作中若有类似情况，可新建个vue.config.js，然后把代码复制进去，地址对应


module.exports = {

    devServer: {
    
      proxy: 'http://127.0.0.1:8000/'
      
    }
    
}

(2)登陆注册页面在mian.js里的router.js下写，可实现：

// 引入router
import router from './routes.js';

const whiteList = ['/login','/venue','/game','/my'] //免登陆白名单

router.beforeEach((to, from, next)=>{
  if(false) {
    if(to.path === '/login'){
      next({ path:'/' })
    }
    next()
  }else{
    if(whiteList.indexOf(to.path) !==-1){
      next()
    }else{
      next('/login') //否则全部重定向到登陆页
    }
  }
})

day18

写一个原型方法，将页面中模板字符串

{{year}}年{{month}}月{{data.day}}
中的变量替换为 data = {year:2019,month:8,day:10}; 中的数据; 例如 {{year}} 替换为 2019

<body>
		
	<div id="wrap">{{year}}年{{month}}月{{data.day}}</div>
	
	<script>
		
		var wrap = document.getElementById("wrap");
		
		var str = wrap.innerHTML;

		var data = {year:2019,month:8,day:10};

		String.prototype.test=function (wrap){
			
			let str = this+"";
			str = str.replace(/{{year}}/,data.year) 
			str = str.replace(/{{month}}/,data.month) 
			str = str.replace(/{{data.day}}/,data.day)
			wrap.innerHTML = str;
			
		}
		
		str.test(wrap);
       
	</script>
</body>

统计字符串中出现了多少个字符，每个字符出现的次数;

“this is a test string,can you get the result?”

<script>
			
	var str = "this is a test string,can you get the result?";
	
	// {"a":15,"b":16}
	
	var obj = {};
	
	for(var i=0;i<str.length;i++){
		var c = str[i];
		
		if(obj[c]){
			obj[c]++;
		}else{
			obj[c] = 1;
		}
	}
	
	console.log(obj);
   
</script>

康哥的

100里面有多少个6呢？来写个程序算算嘛？

(1)


function statistics(start,end,c){
    let count = 0; //计数器
    循环遍历start到end 开始结束
    for(let i=start;i<=end;i++){
        //当前处理的数
        var left = i;
        while(left>0){
            //获取当前数每一位
            
        }
    }
    
}

day19

1.VUE双向绑定的原理

理论原理: 订阅者、发布者模式

当数据发生改变时执行set 通知watcher，然后再去视图渲染数据

<div id="app">
	<input type="text" id="txt" value="" />
	<p id="show"></p>
</div>

<script type="text/javascript">
	
	var obj = {}
	//defineProperty 接受三个参数
	Object.defineProperty(obj,'txt',{
		//两个方法，获取和设置
		get:function(){
			return obj
		},
		set:function(newValue){
			//设置里获取绑定元素
			//监听回调
			document.getElementById('txt').value = newValue;
			document.getElementById('show').innerHTML = newValue;
		}
	})
	//事件监听键盘事件
	document.addEventListener('keyup', function(ev){
		obj.txt = ev.target.value;
	})
	
	
</script>

2.数组去重

//2.数组去重 没有操作原数组
	var arr = [1,3,29,33,35,33,3,29,18]
	var newArr = [];
	for(var i in arr) {
		//如果arr[i]不存在 就Push到新数组
		if(newArr.indexOf(arr[i]) == -1) {
			newArr.push(arr[i])
		}
	}
	console.log('原数组'+ arr)
	console.log('新数组'+ newArr)
	
	document.write('新数组'+ newArr)

3.关于状态管理

localStorage —比较浪费资源, 若需要用到状态一般VUEX就够用了…

$router 和 $route区别？

day20

1.一列数字规则如下：1 ,1,2,3,5,8,13,21,34 求第30位的数字是多少？

根据数列推测30位数字

<script type="text/javascript">
    
   // 1,1,2,3,5,8,13,21,34
   
      //0,1,...29 
   
   function getResult(val){
   	    if(val==0){
   	    	return 1;
   	    }else{
   	    	return val+getResult(val-1)
   	    }
   }
   
  let res = getResult(29);
  console.log(res);
    
</script>

1+1=2
2+1+1=4......

2.写一个函数，去除字符串前后的空格;

<script type="text/javascript">
    
  String.prototype.trim= function(){
	 return this.replace(/^\s+/,"").replace(/\s+$/,"");
  }

  let str = "     hello world     ";
  let newStr = str.trim();
  console.log("#"+newStr+"#");
    
</script>

3. scoped原理感兴趣百度去哈哈;

4. $router 和 $route区别

一、路由对象和路由实例的区别

(1) $route 路由对象 (2) $router 跳转方法钩子函数

二、Vue.js核心是什么？

(1)数据驱动 (2)组件系统

三、VUE Key的作用

(1) 提高性能，DOM不改变,通过索引值更新

作用：高效更新虚拟DOM

(2) methods 无条件调用执行

(3) computed 从缓存中获取,不会重新计算

(4) this指向Vm实例

四、VUE spa单页面应用

优点：基于MVVM，组件化，轻量、简洁、高效、速度快

缺点：不支持低版本,不利于ＳＥＯ优化，最低ＩＥ９，首页加载时间长，前进后退需要自己设置

VUE

1.this.$nextTick的作用？

异步方法

赶上上一轮视图更新，才会去触发去执行

2.VUE组件中data为什么必须是函数

return 出来的是新对象

例如：var obj = {} return obj

如果直接使用data时，在不同页面引用时，彼此会受到影响。

3. VUE中如何监控键盘事件

键盘事件不生效的解决方案：需要加.native

VUE中直接修改数组无法触发视图更新

解决方案：

(1) Vue.set(原名，索引，改后的值)

(2) Vue.$set

(3) Vue.items.splice(); 去替换

在对象里能够直接修改同步，数组不能

4. Vuex的原理

(1) vue watch 只有发生变化时

(2) watch 监听每个变化，基于每个变量变化执行

(3) computed 开销比较大的操作，发起AJAX请求时

(4) methods 每次调用都会重新执行，不希望有缓存时使用

data中的数据会自动同步到视图

MVVM

model 是数据 data

view 模板视图

vm vm = new Vue() 实例对象

day20

1.请写出描述浮动产生的原因及清除浮动的方式

原因：浮动后元素脱离文档流，当浮动伪元素的高度比外层父级元素的高度高的

时候，外层元素的浮动无法随着浮动元素的高度自适应，(浮动无法对父级元素产

生影响)

清除浮动的方式：

(1) 加入一个div,设置div的clear:both属性

(2) 给父级设置高度

(3) 可以设置一个clearfix清除浮动影响的伪类

2.请实现一个三栏布局：左右宽度固定,宽度为200px，中间宽度自适应

(1) 使用绝对定位法,使左右两边使用absolute定位；其脱离文档流，中间区域会>

自然流动到他们上面。

(2) 浮动，让左右中三个栏自身浮动，为了减少影响，可以把这三个栏外包个DIV

3.请简述常用的能使HTML元素水平居中、垂直居中的解决方案。

(1) 文本：水平：text-align:center; 垂直:line-height的设置

(2) 块元素：可以通过position定位,或者margin值的设置。

day 21

4.请简要描述移动端的项目适配

(1) rem适配，以跟元素字体大小，针对不同机型，rem等于视图页面宽度,把跟元

素的font-size改成布局视口大小

(2) viewport适配，设置缩放比例等

(3) px 适配

5.说出至少4种VUE当中的指令和它的用法？

(1) v-if 判断是否隐藏

(2) v-show 控制的隐藏显示

(3) v-for 进行列表或表格的渲染

(4) v-model 数据的双向绑定

(5) v-html 获取Html标签

(6) v-text 不解释标签

day 22

1.列举三个VUE生命周期的钩子函数，简单说明用法

(1) beforeCreate 初始化之前

(2) create 初始化完成

(3) beforeMount 挂载之前

(4) mounted 挂载完成之后

(5) updade 数据更新之后

(6) destroy 解释所有数据绑定销毁

2. DOM操作-----怎样添加、移除、复制、创建和查找节点

(1) createElement() 创建一个具体元素，可以通过appendChild()方法添加

(2) remoreChild() 移除

(3) replaceChild() 替换

3. 查找有四种方式:

(1) getElementsByTagName() 通过标签名

(2) getElementsByClassName() 通过类名

(3) getElementById() 通过ID

(4) querySelector() 可以通过类名，也可以通过ID

(5) querySelectorAll() 通过类名或者ID查找所有

day 23

1. 事件委托是什么？

定义：把原来加给元素上的事件绑定在父元素上，就是把事件委派给父元素。

比如点击li标签，弹出对应li的内容或索引。

2. 请简要说明一下闭包？

(1) 闭包就是一个函数引用另一个函数的变量，简单来说就是一个函数内部套了一个函数，从作用域上来讲，可以避免对全局变量造成污染！

3. 一个页面上有大量的图片(大型电商网站)，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。[网站优化方面]

(1) 图片懒加载，使滚动到相应位置才加载图片，用于监控滚动的位置，当图片位置出现或即将出现在可视区域时，进行加载。

(2) 图片预加载

(3) 如果图片过大，可以加载特殊编码的图片，加载时先加载压缩的缩略图，可以提高用户体验。

4. Taro效率高，以后的趋势…

https://taro-docs.jd.com/taro/docs/README.html — 官网API

day24

1.如何让CSS只在当前组件中起作用？

答：在style中写入scoped,它的CSS样式就只能作用于当前的组件。

2.keep-alive的作用是什么？

答：次TCP连接中可以持续发送多份数据而不会断开连接。通过使用keep-alive机制，可以减少tcp连接建立次数，也意味着可以减少TIME_WAIT状态连接，以此提高性能和提高httpd服务器的吞吐率。

3.子组件向父组件怎么传值？

答：子组件中emit数据回父组件,父组件中监听组件返回的数据。

3.兄弟之间如何传值，至少说出两种？

day25

1. 什么是模块化？

模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。

让开发者便于维护,同时也让逻辑相同的部分可复用

模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

模块化的过程就是：

1、拆分

将整个系统按功能,格式,加载顺序,继承关系分割为一个一个单独的部分.

注意:拆分的粒度问题,可复用问题,效率问题.如何这些问题处理的不好，就有可能出现不想要的后果。

将功能或特征相似的部分组合在一起,组成一个资源块.
将每个资源块按找需求,功能场景以及目录约束放到固定的地方以供调用.

1.XML 命名空间（XML Namespaces）

2.请描述一下cookie，sessionStorage和localStorage的区别？

sessionStorage和localStorage本地缓存

(1) sessionStorage：仅在浏览器关闭前有效，不会持久保持

(2) localStorage：始终有效，窗口或浏览器关闭也一直保存，用作永久数据

存储大小限制也不同，cookie数据不能超过4k,每次http请求都会携带cookie，cookie只适合保存很小的数据

3.谈谈你对预加载的理解？

(1) 页面加载，对于一个较大的网站，如果没有使用预加载技术，用户界面就会长时间显示一片空白，直到资源加载完成，页面才会显示内容。

解决方法：

(1) 可以通过js预先从服务加载图片资源(动态创建Image，设置src属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的src时就会优先寻找浏览器缓存，提高访问速度。

4.缓存和预加载的区别是什么？

(1) 缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度

(2) 预加载是提前把需要的内容加载完成,提高响应效率

比如图片：提前加载一定数量，当用户访问图片的时候只看前几张，由于是预加载好的，所以速度比较快

5.如何区分静态页面和动态页面？

(1) 最简单的方法就是看后缀了

(2) 动态网页网址中有两个标志性的符号“?”和“&”,用来带参数的,现在几乎爱所有的网页都是动态网页。

6.字符串拼接和模板引擎，项目中会如何操作？7模板引擎会不会利于SEO优化？

(1)简单的数据渲染，拼接字符串

(2)稍微复杂的业务逻辑使用前端模板引擎，过于复杂的页面基本上使用后台渲染的方式, 模板引擎会影响SEO优化.需要关注SEO的页面最好采用后台渲染的方式。

7.前台兼容性问题有哪些？

答：主要是常用浏览的（前端）API差异，渲染差异，等等

8.CDN是啥？

(1) CND服务就是网站加速服务。

(2) 本地加速提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度

day 26

1. 五大浏览器内核

下各常用浏览器所使用的内核。

(1)、IE浏览器内核：Trident内核，也是俗称的IE内核；

(2)、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

(3)、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

(4)、Safari浏览器内核：Webkit内核；

(5)、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

(6)、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

(7)、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

(8)、百度浏览器、世界之窗内核：IE内核；

(9)、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

day 27

1. Bootstrap中最多可以分多少列？lg、md、sm、xs这几个屏幕宽度的界限是多少？

12列

.col-xs- 超小屏幕手机 (<768px)

.col-sm- 小屏幕平板 (≥768px)

.col-md- 中等屏幕桌面显示器 (≥992px)

.col-lg- 大屏幕大桌面显示器 (≥1200px)

2. 请解释GET/POST的区别，以及请求参数放到url里和放到body里面的区别？

Post与Get区别：

GET请求，从后端获取数据，地址栏，容量有限，最大4K。请求的数据会附加在URL上相对于不安全，多个参数用&连接

POST请求存储数据，发送给后端。相对于安全，对大小不敏感。 POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。

区别总结：GET请求的数据会暴露在地址栏中，而POST请求则不会。文件上传只能使用post

3. 请解释一下 JavaScript 的同源策略

同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。

4. 如何解决跨域问题

JSONP：

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入

成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的

资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出J

SON数据并执行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

day 28

1. 谈谈你对webpack的看法

WebPack 是一个模块打包工具，可以使用WebPack管理模块依赖.

webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。

webpack的两大特色：

1.code splitting（可以自动完成）

loader 可以处理各种类型的静态文件，并且支持串联操作

3.webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

2.闭包有三个特性：

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

3. cookie 和session 的区别：

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的

4、性能，考虑到减轻服务器性能方面，应当使用COOKIE。

5、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

所以个人建议：

(1) 将登陆信息等重要信息存放为SESSION

(2) 其他信息如果需要保留，可以放在COOKIE中

4. 简述同步和异步的区别？

(1) 同步是阻塞模式，异步是非阻塞模式。

(2) 同步就指一个进程在执行请求时，该请求需要一段时间才能返回信息，这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

(3) 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率

5. 简单介绍一下promise，他解决了什么问题?

Promise，就是一个对象，用来传递异步操作的消息。有三种状态：

(1) Pending（进行中） (2) Resolved（已完成，又称 Fulfilled） (3) Rejected（已失败）。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

day 29

旧版本浏览器如何兼容HTML5和CSS3？

刷新页面点击事件失效如何解决？

$(document).on(“click”,“#元素id”,function(e){});

在新版本的jquery里，已经不提倡使用live了，用on()比较好。

VUE生命周期及什么时候用哪个

在实例挂载完成，模板中的html渲染到页面之后，可通过mounted进行我们自己定义的事件：

var vm = new Vue({
    data:{
        a:"实例挂载完成"
    }，
    mounted:function(){
        console.log(this.a)
    }
})

生命周期钩子的使用方法就是在VUE实例化的参数中，添加上mounted,beforeMount方法。

哪个生命周期进行数据请求

(1) methods:{} (2) mounted(){}

Bella-520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端题基础练习总结。。。。

day01

1、假如高度已知，请写出三栏布局，其中左栏右栏各为300px，中间自适应？

2、变量分为哪几种类型？如何判断？

3、如何区分普通类型变量与引用类型变量？

4、如何区分对象与数组？

5、克隆当前数据，当修改其中一个对象的属性，另一个不受影响；

5、写出一个原型链的小例子;

day02

1、函数参数的默认值

day04

1、什么是 BFC 块级格式化上下文

2、BFC容器有哪些特征？

3、BFC的使用场景

4、如何触发BFC

5、圣杯布局

day05

1、this指向

day06

1、css3的渐变和阴影

day07

1、变量分为哪几种类型？如何判断？

2、如何区分普通类型变量与引用类型变量？

3、如何区分对象与数组？

4、克隆当前数据，当修改其中一个对象的属性，另一个不受影响；

5、写出一个原型链的小例子;

6、原型与原型链

day08

1、new 关键词实例化对象时主要做了哪些事儿？

2、请描述this有哪些使用场景，不同场景下的指向？

3、以下代码的执行结果

4、以下代码的执行结果

5、以下代码执行结果

day09

1、创建10个li标签，点击时弹出对应的序号

2、闭包的特征与作用

3、同步与异步的区别？异步的使用场景有哪些？

day10

1、写出以下dom操作的方法

2、什么是事件冒泡和捕获，冒泡和捕获的区别？

3、什么是事件委派？事件委派的原理和优点

day11

1、闭包的作用

2、DOM遍历

3、AJAX同步异步

4、图片加载异步

day12

1、将以下json数据在页面中遍历并显示，并按销量和价格排序

day13

1. 语法

(1) forEach 遍历所有元素

(2) 截取字符串

2、写一个函数，将css属性 例如：border-left-color 转换为js属性: borderLeftColor

day14

1、DOM的基本方法

2、dom的基本优化

3、 写一个函数实现“千分位”形式，即从个位数起，每三位之间加一个逗号，例如，将7654321输出成7,654,321。----(用递归)

day15

属性的区别：

用事件委派创建li元素

事件绑定的区别

day16

bom对象，什么是bom啊？这就是哦哈哈哈！

来聊聊原生AJAX请求,以及需要的步骤！

标签跨域 ( 未写完 )

jsonp跨域访问,什么是Jsonp：

封装insertAfter

day17

题目一：要求点击任何一个元素，返回它在事件冒泡时所经过的元素,阿里实习生网上测试题目，当初看着学姐做的,如果元素有id，那么打印id, 如果有className，那么打印className,否则打印小写标签名

题目二：自己封装 hasChildren()方法，不可用children属性在原型上编程

题目三：找第n个兄弟节点,封装函数，返回元素e的第n个兄弟节点，n为正，返回后面的兄弟节点，n为负，返回前面的，n为0，返回自己

关于VUE知识点：

(1)解决VUE跨越请求以下代码：

(2)登陆注册页面在mian.js里的router.js下写，可实现：

day18

写一个原型方法，将页面中模板字符串

统计字符串中出现了多少个字符，每个字符出现的次数;

康哥的

100里面有多少个6呢？来写个程序算算嘛？

day19

2、写一个函数，将css属性例如：border-left-color 转换为js属性: borderLeftColor

3、写一个函数实现“千分位”形式，即从个位数起，每三位之间加一个逗号，例如，将7654321输出成7,654,321。----(用递归)