問答
1.說說庫和框架的區(qū)別？
庫的的概念和意義是用來提供一些方法的集合咐旧，避免重復(fù)定義相同功能的函數(shù)驶鹉，并有一定的模式兼容性。
而所謂框架休偶，更應(yīng)該是按照開發(fā)者按照框架的設(shè)計去做一些事梁厉，而非簡單的工具集的概念，框架可以提供相應(yīng)的庫或者基于庫來實現(xiàn)踏兜，但庫一般不會具備框架的規(guī)范性词顾。
他們都是對原生代碼的封裝，一個注重整體碱妆，一個注重細(xì)節(jié)肉盹，框架幫助你解決“代碼如何組織”的問題，類庫幫助你解決“如何把代碼寫得更少/巧/強(qiáng)壯”的問題疹尾；它們解決的是不同層面的問題上忍。
2.jquery 能做什么骤肛？
- jQuery是一個兼容多瀏覽器的JavaScript庫，它封裝了很多方法窍蓝，可以讓使用者代碼寫的更少腋颠，更輕松。
- 它的功能有HTML文檔操作吓笙、事件處理淑玫、動畫設(shè)計和Ajax交互。
3.jquery 對象和 DOM 原生對象有什么區(qū)別面睛？如何轉(zhuǎn)化絮蒿？
Jquery 對象是 DOM 原生對象包裝后形成的。他們都有自己特定的方法叁鉴，不能相互使用土涝。
轉(zhuǎn)化：
- jQuery對象轉(zhuǎn)成DOM對象
var $div = $('#div');//jquery對象
var div = $div[0];//[index]方式轉(zhuǎn)為DOM對象
- DOM對象轉(zhuǎn)成jQuery對象
var div = document.getElementById('div');//DOM對象
var $div = $(div);//用$()轉(zhuǎn)化
4.jquery中如何綁定事件？bind幌墓、unbind但壮、delegate、live克锣、on茵肃、off都有什么作用？推薦使用哪種袭祟？使用on綁定事件使用事件代理的寫法？
- bind:為一個元素綁定一個事件處理程序捞附。在jQuery 3.0中巾乳，.bind()已被標(biāo)記為棄用。
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
- unbind:用.bind()方法綁定的事件處理程序可以使用.unbind()移除鸟召。在jQuery 3.0中胆绊，.unbind()已被標(biāo)記為棄用欧募。
$('#foo').unbind();
- delegate:事件代理,在jQuery 3.0中压状，.delegate()已被標(biāo)記為棄用跟继。
$("body").delegate("p", "click", function() {
$(this).toggleClass("chosen");
});
-
live:該事件會在事件冒泡中傳遞給其所有的祖輩元素，一直傳遞到document
對象為止舔糖。從jQuery 1.7開始娱两，該函數(shù)被標(biāo)記為已過時；從jQuery 1.9開始被移除金吗。
$("#btn a").live("click",function(){
console.log('1');//如果有新的a元素創(chuàng)建趣竣，也會觸發(fā)該事件旱物。
});
- on：提供綁定事件處理的所有功能遥缕。
$( "#div" ).on( "click",function() {
console.log('1');
});
on()方法可以將以上各種事件綁定的方法都替代掉。
- off:移除.on()綁定的事件處理函數(shù)宵呛。
$("p").off() //除所有段落上的事件：
- on()綁定事件代理：
$('ul').on('click','li',function(){
console.log($(this).text());
})
5.jquery 如何展示/隱藏元素单匣？
- 展示元素：
.show(duration,complete)
duration (默認(rèn): 400) 一個字符串或者數(shù)字決定動畫將運(yùn)行多久烤蜕。
complete 在動畫完成時執(zhí)行的函數(shù)。
$('#btn').on('click',function(){
$('#div').show(800);
})
- 隱藏元素：
.hide(duration,complete)
$('#btn').on('click',function(){
$('#div').hide(800);
})
6.jquery 動畫如何使用虎忌？
.animate()根據(jù)一組 CSS 屬性橱鹏，執(zhí)行自定義動畫膜蠢。
語法:.animate( properties , duration , easing , complete )
properties 參數(shù)定義形成動畫的 CSS 屬性莉兰。
duration (默認(rèn): 400)一個字符串或者數(shù)字決定動畫將運(yùn)行多久。("slow", "normal", 或 "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
easing (默認(rèn): swing)一個字符串杉辙，表示過渡使用哪種緩動函數(shù)捶朵。
complete 在動畫完成時執(zhí)行的函數(shù)。
如：
$('#btn').on('click',function(){
$('#div').animate({
opacity:0.5,
left:'50px',
height:100px;
},5000)
})
7.如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容综看？如何設(shè)置和獲取元素內(nèi)部文本？
- 獲取和設(shè)置元素內(nèi)部HTML內(nèi)容
$('#ct').html() //獲取元素內(nèi)部HTML內(nèi)容
$('#ct').html('<div>設(shè)置ct內(nèi)的HTML內(nèi)容</div>') //設(shè)置元素內(nèi)部HTML內(nèi)容
- 獲取和設(shè)置元素內(nèi)部文本
$('#ct').text()//獲取元素內(nèi)部文本
$('#ct').text('設(shè)置ct') //設(shè)置元素內(nèi)部文本
8.如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容舞吭？如何設(shè)置和獲取元素屬性析珊？
- 獲取和設(shè)置表單用戶輸入或者選擇的內(nèi)容
$('.input').val() //獲取表單用戶輸入或者選擇的內(nèi)容
$('.input').val('設(shè)置表單內(nèi)容') //設(shè)置表單用戶輸入或者選擇的內(nèi)容
- 獲取和設(shè)置元素屬性
$('#img').attr('scr') //獲取元素屬性
$('#img').attr('scr','./images/1.png') //設(shè)置元素屬性
代碼
task25-1：效果預(yù)覽
task25-2：效果預(yù)覽 a href="#"會跳轉(zhuǎn)到本頁面頂部，一般建議寫成javascript:void(0);點了沒有反應(yīng)兄春，寫#點了會跳一下锡溯。
task25-3：效果預(yù)覽
