一面
1. 自我介紹
2. jQuery的選擇器
jQuery的選擇器與css中的選擇器很相似，通過使用css中的選擇器來選取HTML節點
1. #id
用法: $("#myDiv"); 返回值 單個元素的組成的集合
說明: 這個就是直接選擇html中的id="myDiv"
2. Element
用法: $("div") 返回值 集合元素
說明: element的英文翻譯過來是”元素”,所以element其實就是html已經定義的標籤元素,例如div,
input, a等等.
3. class
用法: $(".myClass") 返回值 集合元素
說明: 這個標籤是直接選擇html代碼中class="myClass"的元素或元素組(因爲在同一html頁面中
class是可以存在多個同樣值的)
4. *
用法: $("*") 返回值 集合元素
說明: 匹配所有元素,多用於結合上下文來搜索
5. selector1, selector2, selectorN
用法: $("div,span,p.myClass") 返回值 集合元素
說明: 將每一個選擇器匹配到的元素合併後一起返回.你可以指定任意多個選擇器, 並將匹配到的元素合
併到一個結果內。其中p.myClass是表示匹配元素
p class="myClass"其次可以使用屬性選擇器，例如input中的name，type屬性等
1、[attribute]
用法: $("div[id]") ; 返回值 集合元素
說明: 匹配包含給定屬性的元素。例子中是選取了所有帶”id”屬性的div標籤。
2、[attribute=value]
用法: $("input[name='newsletter']").attr("checked", true); 返回值 集合元素
說明: 匹配給定的屬性是某個特定值的元素.例子中選取了所有 name 屬性是 newsletter 的 input 元素。
3、[attribute!=value]
用法: $("div[title!='test']").css("background","yellow"); 返回值 集合元素
說明: 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。
此選擇器等價於:not此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value])。之前看到的:not 派上了用場。
4、[attribute^=value]
用法: $(”input[name^=‘news’]“) 返回值 集合元素
說明: 匹配給定的屬性是以某些值開始的元素.,我們又見到了這幾個類似於正則匹配的符號。
5、[attribute$=value]
用法: $("input[name$='letter']") 返回值 集合元素
說明: 匹配給定的屬性是以某些值結尾的元素。
6、[attribute*=value]
用法: $("input[name*='man']") 返回值 集合元素
說明: 匹配給定的屬性是以包含某些值的元素。
7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $("input[id][name$='man']") 返回值 集合元素
說明: 複合屬性選擇器,需要同時滿足多個條件時使用.又是一個組合,這種情況我們實際使用的時候很常用.這個例子中選擇的是所有含有 id 屬性,並且它的 name 屬性是以 man 結尾的元素。其他具體可以查看JQuery_九大選擇器
3. 如何尋找子元素a的父元素中帶class="abc"的兄弟節點
<div>
<div class="abc">
<div>
<div class="abc">
<div>
<a href="#">點擊我！！！</a>
</div>
</div>
<div class="abcs"></div>
<div class="abcs"></div>
</div>
</div>
<div class="abcs"></div>
<div class="abcs"></div>
</div>我的想法是首先尋找a標籤的全部祖先元素$("a").parents()，然後找到其中class="abc"的元素$("a").parents().filter(".abc")，最後再找到這些節點的兄弟節點即可$("a").parents().filter(".abc").siblings()![圖片描述]( "圖片描述")
4. 寫一個簡單的jQuery插件（打印"Hello World"）
這個主要有兩種方法
- 類級別開發插件
- 對象級別開發
// 一、類級別開發插件
// 1. 直接給jquer添加全局函數
jQuery.printHelloWorld = function(){
console.log("Hello World!!!");
}
// 2. 用extend()方法。extend是jquery提供的一個方法，把多個對象合併起來，參數是object
$.extend({
printHelloWorld:function(){
console.log("Hello World!!!");
}
})
// 3. 使用命名空間(如果不使用命名空間容易和其他引入的JS庫裏面的同名方法衝突)
jQuery.test = {
printHelloWorld: function () {
console.log("Hello World!!!");
}
}
// 調用
$.printHelloWorld();
$.test.printHelloWorld();
// 二、對象級別開發
// 第一行的;一定要寫
;(function($){
$.printHelloWorld = function(){
console.log("Hello World!!!");
}
}(jQuery))
// 調用
$.printHelloWorld();5. 跨域的解決方法
經典問題，具體參考深入理解前端跨域問題的解決方案
6. ES6有了解嗎
7. Promise解決了什麼問題
Promise主要解決了回調地獄的問題。
8. 你覺得Promise能解決回調地獄嗎？
9. 現在有兩個字符串var a = "aaa"和var b = "bbb如何不借助任何函數和中間變量交換他們
這裏只寫一個相對比較萬能的方法，其他可以參考JavaScript交換兩個變量值的七種解決方案
var a = "aaa";
var b = "bbb";
a = [b, b=a][0];
// 根據運算符優先級，首先執行b=a，此時的b直接得到了a的變量值，然後一步數組索引讓a得到了b的值10. vue中vuex的action和mutation區別
Action 提交的是 mutation，而不是直接變更狀態。
Action 可以包含任意異步操作，而Mutation 必須是同步函數。
11. localStorage和SessionStorage區別
- localStorage的生命週期是永久性的; sessionStorage 的生命週期是在瀏覽器關閉前