史上最全的web前端面试题汇总及答案

21、如何在页面上实现一个圆形的可点击区域？

①map+area或者svg

②border-radius

③纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

22、CSS3有哪些新特性？

① CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px）；

② 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）；

③ transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

//旋转,缩放,定位,倾斜

④ 增加了更多的CSS选择器 多背景 rgba

CSS3新增属性

Html5

---

1、Html5与html4相比，各有何优缺点？ 怎样处理html5新标签的兼容性问题？

html5余html4的异同请看以下的链接

html5与html4的异同

兼容性问题

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。

Javascript

---

1、JS如何使页面跳转?怎么引入一个外部JS文件?

①直接在head标签内写入js代码，如下

②引入写好的js文件，使用语句

也是直接放入到head标签里头，也有的是放在前面。

2、输入框的验证用什么事件?

change(fn)

3、undefined与null有何异同？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

undefined：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

null：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

它们都表示空，转换为boolean后都为false，但是null代表一个对象变量已经被初始化，但未装入对象；undefined表示未初始化变量

4、=与有何异同？

相同点：都是判定两个值是否相等

不同点：不会判断类型，而=会判断类型

5、如何判断一个变量的值是否为数字？以及有哪些手段判断变量值的数据类型？

全局函数isNaN可以判断一个变量的值是否为数字。

可以使用运算符type、instanceof判断变量值的数据类型。

6、什么是Bom什么是Dom?你如何理解Dom?

链接标记target与Dom，Bom

7、Array的join、push、splice、slice各有何用途，splice与slice有何异同？

join：使用指定间隔符连接所有元素为字符串

push：在尾部添加元素并维护array实例的length

splice与slice都是截取一部分元素。不同的在于：slice返回截取后的新实例，splice在原array实例上操作，更详细的请见下文链接。

JS中数组对象详解

8、如何阻止表单提交？

在onsubmit事件中返回false

9、如何动态操作表格？

可以像普通dom一样操作，但是因为表格的dom比较复杂，所以我通常是使用table的insertRow、deleteRow及tr对象的insetCell、deleteCell操作。

10、String.match与RegExp.exec有何区别？

match只会返回没有分组的全部匹配结果或者有分组的第一次匹配结果；

而exec可以利用循环返回全部匹配结果。

11、为验证手机号写一个正则。

function checkSubmitMobil()

{

if ($(“#phoneNum”).val() == “”) {

alert(“手机号码不能为空！”);

//$(“#moileMsg”).html(“手机号码不能为空！”);

$(“#mobile”).focus();

return false;

}

if (!KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲phoneNum").val(…/))

{

alert(“手机号码格式不正确！”);

//$(“#moileMsg”).html(“手机号码格式不正确！请重新输入！”);

$(“#phoneNum”).focus();

return false;

}

return true;

}

12、正则的i标记与g标记各有何用途？

i：不区分大小写；

g：全局匹配。