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是什么？
// <datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
// datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
// 请使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
// 目前只有 Firefox 和 Opera 支持 <datalist> 标签。
<datalist> 标签
4）什么是vue生命周期 ?
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期
可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，更多可参考 详解vue生命周期 或 官方文档
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
5）vue父组件怎么给子组件传值?
举一个我在Vue组件开发中的例子
// 父组件
<template>
<div>
<!-- 子组件 开始 -->
<page-header ref="PageHeader" :headerData="headerData"></page-header>
<!-- 子组件 结束 -->
</div>
</template>
<script>
import PageHeader from '@/components/page/Header';
export default {
name: 'FatherPage',
components: { PageHeader },
data() {
return {
headerData: ['返回', '中间标题', ''],
};
},
methods: {
leftEvent() {
if (this.headerData[0]) {
// console.log('leftEvent()');
}
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
// 子组件
<template>
<div class="header-all">
<div class="header">
<span class="left" v-if="header[0]" @click="leftEvent">
<span>{{header[0]}}</span>
</span>
<span class="center">{{header[1]}}</span>
<span class="right" v-if="header[2]">
<span>{{header[2]}}</span>
</span>
</div>
</div>
</template>
<script>
export default {
name: 'SonPage',
data() {
return {
header: ['', '无标题', '']
};
},
props: ['headerData'],
created() {
this.header = this.headerData;
},
methods: {
leftEvent() {
if (this.header[0]) {
// 子组件可以调父组件中的事件
this.$parent.leftEvent();
}
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
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等元素。
<script src ="js.js"></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href="common.css" rel="stylesheet"/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
9） 添加、移除、移动、复制、创建和查找节点的方法?
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
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, '');
};
网友评论