1.說(shuō)說(shuō)庫(kù)和框架的區(qū)別?
庫(kù)是一個(gè)數(shù)據(jù)倉(cāng)庫(kù),里面放了各種可以利用的API,由于庫(kù)的內(nèi)部已經(jīng)做了各種底層的封裝和各種兼容實(shí)現(xiàn),因此可以調(diào)用提供的API接口來(lái)實(shí)現(xiàn)我們需要的功能,而不需要復(fù)雜的代碼和加工,因此使代碼得到優(yōu)化,效率提高.
框架相當(dāng)于一個(gè)模板,用來(lái)搭建一個(gè)項(xiàng)目的最基層的部分,框架內(nèi)部可以根據(jù)不同項(xiàng)目的需要填入不同的內(nèi)容。
另外一種解釋是:1. 庫(kù)是跟著你的思維走;2.框架是牽著你的思維跟他走;
2.jQuery 能做什么?
- 將原生DOM元素的功能實(shí)現(xiàn)并且滿足良好的兼容性,最重要的是,可以簡(jiǎn)化代碼。
- jquery是一個(gè)豐富的js庫(kù),內(nèi)部對(duì)js的很多復(fù)雜的方法進(jìn)行了封裝和加工,比如js很多方法名很冗長(zhǎng),jquery封裝后方法就變得簡(jiǎn)便了,也考慮到了跨瀏覽器兼容問(wèn)題,這樣我們用js時(shí)需要考慮的很多問(wèn)題它都幫我們解決了,這樣我們使用時(shí)就比js代碼要方便,高效的多。
3.jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別?如何轉(zhuǎn)化?
DOM原生對(duì)象:是對(duì)象;擁有原生對(duì)象的屬性和方法;
jQuery對(duì)象:是DOM元升級(jí)對(duì)象經(jīng)過(guò)包裝之后,擁有jQuery的屬性和方法(對(duì)原生DOM對(duì)象的封裝);是類(lèi)數(shù)組;
轉(zhuǎn)化方法:
jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象
jquery提供了兩種方法將一個(gè)jquery對(duì)象轉(zhuǎn)換成一個(gè)dom對(duì)象,即[index]和get(index)dom對(duì)象轉(zhuǎn)換成jquery對(duì)象
對(duì)于一個(gè)dom對(duì)象,只需要用$()把dom對(duì)象包裝起來(lái),就可以獲得一個(gè)jquery對(duì)象了,方法為$(dom對(duì)象)
4.jquery中如何綁定事件?bind、unbind、delegate、live、on、off都有什么作用?推薦使用哪種?使用on綁定事件使用事件代理的寫(xiě)法?
.bind()
$('a').bind('click',function(){ alert("harrisking")});
這是最簡(jiǎn)單的綁定方法了。JQuery掃描文檔找出所有的$(‘a(chǎn)’)
元素,并把a(bǔ)lert函數(shù)綁定到每個(gè)元素的click
事件上。
.unbind()
bind()的反向操作,從每一個(gè)匹配的元素中刪除綁定的事件。如果沒(méi)有參數(shù),則刪除所有綁定的事件,.unbind(type)刪除指定類(lèi)型事件;
$( "#foo" ).unbind();$( "#foo").unbind( "click" );
.live()
$('a').live('click',function(){ alert('harrisking')});
JQuery把a(bǔ)lert函數(shù)綁定到$(document)元素上,并使用’click’和’a’作為參數(shù)。任何時(shí)只要有事件冒泡到document節(jié)點(diǎn)上,它就查看該事件是否是一個(gè)click事件,以及該事件的目標(biāo)元素與’a’這一CSS選擇器是否匹配,如果都是的話,則執(zhí)行函數(shù)。
.delegate()
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
JQuery掃描文檔查找$(‘#container’),并使用click事件和a這一CSS選擇器作為參數(shù)把a(bǔ)lert函數(shù)綁定到$(‘#container’)上。任何時(shí)候只要有事件冒泡到$(‘#container’)上,它就查看該事件是否是click事件,以及該事件的目標(biāo)元素是否與CCS選擇器相匹配。如果兩種檢查的結(jié)果都為真的話,它就執(zhí)行函數(shù)。
為什么.delegate()要比.live()好用?
$('a').live('click', function() { blah()});
// 或者
$(document).delegate('a', 'click', function() {blah() });
后者實(shí)際上要快過(guò)前者,因?yàn)榍罢呤紫纫獟呙枵麄€(gè)的文檔查找所有的$(‘a(chǎn)’)元素,把它們存成jQuery對(duì)象。
.on()
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );
.off()
off():移除用on()綁定的事件處理程序
從所有的p中移除所有的事件:$( "p" ).off();
從所有的p中移除click的事件:$( "p" ).off( "click", "**" );
將事先綁定的方法作為第三個(gè)參數(shù)傳參來(lái)移除綁定事件:
var method = function() {}
$( "body" ).on( "click", "p", method );
$( "body" ).off( "click", "p", method );
通過(guò)命名空間移除綁定函數(shù):
var method = function() {}
$( ".abc" ).on( "click.validator", method );
$( ".abc" ).on( "keypress.validator", method );
$( ".abc" ).off( ".validator" );
5.jquery 如何展示/隱藏/切換元素?
<script>
$('.btn1').on('click',function(){ $('.content').hide(1000);
$('.btn2').on('click',function(){ $('.content').show(1000); });
$('.btn3').on('click',function(){ $('.content').toggle(1000); })
</script>
6.jquery 動(dòng)畫(huà)如何使用?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate</title>
<style>
.ct{ border:1px solid #ccc;
border-radius: 50%;
display: inline-block;
background-color: red;
width:100px;
height:100px;
position: relative;
}
</style>
</head>
<body>
<div class="ct"></div> <button class="btn">點(diǎn)我</button>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" > </script>
<script type="text/javascript"> $('.btn').on('click',function(){ $('.ct').animate({top: '0px',left:'200px'},500) .animate({top:'200px',left:'200px'},1000) .animate({top:'200px',left:'0px'},2000) .animate({top:'0px',left:'0px'},500) })
</script>
</body>
</html>
動(dòng)畫(huà)有隊(duì)列的概念,即當(dāng)需要連續(xù)執(zhí)行多個(gè)動(dòng)畫(huà)時(shí),不需要一層層的放入函數(shù)中,而是直接下列即可,每次點(diǎn)擊(操作)時(shí),會(huì)向隊(duì)列中添加這些操作,點(diǎn)擊n次,則添加n次,執(zhí)行n次。解決方法具體請(qǐng)點(diǎn)擊3
7.如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本?
- 設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容:
$('#test').html();
- 設(shè)置和獲取元素內(nèi)部文本:
$('#test').text();
8.如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設(shè)置和獲取元素屬性?
- 設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容:
$('input').val();
$('input').val('value');
設(shè)置和獲取元素屬性:
$('#test').attr();
$('#test').attr('test','test');