常见问题总结

1. 清除浮动的三种方式 (清除浮动的目的: 是为了解决父元素因为子元素浮动而 引起的内部高度为0的问题)

a.  额外增加一个子级添加    clear:both;
b.  父级设置   overflow:hidden;
c.  使用after伪类  父元素 设置伪类样式{ clear: both };

2. 移动端适配

  //  文档的宽度与设备的宽度保持1:1, 文档最大的宽度比例是1.0, 不允许用户点击屏幕放大浏览;
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  //  非必写
  //  iphone 私有 允许全屏模式浏览
  <meta content="yes" name="apple-mobile-web-app-capable">
  //  safair 顶端的 状态条样式
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  //  设备忽略 识别 页面上数字作为 电话号码
  <meta content="telephone=no" name="format-detection">

3. js库插件

  https://cdnjs.com/

4. js的数据类型

a. 基本类型
	string;number;boolean;undefined(未定义变量);null(已定义变量,未赋值);
b. 引用类型
    function;odject;array;

5. 检测js的数据类型

a. typeOf();
b.

6. 页面优化

a. 减少http的请求;
b. 减少内联样式的使用,尽量使用外联样式;
c. 将不需要提前加载的js放在尾部(提前加载的js如:页面上的动画效果等);
d. 压缩图片,css, js;
e. 使用图片懒加载,使用ajax;
f. 图片表明高度和宽度,图片格式选择;

7. js作用域

a. 全局作用域(定义在全局的变量,他的作用域是全局的);
b. 局部作用域(定义在函数内的变量,他的作用域是只在函数内的);
c. 块级作用域(let,const,定义的变量,只在定义的一块有作用;(es6));

8. 变量提升(只提升定义部分,不提升赋值)

在作用域内任意位置定义的变量,都会提升到顶部;
let,和const定义的变量没有变量提升;

9. 原生ajax请求

10. 引入jquery的ajax请求

$.ajax({
	url:'www.baidu.com',  // 后台给的接口地址
	ansylc:'true'/'false',  // 同步(等这个函数执行完在执行后面的),异步(同时进行函数执行)请求
	type:'get'/'post',  // 根据后台接口选择(一般是get,需要加密传输的用到post)
	data:'{
			'字段名':'值'
	      }',  // 根据后台接口上面的要求
	dataType:'JSON', 
	success(res){
		// 请求成功 后执行事件
	},
	fail(error){
	  // 请求失败 后执行事件
	}
});

11. ajax请求的原理(asynchronous JavaScript and xml)

a. 创建对象;
b. 打开请求;
c. 发送请求;
d. 接收相应;
通过XmlHttpRequest对象来向服务器发出异步请求,从服务器获得数据,然后用Javascript来操作DOM而更新页面;
优势:
	页面无刷新,在页面内与服务器通信,给用户的体验非常好
	使用异步方式与服务器通信,不需要打断用户操作,具有更加迅速的响应能力
	可以减少服务器的负担,利用客户端闲置能力来处理任务

12. 事件委托/事件委派(适用于动态添加的元素)

// ios上事件委托失效(ios上事件委托不能绑定在document和ios上,应该绑定在它的其它父级元素上)
// ios  $("父元素").on("click","子元素“,function(){});
$(document/'body').on('events',function(){});

13. js的闭包 (能够读取其他函数内部变量的函数,并引用该变量)

只有(父)函数内部的(子)函数才能读取(父)函数内部定义的变量,因此(子)函数则被成为闭包;
闭包特点:
	a. 延长函数内部变量的生命周期;
	b. 函数内部嵌套函数;
	c. 参数和变量不会回收;
	d. 私有变量不能被销毁,容易造成内存泄漏(使用变量后 手动赋值为 null);
	e. 涉及跨域,导致性能缺失,(将变量存成局部变量,减轻执行速度的影响);

14. 前端跨域问题

跨域:
	指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
	同源:是指,域名,协议,端口均相同,localhost和127.0.0.1虽然都指向本机,但也属于跨域。
a. jsonp;
	与josn的区别:josn返回的是 一串数据;josnp返回的是 脚本代码(包含一个函数调用);
	josnp只能发送get请求(类似script的src触发对指定地址的请求,所以不支持post);
b. cors;
	后端修改请求头
	header(‘Access-Control-Allow-Origin:*’);允许访问的网址
	header(‘Access-Control-Allow-Method:POST,GET’);允许访问的方式
c. window.name;
d. postMessage;

15. this指向问题

a. 函数中 谁调用 this就指谁;
b. 事件函数中,this指代绑定事件的源元素;
c. 全局范围内的this指代window;

16. js的判断

a. if(){}else{};
b. switch(){
	case " ",
	// 满足条件的 执行方法
	break;
	...
	case " ",
	break;
};
c. 三目运算

17. return;break;contuine

a. return;
	只用在函数中,条件满足 执行到这句 直接结束函数体
	1.	if 后面 return
	eg:
		if(this.index==now) return
		now = this.index
				等于
		if(this.index==now){
		
		}else{
			now = this.index
		}
b. break;
	跳出循环,条件满足 跳出 该循环
c. contuine;
	跳出满足条件的循环,继续执行下次循环

18. 短路运算符 || (或); &&(与);!(非)

a. 对于布尔类型的值进行判断
	||  只要有一个是 true 结果都是 true;
	&&  只有都是true 才返回true;

19. 设置背景透明

background-color:transparent;

20. 获取某个标签的属性 $(“input[name=‘你的命名’]”);

21. json字符串的转化

JSON.parse();  //  json字符串转对象;
JSON.strifity(); // 字符串转json;

22. 对前端的理解

前端是建立在以产品为核心,用户体验为基础的一门技术;前端注重视觉效果,后端着重功能实现;前端是整个项目的桥梁,沟通产品、
后台、和设计。整个项目中不仅需要对自己技术肯定,更需要了解业务,才能更有效率的开发和维护产品。

23. 超出显示省略号

text-overflow: ellipsis;

24. 函数声明>变量声明

25. 完整的http请求

a. 进行DNS域名解析;
b. 发起TCP的三次握手;
c. 建立TCP连接后发起HTTP请求;
d. 服务器响应HTTP请求,浏览器获得HTML代码;
e. 浏览器解析HTTP代码,请求CSS,JS,图片等资源;
f. 浏览器对页面进行渲染呈现给客户;

26. link 和 @import 的区别

a. link属于xhtml样式;@import是css提供的方式;
b. link会在页面加载的时候加载,@import则会在页面加载完成之后在进行加载,所以网速慢的时候 会看到@import加载的页面开始没有样式
c. @import加载的样式不能被dom控制,即不能使用js修改样式;

27. css选择器

类型选择器,id选择器,class选择器,伪类选择器,通配符(*),群组选择器(多个样式名以,隔开),伪对象选择器,
包含选择器(父元素下面的子元素 以 空格 隔开);
一个  :是 伪类选择器,两个  :: 是 伪对象选择器;
“+” 相邻的同级选择器,不能选中被隔开的元素;
“~” 同级选择器,能选中隔开的元素;
“>” 父元素下的子元素选择器;

28. 盒子模型

指的是 css定义的 任何元素都可以像 盒子一样 有 边框,内外间距,内容;

29.js遍历

a. for , for in , for of;

30. table的操作(索引以0开始)

a. 奇偶行的选择:
	odd(偶数行);
	even(奇数行);
b. 删除第二行:
	$("#table tr:gt(0):eq(1)").remove();
c. 删除第二列:
	$("#table tr th:eq(1)").remove();// 先删除表头
	$("#table tr td:nth-child(2)").remove();
d. 删除其它行,比如第二行之外的所有行:
	$("#table tr:gt(0):not(:eq(1))").remove();
e. 删除其它列,比如第二列之外的所有列:
	$("#table tr th:eq(1)").remove();//先删除表头 
	$("#table tr td:not(:nth-child(2))").remove();
f. 隐藏第二行:
	$("#table tr:nth-child(2)").hide();
	$("#table tr:gt(0):eq(1)").hide();
g. 隐藏第二列:
	$("#table tr td:nth-child(2)").hide();
	$("#table tr th:eq(1)").hide();
h. 在表格最后插入新行:
	var newRow="<tr><td>插入新行</td></tr>";
	$("#table tr:last").after(newRow);
i. 在表格第二行插入新行:
	$("#table tr:nth-child(2)").after(newRow);
	$("#table tr:gt(0):eq(1)").after(newRow);
j. 获取单元格值,二行三列:
	$("#table tr:gt(0):eg(1) td:eg(2)").text();
	$("#table tr:nth-chilid(2) td:nth-child(3)").text();
k. 获取第二列所有的值:
	var value=“”;
	$("#table tr td:nth-child(2)").each(function(){
		value=$(this).text();
	});
l. 合并单元格,二行第二第三单元格:
	$("#table tr:gt(0):eq(1) td:eq(1)").attr("colspan",2);
	$("#table tr:gt(0).eq(1) td:eq(2)").remove();
	第二列 第二第三单元格:
	$("#table tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 2);
	$("#table tr:gt(0):eq(2) td:eq(1)").remove();
i. 为每个单元格添加点击事件:
	$(document).ready(function(){
		var seg=$(this).parent().find("td").index($(this));
		alert("第"+seg+"行"+“第”+(seg+1)+"列");
	}); 

31. window.onload和$(function(){})的区别

window.onload: 必须等到页面内所有元素(包括图片、JS和DOM)加载完后才会执行,且只能保存对一个函数的引用;
$(function(){ }):是在DOM加载完后就会执行,要比window.onload先执行,却可以一个或者多个函数引用;

32. div 水平垂直居中 的 方法

a. display:flex;
b. 使用calc() 计算;
c. 定位;
	未知当前元素的宽高:
		position:absolute;top:50%;left:50%;
		transform:translate(-50%,-50%);
	已知当前元素宽高:
		position:absolute;top:50%;left:50%;
		margin-top:高度的一半的负值;
		margin-left:宽度的一半的负值;
	第三种:
		position:absolute;top:0;left:0;right:0;bottom:0;
		margin:auto;

33. 箭头函数 和 普通函数

箭头函数:
var fun = () => alert("Hi!");			 //没有参数的话括号不能省略
var fun = (a,b) => a;	         	 	//有多个参数的情况下括号也不能省略
var fun = a => a;						  //只有一个参数的话括号可以省略
var fun = a => {
	a = a + 1;							//有多条语句的情况下,大括号{}不能省略,并且返回值前面需要写return
	return a;
}	       						 	
var fun = a => alert(a);		    	//只有一条语句的情况下,大括号可以省略
var fun = a => a;						//只有一条语句,且这条语句是返回值的语句,这种情况下return可以省略
// 等同于
var fun = function (a) {
  return a;
};

34.vue的生命周期

a.beforeCreat:(创造前)
	数据观测和初始事件未开始;
b.created:(创造后)
	完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来;
c.beforeMount:(载入前)
		在挂载开始之前被调用,相关的render函数首次被调用,实例已完成以下的配置:编译模板,把data里面的数据和模板生成html;
	注意:此时 还没有挂载html到页面上;
d.mounted:(载入后)
		在el被新创建的vm.$el替换,并挂载到实例上去之后调用,实例已完成一下配置:用上面编译好的html内容替换el属性指向的
	dom对象,完成模板中的html渲染到html页面中,此过程进行ajax交互;
e.beforeUpdate:(更新前)
		在数据更新前调用,发生在虚拟dom重新渲染和打补丁之前,可以在该钩子中进一步更改状态,不会触发附加的渲染过程;
f.updated:(更新后)
		由于数据更改导致的虚拟dom重新渲染和打补丁之后调用,调用时,组件dom已更新,所以可执行依赖于dom的操作。
	【应该避免在此期间更改状态,可能会导致更新无限循环,该钩子在服务器渲染期间不被调用】;
h.beforeDestroy:(销毁前)
		在实例销毁之前调用,实例仍然可用;
g.destroyed:(销毁后)
		在实例销毁之后调用,调用后所有的事件监听器会被移除,所有的子实例也会被销毁。【该钩子在服务器渲染期间不被调用】;

35.文本换行

word-wrap:break-word; // 自动换行
white-space:nowrap; // 强制不换行
word-break:break-all; // 强制英文单词换行
text-overflow:ellipsis;overflow:hidden; // 超出省略号

36. vue环境搭建

a. 下载 node.js:
	vue的运行依赖与node的npm来运行;
b. 安装好之后,win+r  打开 输入 node - v,查看node安装好了没有:
	安装好了之后,使用淘宝镜像 cnpm(速度比较快): $ npm install -g cnpm --registry=https://registry.npm.taobao.org;
c. 搭建全局脚手架:cnpm install --global vue-cli;在输入vue 查看是否安装成功;
d.

37. z-index 无效的原因

a. 父级元素没有设置 position:absoliute/fixed;
b. 父级元素position:relative;
c. 拥有float属性;

38. 滚动加载

//滚动条到顶部的垂直高度:   $(document).scrollTop());
//页面的文档高度: $(document).height()); 
//浏览器的高度: $(window).height());
($(this).scrollTop() + $(window).height()) >= $(document).height() // 实现滚动加载的内容,解决多次加载 添加 标识符;

39. 浅拷贝(在拷贝的时候拷贝的是对象的引用,当原对象发生变化的时候,拷贝对象也跟着变化)

es6 (...运算符 :取出参数对象中的所有可遍历属性,拷贝到当前对象之中)
... == Object.assign( {}, 源对象 ) 【第一个参数 为 目标对象, 第二个参数为 源对象】

let ex = { a: 1, b: 2 };

let nex  = { ...bar }; // { a: 1, b: 2 }
<相当于>
let nex = Object.assign( {}, ex )
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值