1.庫和框架的區(qū)別？
- 庫：就是API函數(shù)庫撑帖，提供API供你調(diào)用蓉坎。庫內(nèi)部已經(jīng)做了各種底層的封裝，以及各種兼容問題的處理磷仰，工作中調(diào)用庫內(nèi)的API接口就能實現(xiàn)需要的功能袍嬉，不需要額外的代碼來處理函數(shù)封裝和兼容問題，讓代碼更簡潔灶平，效率更高伺通。庫就像是一個工具盒，需要什么工具就從庫中調(diào)用逢享。
使用庫的過程就是根據(jù)所需的功能罐监，查文檔，再調(diào)用庫內(nèi)的對應的API接口瞒爬。
- 框架：提供一套完整的解決方案弓柱，你按照方案來操作以實現(xiàn)需求。
使用框架的過程就是先查文檔侧但，再照著文檔寫代碼矢空，出錯了再查文檔。
2.jquery 能做什么禀横？
jQuery將JavaScript的代碼進行了封裝屁药，處理了兼容性問題，提供API進行調(diào)用,
讓我們實現(xiàn)功能時不用再為兼容性而困擾柏锄，少寫了許多代碼酿箭。
實現(xiàn)一個目的需要很多步驟，使用原生js趾娃，就需要每個步驟都寫出來缭嫡，jQuery就把這些步驟打包封裝進一個函數(shù)中，做成一個API抬闷，用戶調(diào)用這個API妇蛀，提供參數(shù)，就能一步實現(xiàn)目的，簡潔高效讥耗。
3. jquery 對象和 DOM 原生對象有什么區(qū)別有勾？如何轉(zhuǎn)化疹启？
DOM對象 ：W3C標準用于操作文檔的API古程。具體點來說就是指 HTML 文本中的所有被標簽標記的東西 ，在js里可以用 getElementById 等傳統(tǒng)的方法獲得的對象喊崖，擁有原生對象的屬性和方法挣磨。
jQuery對象：將DOM原生對象進行封裝后得到的類數(shù)組對象，它是jQuery獨有的荤懂。如果一個對象是jQuery對象茁裙，那么就可以使用jQuery里的方法。
var domObj = document.getElementById('id'); //DOM對象
var obj=('#id'); //jQuery對象;
注意：在jQuery對象中無法使用DOM對象的任何方法节仿。同樣晤锥，DOM對象也不能使用jQuery方法。
jquery提供了兩種方法將一個jquery對象轉(zhuǎn)換成一個dom對象廊宪，[index]和get(index)矾瘾。
var cr=('#html'); //jquery對象
var cr = cr[0];//dom對象,也可寫成var cr=cr.get(0);
對于一個dom對象，只需要用()把dom對象包裝起來箭启，就可以獲得一個jquery對象了壕翩，方法為$(dom對象);
var cr=document.getElementById('html'); //dom對象
var cr= $(cr); //轉(zhuǎn)換成jquery對象
5.jquery事件綁定
1.普通事件綁定：
//事件一
$("#btn").on("click",function(){
console.log("我被點擊了")；
})
//事件二傅寡，給事件添加命名空間放妈，下面的.myClick 就是添加的命名空間，用來標識本次事件荐操，刪除事件的時候方便指定
$("#btn").on("click.myClick",function(){
console.log("糟糕芜抒，我怎么又被點擊了")；
})
$("#btn").off("click.myClick") // 僅僅解綁了上面添加命名的事件二托启，不會解綁事件一
2.事件代理
// 事件委托或者事件代理宅倒，想讓div下面所有的span綁定事件，可以把事件直接綁定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
3.可以在綁定的時候給事件處理程序傳遞一些參數(shù)
$('div').on('click', {name: 'Byron', age: 24}, function(e){
console.log(e.data);
});
6.bind驾中、unbind唉堪、delegate、live肩民、on唠亚、off都有什么作用?
- bind() 方法為被選元素添加一個或多個事件處理程序，并規(guī)定事件發(fā)生時運行的函數(shù)持痰。
$(selector).bind(event,data,function)
$("#btn").bind("click.myClick", function() {
console.log("我被點擊了")
})
- unbind() 方法移除被選元素的事件處理程序灶搜。該方法能夠移除所有的或被選的事件處理程序，或者當事件發(fā)生時終止指定函數(shù)的運行。ubind() 適用于任何通過 jQuery 附加的事件處理程序割卖。
$(selector).unbind(event,function)
//移除所有 p 元素的事件處理函數(shù)：
$("button").click(function(){
$("p").unbind();
});
- delegate：用于事件代理前酿，為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)鹏溯；適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）罢维。
$(selector).delegate(childSelector,event,data,function)
$("ul").delegate("li", "click", function() {
var text = $(this).text()
console.log(text)
})
- live()方法將監(jiān)聽器綁定在了document上，不把監(jiān)聽器綁定在匹配的元素上丙挽。利用事件委托機制肺孵，把節(jié)點處理委托給document。
$(selector).live(event,data,function)
//當點擊按鈕時颜阐，隱藏或顯示 p 元素：
$("button").live("click",function(){
$("p").slideToggle();
});
- on() 方法在選定的元素上綁定一個或多個事件處理函數(shù)平窘，提供綁定事件處理的所有功能。
$(selector).on(event,childSelector,data,function,map)
//普通事件綁定
$("#btn").on("click",function(){
console.log("我被點擊了")
})
//事件代理綁定
$("ul").on("click", "li", function() {
var text = $(this).text()
console.log(text)
})
- off() 方法通常用于移除通過 on()方法添加的事件處理程序凳怨。
$(selector).off(event,selector,function(eventObj),map)
$("#btn").off("click.myClick")
推薦使用：on方法瑰艘，因為既能普通綁定事件，也能事件代理綁定肤舞。自 jQuery 版本 1.7 起紫新，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品萨赁。該方法給 API 帶來很多便利弊琴，簡化了 jQuery 代碼庫。
注意：on的事件代理和delegate的事件代理杖爽，寫法不一樣敲董，子元素和事件監(jiān)聽函數(shù)的位置不同
//on的事件代理
$("ul").on("click", "li", function() {
var text = $(this).text()
console.log(text)
})
//delegate的事件代理
$("ul").delegate("li", "click", function() {
var text = $(this).text()
console.log(text)
})
//li和click的位置不一樣
5.jquery 如何展示/隱藏元素？
.show([speed], [callback])：顯示元素
.hide([speed], [callback])：隱藏元素
.toggle([speed], [callback]): 如果元素是最初顯示慰安，它會被隱藏腋寨；如果隱藏的，它會顯示出來
.fadeIn([speed], [callback])：通過淡入的方式顯示匹配元素化焕。
.fadeOut([speed], [callback])：通過淡出的方式隱藏匹配元素萄窜。
.fadeToggle([speed], [callback])：淡入淡出的方式顯示隱藏元素，隱藏顯示元素
.fadeTo(speed, opacity撒桨，[callback])：通過匹配元素的不透明度做動畫效果查刻。
.slideUp([speed], [callback])：以滑動的方式隱藏匹配的元素
.slideDown([speed], [callback])：以滑動的方式顯示匹配元素
speed：規(guī)定速度，取值：'slow', 'normal', 'fast'或毫秒
callback：顯示或隱藏后執(zhí)行的函數(shù)
opacity：透明度（0~1）
$('#btn-box1').on('click',function(){
$('.box').show(3000);
//$('.box').fadeIn();
//$('.box').slideDown('slow');
})
$('#btn-box2').on('click',function(){
$('.box').hide(3000);
//$('.box').fadeOut('slow');
//$('.box').slideUp('slow');
})
6. jquery 動畫如何使用凤类？
animate() 方法執(zhí)行 CSS 屬性集的自定義動畫穗泵。該方法通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)。CSS屬性值是逐漸改變的谜疤，這樣就可以創(chuàng)建動畫效果佃延。只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）现诀。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）。
$(selector).animate(styles, speed, easing, callback)
參數(shù)說明：
- style:必須履肃，規(guī)定產(chǎn)生動畫效果的CSS
- speed:可選仔沿，規(guī)定動畫的速度，默認是normal尺棋，可能的值：數(shù)字(毫秒封锉，比如5000)、'slow'陡鹃、'normal'烘浦，'fast'
- easing: 可選抖坪，規(guī)定在不同的動畫點中設(shè)置動畫速度的 easing 函數(shù)萍鲸。內(nèi)置的 easing 函數(shù)： swing, linear
- callback: 可選，animate 函數(shù)執(zhí)行完之后擦俐，要執(zhí)行的函數(shù)脊阴。
var css = {
width: "100px",
opacity: 0.8,
marginRight: "800px",
fontSize: "200px"
}
$(".box").animate(css, "slow", "linear", function(){
console.log("動畫播放成功")
})
7.如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本蚯瞧？
.html(string)
用于獲取/修改匹配元素的innerHTML
無參數(shù)時楷力，返回元素的innerHTML
有參數(shù)時蛾方，修改元素的innerHTML為參數(shù)值
.text(string)
用來得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合，包括他們的后代，或設(shè)置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容祥诽。
無參數(shù)時，獲取元素內(nèi)部文本
有參數(shù)時花嘶，設(shè)置元素內(nèi)部文本為參數(shù)值
獲取內(nèi)容：
$(".box").html() //獲取元素內(nèi)部的html內(nèi)容辱姨，類似于innerHTML
$(".box").text() //獲取元素內(nèi)部的text文本，類似于innerText
設(shè)置內(nèi)容：
$(".box").html("<p>設(shè)置了一個段落</p>")//設(shè)置了元素內(nèi)部的html內(nèi)容,標簽生效
$(".box").text("設(shè)置了一個文本")//設(shè)置了元素內(nèi)部的text文本振诬，標簽不生效
注意：如果結(jié)果是多個時進行賦值操作的時候會給每個結(jié)果都賦值蹭睡；如果結(jié)果是多個，獲取值的時候赶么，返回結(jié)果集中的第一個對象的相應值
9.如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容肩豁？如何設(shè)置和獲取元素屬性？
- val() 方法返回或設(shè)置被選元素的 value 屬性辫呻，通常與 HTML 表單元素一起使用清钥。
當用于返回值時：返回第一個匹配元素的 value 屬性的值。
當用于設(shè)置值時：設(shè)置所有匹配元素的 value 屬性的值放闺。
//返回 value 屬性：
$(selector).val()
//設(shè)置 value 屬性：
$(selector).val(value)
- attr()方法用來設(shè)置或返回被選元素的屬性和值祟昭。
當該方法用于返回屬性值時：返回第一個匹配元素的值。
當該方法用于設(shè)置屬性值時：為匹配元素設(shè)置一個或多個屬性/值對雄人。
//返回屬性的值：
$(selector).attr(attribute)
//設(shè)置屬性和值：
$(selector).attr(attribute,value)
