1.庫和框架的區(qū)別？

• 庫：就是API函數(shù)庫，提供API供你調(diào)用。庫內(nèi)部已經(jīng)做了各種底層的封裝，以及各種兼容問題的處理，工作中調(diào)用庫內(nèi)的API接口就能實(shí)現(xiàn)需要的功能，不需要額外的代碼來處理函數(shù)封裝和兼容問題，讓代碼更簡潔，效率更高。庫就像是一個(gè)工具盒，需要什么工具就從庫中調(diào)用。

使用庫的過程就是根據(jù)所需的功能，查文檔，再調(diào)用庫內(nèi)的對(duì)應(yīng)的API接口。

• 框架：提供一套完整的解決方案，你按照方案來操作以實(shí)現(xiàn)需求。

使用框架的過程就是先查文檔，再照著文檔寫代碼，出錯(cuò)了再查文檔。

2.jquery 能做什么？

jQuery將JavaScript的代碼進(jìn)行了封裝，處理了兼容性問題，提供API進(jìn)行調(diào)用,
讓我們實(shí)現(xiàn)功能時(shí)不用再為兼容性而困擾，少寫了許多代碼。

實(shí)現(xiàn)一個(gè)目的需要很多步驟，使用原生js，就需要每個(gè)步驟都寫出來，jQuery就把這些步驟打包封裝進(jìn)一個(gè)函數(shù)中，做成一個(gè)API，用戶調(diào)用這個(gè)API，提供參數(shù)，就能一步實(shí)現(xiàn)目的，簡潔高效。

3. jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別？如何轉(zhuǎn)化？

• DOM對(duì)象 ：W3C標(biāo)準(zhǔn)用于操作文檔的API。具體點(diǎn)來說就是指 HTML 文本中的所有被標(biāo)簽標(biāo)記的東西 ，在js里可以用 getElementById 等傳統(tǒng)的方法獲得的對(duì)象，擁有原生對(duì)象的屬性和方法。

• jQuery對(duì)象：將DOM原生對(duì)象進(jìn)行封裝后得到的類數(shù)組對(duì)象，它是jQuery獨(dú)有的。如果一個(gè)對(duì)象是jQuery對(duì)象，那么就可以使用jQuery里的方法。

var domObj = document.getElementById('id'); //DOM對(duì)象 
var obj=('#id'); //jQuery對(duì)象;

注意：在jQuery對(duì)象中無法使用DOM對(duì)象的任何方法。同樣，DOM對(duì)象也不能使用jQuery方法。

jquery提供了兩種方法將一個(gè)jquery對(duì)象轉(zhuǎn)換成一個(gè)dom對(duì)象，[index]和get(index)。

var cr=('#html'); //jquery對(duì)象 
var cr = cr[0];//dom對(duì)象,也可寫成var cr=cr.get(0); 

Paste_Image.png

對(duì)于一個(gè)dom對(duì)象，只需要用()把dom對(duì)象包裝起來，就可以獲得一個(gè)jquery對(duì)象了，方法為$(dom對(duì)象);

var cr=document.getElementById('html'); //dom對(duì)象 
var cr= $(cr); //轉(zhuǎn)換成jquery對(duì)象

Paste_Image.png

5.jquery事件綁定

1.普通事件綁定：

//事件一
$("#btn").on("click",function(){
    console.log("我被點(diǎn)擊了")；
})
//事件二，給事件添加命名空間，下面的.myClick 就是添加的命名空間，用來標(biāo)識(shí)本次事件，刪除事件的時(shí)候方便指定
$("#btn").on("click.myClick",function(){
    console.log("糟糕，我怎么又被點(diǎn)擊了")；
})

$("#btn").off("click.myClick")  // 僅僅解綁了上面添加命名的事件二，不會(huì)解綁事件一

2.事件代理

// 事件委托或者事件代理，想讓div下面所有的span綁定事件，可以把事件直接綁定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

3.可以在綁定的時(shí)候給事件處理程序傳遞一些參數(shù)

$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});

6.bind、unbind、delegate、live、on、off都有什么作用?

• bind() 方法為被選元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定事件發(fā)生時(shí)運(yùn)行的函數(shù)。

$(selector).bind(event,data,function)

$("#btn").bind("click.myClick", function() {
  console.log("我被點(diǎn)擊了")
})

Paste_Image.png

• unbind() 方法移除被選元素的事件處理程序。該方法能夠移除所有的或被選的事件處理程序，或者當(dāng)事件發(fā)生時(shí)終止指定函數(shù)的運(yùn)行。ubind() 適用于任何通過 jQuery 附加的事件處理程序。

$(selector).unbind(event,function)

//移除所有 p 元素的事件處理函數(shù)：
$("button").click(function(){
  $("p").unbind();
});

Paste_Image.png

• delegate：用于事件代理，為指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)；適用于當(dāng)前或未來的元素（比如由腳本創(chuàng)建的新元素）。

$(selector).delegate(childSelector,event,data,function)

Paste_Image.png

$("ul").delegate("li", "click", function() {
  var text = $(this).text()
  console.log(text)
})

• live()方法將監(jiān)聽器綁定在了document上，不把監(jiān)聽器綁定在匹配的元素上。利用事件委托機(jī)制，把節(jié)點(diǎn)處理委托給document。

$(selector).live(event,data,function)

Paste_Image.png

//當(dāng)點(diǎn)擊按鈕時(shí)，隱藏或顯示 p 元素：
$("button").live("click",function(){
  $("p").slideToggle();
});

• on() 方法在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)，提供綁定事件處理的所有功能。

$(selector).on(event,childSelector,data,function,map)

Paste_Image.png

//普通事件綁定
$("#btn").on("click",function(){
  console.log("我被點(diǎn)擊了")
})
  //事件代理綁定
$("ul").on("click", "li", function() {
  var text = $(this).text()
  console.log(text)
})

• off() 方法通常用于移除通過 on()方法添加的事件處理程序。

$(selector).off(event,selector,function(eventObj),map)

Paste_Image.png

$("#btn").off("click.myClick")

推薦使用：on方法，因?yàn)榧饶芷胀ń壎ㄊ录材苁录斫壎?。?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]): 如果元素是最初顯示，它會(huì)被隱藏；如果隱藏的，它會(huì)顯示出來
.fadeIn([speed], [callback])：通過淡入的方式顯示匹配元素。
.fadeOut([speed], [callback])：通過淡出的方式隱藏匹配元素。
.fadeToggle([speed], [callback])：淡入淡出的方式顯示隱藏元素，隱藏顯示元素
.fadeTo(speed, opacity，[callback])：通過匹配元素的不透明度做動(dòng)畫效果。
.slideUp([speed], [callback])：以滑動(dòng)的方式隱藏匹配的元素
.slideDown([speed], [callback])：以滑動(dòng)的方式顯示匹配元素

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 動(dòng)畫如何使用？

animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫。該方法通過CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫效果。只有數(shù)字值可創(chuàng)建動(dòng)畫（比如 "margin:30px"）。字符串值無法創(chuàng)建動(dòng)畫（比如 "background-color:red"）。

$(selector).animate(styles, speed, easing, callback)

參數(shù)說明：

• style:必須，規(guī)定產(chǎn)生動(dòng)畫效果的CSS
• speed:可選，規(guī)定動(dòng)畫的速度，默認(rèn)是normal，可能的值：數(shù)字(毫秒，比如5000)、'slow'、'normal'，'fast'
• easing: 可選，規(guī)定在不同的動(dòng)畫點(diǎn)中設(shè)置動(dòng)畫速度的 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("動(dòng)畫播放成功")
})

7.如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？

.html(string)
用于獲取/修改匹配元素的innerHTML
無參數(shù)時(shí)，返回元素的innerHTML
有參數(shù)時(shí)，修改元素的innerHTML為參數(shù)值
.text(string)
用來得到匹配元素集合中每個(gè)元素的文本內(nèi)容結(jié)合，包括他們的后代，或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容。
無參數(shù)時(shí)，獲取元素內(nèi)部文本
有參數(shù)時(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è)置了一個(gè)段落</p>")//設(shè)置了元素內(nèi)部的html內(nèi)容,標(biāo)簽生效
$(".box").text("設(shè)置了一個(gè)文本")//設(shè)置了元素內(nèi)部的text文本，標(biāo)簽不生效

注意：如果結(jié)果是多個(gè)時(shí)進(jìn)行賦值操作的時(shí)候會(huì)給每個(gè)結(jié)果都賦值；如果結(jié)果是多個(gè)，獲取值的時(shí)候，返回結(jié)果集中的第一個(gè)對(duì)象的相應(yīng)值

9.如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性？

• val() 方法返回或設(shè)置被選元素的 value 屬性，通常與 HTML 表單元素一起使用。

當(dāng)用于返回值時(shí)：返回第一個(gè)匹配元素的 value 屬性的值。
當(dāng)用于設(shè)置值時(shí)：設(shè)置所有匹配元素的 value 屬性的值。

//返回 value 屬性：
$(selector).val()
//設(shè)置 value 屬性：
$(selector).val(value)

• attr()方法用來設(shè)置或返回被選元素的屬性和值。

當(dāng)該方法用于返回屬性值時(shí)：返回第一個(gè)匹配元素的值。
當(dāng)該方法用于設(shè)置屬性值時(shí)：為匹配元素設(shè)置一個(gè)或多個(gè)屬性/值對(duì)。

//返回屬性的值：
$(selector).attr(attribute)
//設(shè)置屬性和值：
$(selector).attr(attribute,value)