一份Web前端笔试题及答案整理（给了40分钟）

1） JavaScript中如何检测一个变量是一个String类型？请写出函数实现

// String类型有两种生成方式：
// （1）var str = 'hello world';
// （2）var str = new String('hello world');
function IsString(str) {
  return (typeof str == 'string' || str.constructor == String);
}
var str = ' ';
console.log(IsString(1)); // false
console.log(IsString(str)); // true
console.log(IsString(new String(str))); // true

---

2） $.fn是什么意思？

// $.fn是指jquery的命名空间， 加上fn上的方法及属性， 会对jquery实例每一个有效。
// 如扩展$.fn.abc()
// 那么你可以这样子： $("#div").abc();
// 通常使用$.extend() 方法扩展.

// $.fn是什么东西呢。 查看jQuery代码， 就不难发现。
jQuery.fn = jQuery.prototype = {
  init: function (selector, context) {//....　
}
// 原来 jQuery.fn = jQuery.prototype. 对prototype肯定不会陌生啦。

---

3）HTML5中的DataList是什么？

// 

---

4）什么是vue生命周期 ?

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期
可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，更多可参考 详解vue生命周期 或 官方文档

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

---

5）vue父组件怎么给子组件传值?

举一个我在Vue组件开发中的例子

// 父组件





// 子组件

---

6）简述css的盒子模型？

CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框，而每个框都有三个属性：

• border:元素的边框（可能不可见），用于将框的边缘与其他框分开；
• margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白；
• padding:内边距，表示框内容和边框之间的空间。

width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
因此，如果在一个具有边框的元素中放置文本，往往需要设置一些内边距，以便文本的边缘不要接触边框，这样更便于阅读。而外边距则可以在多个元素框之间创建空白，避免这些框都挤在一起。因此，在设计页面时，经常会使用padding属性和margin属性来设置页面的布局。但是，必须注意的是，一旦用了padding属性或者margin属性设置了元素的边距以后，会增加元素在页面布局中所占的面积。

Box Model

---

7）请写出jquery绑定事件的方法，不少于两种

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。详见 jQuery 绑定事件的方式总结 、jquery几种事件绑定方式的比较

---

8）简述一下src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

---

9） 添加、移除、移动、复制、创建和查找节点的方法?

（1）创建新节点

  createDocumentFragment()    //创建一个DOM片段
  createElement()   //创建一个具体的元素
  createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

  appendChild()
  removeChild()
  replaceChild()
  insertBefore()

（3）查找

  getElementsByTagName()    //通过标签名称
  getElementsByName()    //通过元素的Name属性的值
  getElementById()    //通过元素Id，唯一性

更多 DOM操作——怎样添加、移除、移动、复制、创建和查找节点

---

10）写一个function，清除字符串前后的空格。（兼容所有浏览器）

// 方法有很多种 比如正则替换
// 去左空格;
String.prototype.LTrim = function () {
  return this.replace(/(^\s*)/g, '');
};
// 去右空格;
String.prototype.RTrim = function () {
  return this.replace(/(\s*$)/g, '');
};
// 去左右空格;
String.prototype.Trim = function () {
  return this.replace(/(^\s*)|(\s*$)/g, '');
};