1） JavaScript中如何檢測一個變量是一個String類型？請寫出函數(shù)實現(xiàn)
// 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代碼堕阔， 就不難發(fā)現(xiàn)。
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> 標簽。
4）什么是vue生命周期 ?
每個Vue實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個過程就是vue的生命周期
可以看到在vue一整個的生命周期中會有很多鉤子函數(shù)提供給我們在vue生命周期不同的時刻進行操作, 那么先列出所有的鉤子函數(shù)荤胁，更多可參考 詳解vue生命周期 或 官方文檔
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
5）vue父組件怎么給子組件傳值?
舉一個我在Vue組件開發(fā)中的例子
// 父組件
<template>
<div>
<!-- 子組件 開始 -->
<page-header ref="PageHeader" :headerData="headerData"></page-header>
<!-- 子組件 結(jié)束 -->
</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]) {
// 子組件可以調(diào)父組件中的事件
this.$parent.leftEvent();
}
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
6）簡述css的盒子模型瞧预？
CSS盒子模型也叫做框模型屎债，具備內(nèi)容(content)、填充(padding)垢油、邊框(border)盆驹、邊界(margin)這些屬性。在CSS中滩愁，每一個元素都被視為一個框躯喇，而每個框都有三個屬性：
- border:元素的邊框（可能不可見），用于將框的邊緣與其他框分開硝枉；
- margin：外邊距廉丽，表示框的邊緣與相鄰框之間的距離，也稱為頁邊空白妻味；
- padding:內(nèi)邊距正压，表示框內(nèi)容和邊框之間的空間。
width 和 height 指的是內(nèi)容區(qū)域的寬度和高度责球。增加內(nèi)邊距焦履、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸雏逾。
因此嘉裤，如果在一個具有邊框的元素中放置文本，往往需要設置一些內(nèi)邊距栖博，以便文本的邊緣不要接觸邊框屑宠，這樣更便于閱讀。而外邊距則可以在多個元素框之間創(chuàng)建空白仇让，避免這些框都擠在一起侨把。因此，在設計頁面時妹孙，經(jīng)常會使用padding屬性和margin屬性來設置頁面的布局。但是获枝，必須注意的是蠢正，一旦用了padding屬性或者margin屬性設置了元素的邊距以后，會增加元素在頁面布局中所占的面積省店。
7）請寫出jquery綁定事件的方法嚣崭，不少于兩種
jQuery中提供了四種事件監(jiān)聽方式，分別是bind懦傍、live雹舀、delegate、on粗俱，對應的解除監(jiān)聽的函數(shù)分別是unbind说榆、die、undelegate、off签财。詳見 jQuery 綁定事件的方式總結(jié) 串慰、jquery幾種事件綁定方式的比較
8）簡述一下src與href的區(qū)別
src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯(lián)系唱蒸。
src是source的縮寫邦鲫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置神汹；在請求src資源時會將其指向的資源下載并應用到文檔內(nèi)庆捺，例如js腳本，img圖片和frame等元素屁魏。
<script src ="js.js"></script>
當瀏覽器解析到該元素時滔以，會暫停其他資源的下載和處理，直到將該資源加載蚁堤、編譯醉者、執(zhí)行完畢，圖片和框架等元素也如此披诗，類似于將所指向資源嵌入當前標簽內(nèi)撬即。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫呈队，指向網(wǎng)絡資源所在位置剥槐，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
<link href="common.css" rel="stylesheet"/>
那么瀏覽器會識別該文檔為css文件宪摧，就會并行下載資源并且不會停止對當前文檔的處理粒竖。這也是為什么建議使用link方式來加載css，而不是使用@import方式几于。
9） 添加蕊苗、移除、移動沿彭、復制朽砰、創(chuàng)建和查找節(jié)點的方法?
（1）創(chuàng)建新節(jié)點
createDocumentFragment() //創(chuàng)建一個DOM片段
createElement() //創(chuàng)建一個具體的元素
createTextNode() //創(chuàng)建一個文本節(jié)點
（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, '');
};
