面试复习

1.css中解决浏览器兼容?

  • IE6不支持两个类选择器直接组合,两个类选择器组合时,IE6只会识别后一个。
  • IE6中可以忽略属性名前面加下划线
  • IE6和IE7忽略属性名前的*
  • IE6-8不支持:root选择器
  • IE8支持属性值后面加”\9”
  • hack原理-层叠,
  • CSS3中的大部分选择器兼容性是IE9+
  • 例如::target,:empty,:nth-child,:nth-of-type,:checked,:disabled无法在IE6-8使用
  • 移动端支持绝大多数CSS3选择器
  • IE8不支持的属性: 
    background-size(IE8及以下使用固定宽度布局) 
    border-radius 
    box-shadow 
    opcity(可以使用filter:alpha(opacity=50)) 
    rgba、hsl、hsla 
    rem、vh、vw、calc(降级为固定宽度)
  • IE9不支持的属性: 
    transition和animation

 

2.css隐藏元素方法?

 opacity:0;,属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。

display,使用none值会让元素从文档中直接删除,”直接消失不见了”

用法:display:none

优点:简单暴力,不需要多余代码。不占空间,对布局没影响。

缺点:元素从文档删除,不利于seo

text-indent,一般是首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值,大到一般我们浏览器无法显示。

用法:text-indent:-999em

优点:利于搜索引擎

缺点:它的作用其实就是把文字提到段落前面,不让我们看见,不影响宽度?

会影响布局。

position,假如说一个元素的距离我们的视窗(电脑显示屏幕)足够大,大到我们浏览器也无法显示出来,那么它也是“消失”的。但是这种做法一般适用于比较写死的东西。

用法:position:absolute; top:-999em或者left:-999em

   或  position:absolute; visibility:hidden;

优点:信手拈来,随意摆放

缺点:用法太死,不能随意修改,比较死板

visibility,只是“看不见”而已,所以元素依然会影响到布局

用法:visibility:hidden

优点:利于SEO优化

缺点:该属性会继承,假如祖先用了visibility:hidden,那么子元素也是直接显示不见,想要子元素显示让用户看见,还要必须再多写visibility:visible

 

3.css 的 sprite优缺点?

CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位。 
其优点在于:

  • 减少网页的http请求,提高性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
  • 减少图片的字节:多张图片合并成1张图片的字节小于多张图片的字节总和;
  • 减少了命名困扰:只需对一张集合的图片命名,不需要对每一个小元素进行命名提高制作效率;
  • 更换风格方便:只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变,维护起来更加方便。

诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点:

  • 图片合成比较麻烦;
  • 背景设置时,需要得到每一个背景单元的精确位置,;
  • 维护合成图片时,最好只是往下加图片,而不要更改已有图片。

 

4.js的typeof返回的那些数据类型?

.返回数据类型

  undefined

  string

  boolean

  number

  symbol(ES6)Symbol,表示独一无二的值,Symbol最大的用途是用来定义对象的唯一属性名。

  Object

  Function

强制类型转换

Number(参数)把任何类型转换成数值类型

parseInt(参数1,参数2)将字符串转换成整数

parseFloat()将字符串转换成浮点数字

string(参数):可以将任何类型转换成字符串

Boolean()可以将任何类型的值转换成布尔值

隐式类型转换

 

5.js冒泡/捕获事件,阻止冒泡和默认行为,以及对继承的了解?

他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下(由外向内)的去触发事件。相反的,事件冒泡是自下而上(由内向外)的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。

<ul>父(外)

      <li>子(内)</i>   同时选定父->子顺序id ,打印出父->子(捕获),打印出子->父(冒泡)

</ul>

常利用的冒泡:绑定在ul上面mouseover   浮在那个li那个li背景变灰色;

阻止冒泡或捕获:w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true;

阻止默认:w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;

二者都阻止:return false;

 

继承:

封装:是面向对象方法的重要原则,就是把对象的属性和行为(数据)结合为一个独立的整体,并尽可能隐藏对象的内部实现细节,就是把不想告诉或者不该告诉别人的东西隐藏起来,把可以告诉别人的公开,别人只能用我提供的功能实现需求,而不知道是如何实现的。增加安全性

       继承:是面向对象最显著的一个特性,继承是从已有的类中派生出新的类称为子类,子类继承父类的数据属性和行为,并能根据自己的需求扩展出新的行为,提高了代码的复用性。

  多态:指允许不同的对象对同一消息做出相应。即同一消息可以根据发送对象的不同而采用多种不同的行为方式(发送消息就是函数调用)。封装和继承几乎都是为多态而准备的,在执行期间判断引用对象的实际类型,根据其实际的类型调用其相应的方法。

    抽象:表示对问题领域进行分析、设计中得出的抽象的概念,是对一系列看上去不同,但是本质上相同的具体概念的抽象,在java中抽象用 abstract 关键字来修饰,用 abstract 修饰类时,此类就不能被实例化,从这里可以看出,抽象类就是为了继承而存在的,如果定义了一个抽象类而不去继承它,那么等于白白创建了这个抽象类,因为你不能用它来做任何事情,用 abstract 修饰方法时,此方法就是抽象方法,抽象方法必须存在于抽象类中,抽象方法没有方法体,对于一个父类来说,如果它的某个方法在父类中实现出来没有任何意义,必须根据子类的实际需求来进行不同的实现,那么就可以将这个方法声明为抽象方法,抽象方法的修饰符必须为 public 或者 protected ,应为用 private,则不能被子类继承,子类便无法实现该方法,缺省情况下默认为 public 。

 

6.闭包的理解?

闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

function f1(){

    var n=999;

    function f2(){
      alert(n); //999
    }

    return f2;

  }

  var result=f1();

  result(); // 999

//函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的,f1不能读取f2内部的变量,f2能读取f1的变量,在f1中return一下f2,f2就是闭包函数

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

  var n=999;

  function f1(){
    alert(n);
  }

  f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。

  function f1(){
    var n=999;
  }

  alert(n); // error

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

  function f1(){
    n=999;
  }

  f1();

  alert(n); // 999

 

7.ajax的工作原理

XMLHttpRequest,AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的,异步请求不会妨碍前方阵地(客户端)的任何操作,浏览器通知x,然后浏览器干其他事了,x给服务器说要干什么事, ,服务器告诉x数据,x给浏览器说数据从服务器那回来了,浏览器渲染更新,然后就完成了,相当于x是中介中间条件!!!

AJAX的优点: 
1.最大的优点就是页面无需刷新,在页面内与服务器通信,非常好的用户体验。 
2.使用异步的方式与服务器通信,不需要中断操作。 
3.可以把以前服务器负担的工作转嫁给客户端,减轻服务器和带宽,可以最大程度减少冗余请求。 

8.jq几种类型选择器?

很多种,大概归纳为9种。
(1)基本
#id 
element 
.class 
* 
selector1,selector2,selectorN 

(2)层次选择器:
ancestor descendant 
parent > child 
prev + next 
prev ~ siblings 

(3)基本过滤器选择器
:first 
:last 
:not 
:even 
:odd 
:eq 
:gt 
:lt 
:header 
:animated 

(4)内容过滤器选择器
:contains 
:empty 
:has 
:parent 

(5)可见性过滤器选择器
:hidden 
:visible 

(6)属性过滤器选择器
[attribute] 
[attribute=value] 
[attribute!=value] 
[attribute^=value] 
[attribute$=value] 
[attribute*=value] 
[attrSel1][attrSel2][attrSelN] 


(7)子元素过滤器选择器
:nth-child 
:first-child 
:last-child 
:only-child 

(8)表单选择器
:input 
:text 
:password 
:radio 
:checkbox 
:submit 
:image 
:reset 
:button 
:file 
:hidden 

(9)表单过滤器选择器
:enabled 
:disabled 
:checked 
:selected

9、jq中$(this)和this关键字有什么不同?

this,表示当前的上下文对象是一个html DOM对象,可以调用html对象所拥有的属性,方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。

无论this身处何处,一定要找到函数运行时(或者说在何处被调用 了)的位置。

10.DOM怎么添加,移除,移动,复制,创建,和查找节点的?用原生命令写

(1)创建新节点

      createDocumentFragment()    //创建一个DOM片段

      createElement()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

(2)添加、移除、替换、插入、复制

      appendChild() 方法还可以添加已经存在的元素,会将元素从原来的位置移到新的位置  

      removeChild() 用于移除节点,接受一个参数,即要移除的节点,返回被移除的节点,注意被移除的节点仍然在文档中,不过文档中已没有其位置了

      replaceChild()用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点

      insertBefore(a,b)是参照节点,意思是a节点会插入b节点的前面。

cloneNode() 方法,用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)

(3)查找

      getElementsByTagName()    //通过标签名称

      getElementsByName()    //通过元素的Name属性的值

      getElementById()    //通过元素Id,唯一性

childNodes 包含文本节点和元素节点的子节点。

children也可以获取子节点,而且兼容各种浏览器。包括IE6-8parentNode:获取父节点

firstChild ; firstElementChild查找第一个子节点。此存在浏览器兼容问题:firstChild是IE兼容,firstElementChild是非IE兼容。

lastChild ; lastElementChild查找最后一个子节点。此存在浏览器兼容问题:lastChild 是IE兼容,lastElementChild是非IE兼容。

nextSibling ; nextElementSibling查找下一个兄弟节点。也是存在兼容性问题

previousSibling ; previousElementSibling查找上一个兄弟节点。也是存在兼容性问题。

 

10.Chrome怎么查看传入后台的post的值?

F12里的network,点XHR里有个form data就是你传的值

11.http状态码400;404;500?

400 (错误请求) 服务器不理解请求的语法

404 (未找到) 服务器找不到请求的网页。

500 (服务器内部错误) 服务器遇到错误,无法完成请求。

1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码。

2xx (成功) 表示成功处理了请求的状态代码。

3xx (重定向) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。

4xx(客户端请求错误) 这些状态代码表示请求可能出错,妨碍了服务器的处理。

5xx(服务器错误) 这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。

12.简述组件,模块的理解,如何实现模块化编程??

组件(Component)是对数据和方法的简单封装,基础组件;

模块:首页模块,商城模块,等功能模块

如何提高网页开发效率,提高代码复用率,降低块与块之间的耦合性是我们需要思考的问题,

  组件化更多关注的UI部分,页面的每个部件,比如头部,内容区,弹出框甚至确认按钮都可以成为一个组件,每个组件有独立的HTML、css、js代码。可以根据需要把它放在页面的任意部位,也可以和其他组件一起形成新的组件。一个页面是各个组件的结合,可以根据需要进行组装。

  模块化侧重的功能的封装,主要是针对Javascript代码,隔离、组织复制的javascript代码,将它封装成一个个具有特定功能的的模块。模块可以通过传递参数的不同修改这个功能的的相关配置,每个模块都是一个单独的作用域,根据需要调用。一个模块的实现可以依赖其它模块。

这里注册组件有两个坑:

第一:注册组件必须在Vue实例化之前

第二:这里对组件在文档中自定义标签不能用驼峰命名法命名,可采取小写且包含一个短杆的方式

模块化编码:就是一个独立的功能作为一个独立的模块来组织代码。

 

13.jsonp原理

ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。

什么是JSONP协议?

JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

 

14.

 

 

 

 

 

阅读更多
换一批

没有更多推荐了,返回首页