題目1： 說說庫和框架的區別？
庫是很多工具的集合，類似于jquery，封裝了很多簡化的方法；而框架類似一個架子，我們一般只需在這個架子里面填充代碼就可以了（如React、Angular）
題目2： jquery 能做什么？
jquery幫我們封裝了常用的方法，并且具有不錯的兼容性（1.12可以兼容到IE6+，當前版兼容IE9+），它封裝的方法有
- 獲取元素：通過類似于css選擇器的方式獲取元素（為了方便使用者jQuery刻意和CSS選擇器使用相同的語法，幾乎支持所有類型的CSS3選擇器，當然也有一些其特定的選擇器）
- DOM操作
- 操作屬性/css
- 常用函數（如each、map等）
- 事件處理
- 動畫
- Ajax
- JSONP
題目3： jquery 對象和 DOM 原生對象有什么區別？如何轉化？
- 區別：
- 操作方法不一樣：如dom對象.innerHtml 類似于 jq對象.html
- 綁定事件不一樣：addEventListener/removeEventListener類似于jq對象的on/off
- 可以使用jquery特有的方法：如toggleClass,trigger，它們封裝了一段常用代碼
- jquery的代碼和操作更為簡便
- jquery兼容性更好
- 轉化
- $(原生DOM對象) => jquery對象
- $(jquery對象)[index] => 原生DOM對象（表示：獲取jquery選中的元素集合中的第index個元素，這個元素是dom對象）
題目4：jquery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
- jquery通過on方法綁定事件
- bind、unbind、delegate和live都是jquery1.7以前的方法，現在已經廢棄，被on和off代替
- bind和on都是綁定事件；
- unbind和off都是解綁事件；
- delegate和on都可以實現事件代理（讓父元素代理子元素的事件）；
- live綁定事件和用.bind()來綁定事件是一樣的，但.live()方法會綁定相應的事件到document元素上
題目5：jquery 如何展示/隱藏元素？
- 通過增刪class（display:none;）來實現展示/隱藏元素
.display{
display: none;
}
$('#btn').on('click',()=>{
let $box2 = $('.box2');
//method1
if($box2.hasClass('display')){
$box2.removeClass('display');
}else {
$box2.addClass('display');
}
//method2===method1
// $box2.toggleClass('.display');
});
- 通過jquery動畫方法show()和hide()來實現
let $box2 = $('.box2');
$box2.hide();
$box2.show();
- 通過設置css的display屬性來實現
let $box2 = $('.box2');
$box2.css('display','none');
$box2.css('display','block');
題目6： jquery 動畫如何使用？
- 基礎：
- 控制顯示/隱藏：
- 隱藏元素: $node.show([duration ] [,easing ] [,complete ]);
- 顯示元素: $node.hide([duration ] [,easing ] [,complete ]);
- 切換元素的隱藏、顯示: $node.toggle([duration ] [,easing ] [,complete ]);
3個參數的含義：
duration:動畫時長
easing:表示過渡使用哪種緩動函數，jQuery自身提供"linear" 和 "swing"
complete:在動畫完成時執行的函數
- 漸變
- 通過淡入的方式顯示匹配元素: $node.fadeIn( [duration ] [, easing ] [, complete ] )
- 通過淡出的方式隱藏匹配元素: $node.fadeOut( [duration ] [, easing ] [, complete ] )
- 調整匹配元素的透明度: $node.fadeTo( duration, opacity [, easing ] [, complete ] )
- 通過匹配的元素的不透明度動畫，來顯示或隱藏它們:
$node.fadeToggle( [duration ] [, easing ] [, complete ] ) - 滑動
- .slideDown( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式 - .slideUp( [duration ] [, easing ] [, complete ] )
用滑動動畫隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去，當一個隱藏動畫后，display 樣式屬性被設置為none - .slideToggle( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示或隱藏一個匹配元素 - 自定義：
- .animate( properties [, duration ] [, easing ] [, complete ] ):自己設定動畫
- .stop( [clearQueue ] [, jumpToEnd ] )：暫停動畫
- finish：結束動畫
題目7：如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？
- 設置元素內部 HTML 內容：$('#box').html('<h1>Hello world</h1>');
- 獲取元素內部 HTML 內容：let content = $('#box').html();
- 設置元素內部文本：$('h1').text('Hello world');
- 獲取元素內部文本：let title = $('h1').text();
題目8：如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？
- 設置表單用戶輸入或者選擇的內容: $('#username").value="陳龍";
- 獲取表單用戶輸入或者選擇的內容: let username = $('#username").value;
- 設置元素屬性: $('.box').attr('color','red');$('box').attr({'color':'red','width':'100px'});
- 獲取元素屬性: let color = $('.box').attr('color');
