1. 說說庫和框架的區(qū)別？
- 庫（library）：我們可以簡單的認(rèn)為它就是一個工具箱，里面有可以直接拿來使用的方法和工具，以及可以調(diào)用的API。一些已經(jīng)封裝好了的函數(shù)可以實(shí)現(xiàn)特定的效果，只需要在使用的時候用少量的代碼去調(diào)動，這里的控制權(quán)在于 你，你來決定怎樣使用庫。
- 框架（framework）：可以簡單理解為搭好的模型架子，我們可以直接往里面添加內(nèi)容或進(jìn)行裝飾。而框架對于開發(fā)者，開發(fā)者只需在這個框架中添加自己的東西而實(shí)現(xiàn)具體的功能。常見的框架有Angular, React，Vue等。
2. jquery 能做什么？
jQuery是一個兼容多瀏覽器的JavaScript庫，核心理念是write less，do more，它的語法設(shè)計(jì)可以使開發(fā)更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax等。除此之外，jQuery還提供API讓開發(fā)者編寫插件?？傊?，使用jQuery能使開發(fā)者很輕松的開發(fā)出功能強(qiáng)大的靜態(tài)或動態(tài)頁面。
3. jquery 對象和 DOM 原生對象有什么區(qū)別？如何轉(zhuǎn)化？
- 區(qū)別：
jQuery對象是通過jQuery包裝DOM對象后產(chǎn)生的對象，只能使用jQuery里的方法，無法使用DOM對象的任何方法。同樣，DOM原生對象也不能使用jQuery里的方法。 - 轉(zhuǎn)化：
-
jQuery -> 原生：jQuery對象是一個類似數(shù)組的對象，可以使用[index]或者get(index)方法轉(zhuǎn)換為DOM對象，如：
<pre>var $p1 = $('.p1'); //jQuery對象 var p1 = $p1[0];//DOM對象 var p1 = $p1.get(0);//DOM對象</pre>
-
jQuery -> 原生：jQuery對象是一個類似數(shù)組的對象，可以使用[index]或者get(index)方法轉(zhuǎn)換為DOM對象，如：
-
原生 -> jQuery:用$()把DOM對象包起來，就可以轉(zhuǎn)化成jQuery對象，如：
<pre>var p1 = document.getElementById('div1');//DOM對象 var $p1 = $(p1);//jQuery對象</pre>
4. jquery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
綁定事件：在一個元素上增加一個事件類型和要實(shí)現(xiàn)的事件。綁定事件的方法有.bind()、.live()、.delegate()和.on()。.unbind()、.die()、.undelegate()和.off()分別是上述對應(yīng)的解除綁定的方法。
- bind:為一個元素綁定一個事件處理程序，在jQuery3.0版本中，已被標(biāo)記為棄用。如：
<pre>$("#btn").bind("click",function(){ console.log($(this).text()); });</pre> - unbind:用來解除bind綁定的事件。同樣在jQuery3.0版本中，標(biāo)記為棄用。如：
<pre>$("#btn").unbind();</pre> - live:附加一個事件處理器到匹配目前選擇器的所有元素，現(xiàn)在和未來。在新版本中推薦用.on()方法，即時在舊版本中，也推薦使用.delegate()方法來取代.live()方法。如：
<pre>$("#btn a").live("click",function(){ console.log($(this).text());//如果有新的a元素創(chuàng)建，也會觸發(fā)該事件。 });</pre> - delegate():為所有匹配選擇器（selector參數(shù)）的元素綁定一個處理器到一個或多個事件處理函數(shù)，基于一個指定的根元素的子集，匹配的元素包括那些目前已經(jīng)匹配到的元素，也包括那些今后可能匹配到的元素。在jQuery3.0中，delegate()也被標(biāo)記為棄用。如：
<pre>$("#btn").delegate("click","a",function(){ console.log($(this).text());//事件冒泡到btn元素上，只有它的子元素a才會觸發(fā)。 });</pre> - on:在選定的元素上綁定一個或多個事件處理函數(shù)。它提供綁定事件處理的所有功能。如：
<pre>$("#btn").on("click",function(){ console.log($"clicked"); });</pre> - off:移除
.on()綁定的事件處理函數(shù)。
<pre>$("#btn").off();</pre>
推薦使用on()：這個方法可以將以上各種事件綁定的方法都替代掉。
on綁定事件代理：
<pre>$("#btn").on("click","a",function(){ console.log($(this).text()); });</pre>
5. jquery 如何展示/隱藏元素？
- 展示：
語法：$(selector).show(speed,callback);
可選的參數(shù)speed：規(guī)定元素從隱藏到完全可見的速度，默認(rèn)為0。
可選的參數(shù)callback：show函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。
本質(zhì)上show方法是修改元素的display為block。
代碼如：
<pre>$('#btn').on('click', function() { $('.div1').show(1000); // 表示以1s的速度顯示div });</pre> - 隱藏：
語法：$(selector).hide(speed,callback);
選的參數(shù)speed：規(guī)定元素從隱藏到完全可見的速度，默認(rèn)為0。
可選的參數(shù)callback：show函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。
本質(zhì)上show方法是修改元素的display為none。
代碼：
<pre>$('#btn').on('click', function() { $('.div1').hide(1000); // 表示以1s的速度隱藏div });</pre>
6. jquery 動畫如何使用？
jQuery animate() 方法用于創(chuàng)建自定義動畫。
語法：$(selector).animate({params},speed,callback);
必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。
如：
<pre>$("#btn").on("click",function(){ $(".div1").animate({ width:"100px",//寬度變?yōu)?00px height:"100px",//高度變?yōu)?00px left:"50px"http://向左移動50px },5000)//持續(xù)5秒 animate(){ //加入多個動畫 }; });</pre>
7. 如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？
- 用html()方法可以設(shè)置和獲取元素內(nèi)部HTML內(nèi)容。
<pre>console.log($("#test").html());//獲取內(nèi)部html console.log($("#test").html("<span>hello</span>"));//改變內(nèi)部html</pre> - 用text()方法可以設(shè)置和獲取元素內(nèi)部文本內(nèi)容。
<pre>console.log($("#test").text());//獲取內(nèi)部text console.log($("#test").text("改變text"));//改變內(nèi)部text值</pre>
8. 如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性？
通過val()方法可以設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容
<pre>console.log($('.text1').val()); //獲得class為text1 console.log($('.text1').val('饑人谷'));//</pre>通過attr() 方法可以設(shè)置或返回元素的屬性
<pre>console.log($('#img').attr('src')); // console.log($('#img').attr('data-src','./images/1.png'));//</pre>
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明來源。
