JOB：趣店前端面试

朱雀 2022-06-08 01:36 160阅读 0赞

**1、个人介绍（1分钟）**

**2、（Q1）在input标签中，设置出入20个字符。**

设置maxlength=”\*\*\*”即可

**（Q2）textarea.限制输入20个字符**

1）maxlength：最大长度

onchange：在域的内容改变时发生触动。

onkeydown：在用户按下一个键盘按键时发生

onkeyup：键盘按键被松开时发生。如果省略了，原想预计20的情况下，会变成21，并且最后一个字符是最后敲进去的。

substring() 方法：用于提取字符串中介于两个指定下标之间的字符。

2）onpropertychange(只在ie有效)

<textarea  rows="3" onpropertychange = "if(this.value.length>20) value = value.substring(0,20)"></textarea>

3）调用js函数onkeyup/onkeydown/onPast

<textarea id="text2" type="text" name="text" maxlength="5" οnkeydοwn="changLenth()" οnkeyup="changLenth()" onpast = "changLenth()"></textarea>
    
    <script type="text/javascript">
    	function changLenth(){
    		var value = document.getElementById("text2").value;
    		if(value.length>5){
    			value = value.substring(0,5);
    		}
    	}

**3、css3的新特性**

// CSS3有哪些新特性：
    //      新增各种CSS选择器  （: not(.input)：所有 class 不是“input”的节点）
    //      圆角           （border-radius:8px）
    //      多列布局        （multi-column layout）
    //      阴影和反射        （Shadow\Reflect）
    //      文字特效      （text-shadow、）
    //      文字渲染      （Text-decoration）
    //      线性渐变      （gradient）
    //      旋转          （transform）
    //      增加了旋转,缩放,定位,倾斜,动画，多背景
    //      transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation

**1）.CSS3的选择器**

1）E:last-child 匹配父元素的最后一个子元素E。  
2）E:nth-child(n)匹配父元素的第n个子元素E。  
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。  
4）tbody: nth-child(even), nth-child(odd)：此处他们分别代表了表格（tbody）下面的偶数行和奇数行

**2）. @Font-face 特性**

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {   
     font-family: BorderWeb;   
     src:url(BORDERW0.eot);   
     }   
     @font-face {   
     font-family: Runic;   
     src:url(RUNICMT0.eot);   
     }   
     .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }   
     .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

3）.边框： 圆角、阴影、图片

<div class="div">
    	<p><font>你好，我是字母</font></p>
    </div>
    <style type="text/css">
    	.div{
    			border:200px solid black;//边框
    			border-radius: 25px;//圆角
    			box-shadow: 10px 10px 5px #888888;//阴影和其颜色
    			border-image: url(C:/Users/xyt/Pictures/图片/coulde.jpg) 300 300 round ;//设置边框的图片（不能与border-radius同时出现）
    		}
    </style>

![Image 1][]

**4）CSS3 的渐变效果**

background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
    			background:-webkit-linear-gradient(left,#ace,#f96);

**5）多列布局 （multi-column layout）**

![Image 1][]

**6）、CSS3制作特效**

**（1) Transition 对象变换时的过渡效果**

*  transition-property 对象参与过渡的属性
 *  transition-duration 过渡的持续时间
 *  transition-timing-function 过渡的类型
 *  transition-delay 延迟过渡的时间

**(2)** **Transforms 2D转换效果**

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

(3) Animation动画特效

[参考链接][Link 1]

4、js里面的类型

数字、字符串、布尔、Null、Undefined & 对象（Object 、Array 、Function 、Data等）。

基本数据类型：是简单的存值。

![2012062912181127.jpg][]

引用数据类型：的值保存在内存中的对象，js不允许直接访问内存的位置，实际上是操作对象的引用。

![2012062914380085.jpg][]

5、基本类型和复杂类型（对象）有什么区别

**a 声明变量时不同的内存分配：**

1）原始值：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。

2）引用值：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存地址。

**　　b 不同的内存分配机制也带来了不同的访问机制**

1）在javascript中是不允许直接访问保存在堆内存中的对象的，所以在访问一个对象时，

首先得到的是这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，这就是传说中的 按引用访问。

2）而原始类型的值则是可以直接访问到的。

**　　c 复制变量时的不同**

1）原始值：在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量， 此后这两个变量是完全独立的，他们只是拥有相同的value而已。

2）引用值：在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量，

也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。

（这里要理解的一点就是，复制对象时并不会在堆内存中新生成一个一模一样的对象，只是多了一个保存指向这个对象指针的变量罢了）。 **多了一个指针**

**　d 参数传递的不同（把实参复制给形参的过程）**

首先我们应该明确一点：ECMAScript中所有函数的参数都 是按值来传递的。

但是为什么涉及到原始类型与引用类型的值时仍然有区别呢？还不就是因为内存分配时的差别。

1）原始值：只是把变量里的值传递给参数，之后参数和这个变量互不影响。

2）引用值：对象变量它里面的值是这个对象在堆内存中的 **内存地址**，这一点你要时刻铭记在心！

**6、什么是闭包，什么时候用到？**

闭包就是能够读取其他函数内部变量的函数。函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。（闭包只有在**被调用时才执行操作**）  
闭包的特性：  
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；  
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在系统中，闭包中的数据依然存在，从而实现对数据的持久使用。

闭包的实际例子（回答输出什么）：

</script>

回答最后输出什么？

输出3

**7、什么是事件冒泡**

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

**8、什么是事件代理**

当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

9、http协议有哪些  
![Image 1][]  
  
请求报文：

![735119-20161222192403854-1215865074.png][]

响应报文

![735119-20161222194943854-529251231.png][]

10、header头常用的字段

四种不同类型的头标：  
1.通用头标：即可用于请求，也可用于响应，是作为一个整体而不是特定资源与事务相关联。  
2.请求头标：允许客户端传递关于自身的信息和希望的响应形式。  
3.响应头标：服务器和于传递自身信息的响应。  
4.实体头标：定义被传送资源的信息。即可用于请求，也可用于响应。  
头标格式：<name>:<value><CRLF>

Cache-Control头域 ：Cache -Control指定请求和响应遵循的缓存机制。

Date头域 ：Date头域表示消息发送的时间，

11、跨域问题，通讯跨域，怎么解决？

[http://www.cnblogs.com/JChen666/p/3399951.html][http_www.cnblogs.com_JChen666_p_3399951.html]

a.com 和b.com

document.domain+iframe的设置，应用于主域相同而子域不同；  
利用iframe和location.hash，数据直接暴露在了url中，数据容量和类型都有限  
Flash LocalConnection， 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信， 只要在同一客户端就行，跨应用程序， 可以跨域。  
window.name 保存数据以及跨域 iframe 静态代理动态传输方案，充分的运用了window.name因为页面的url改变而name不改变的特性。

12、js事件有哪些

onmouseover：鼠标放上去时触发事件  
onmouseout：鼠标从上面移开时触发事件  
onclick：鼠标单击事件  
onfocus：获得焦点  
onblur：失去焦点  
onchange：下拉菜单值改变事件，只用于下拉菜单select元素  
oninput、onpropertyChange：判断用户输入事件，可以检测用户输入是否符合规范，检测的时候不用失去焦点，所以说是动态检测。

[Image 1]: 
[Link 1]: http://blog.csdn.net/lxcao/article/details/52797914
[2012062912181127.jpg]: /images/20220608/cd88b0b8db5e4c448df765b9a0daa916.png
[2012062914380085.jpg]: /images/20220608/56abb74c75044c438ec673f85f5d77cb.png
[735119-20161222192403854-1215865074.png]: /images/20220608/63ed4bdc1b1f48dd876d071f9b36a132.png
[735119-20161222194943854-529251231.png]: /images/20220608/570f748d57dc46989a1d9df0b0dc4d58.png
[http_www.cnblogs.com_JChen666_p_3399951.html]: http://www.cnblogs.com/JChen666/p/3399951.html