題目1: 說說庫和框架的區(qū)別掰邢?
庫:庫提供了方法牺陶,即API。當(dāng)開發(fā)者引入了庫以后辣之,可以直接掉用并使用這里面的API掰伸。可以當(dāng)做小工具使用怀估。它的體積較小狮鸭。常見的庫有jQuery.js等。
框架:顧名思義多搀,框架就是有一個支撐結(jié)構(gòu)歧蕉。相當(dāng)于一個已經(jīng)構(gòu)建好的實體房子,而用戶只需在這個房子里添加自己想要的家具等康铭。而框架對于開發(fā)者惯退,開發(fā)者只需在這個框架中添加自己的東西而實現(xiàn)具體的功能。常見的框架有Angular, React等从藤。
區(qū)別:框架和庫比較類似催跪,都是代碼的集合,不過框架更加具有針對性夷野,可以說是庫的升級版懊蒸,提供一套完整的代碼,而不需要自己重組悯搔。
題目2: jquery 能做什么骑丸?
jQuery是一個Javascript庫,可以讓用戶更簡單的進(jìn)行HTML文檔DOM遍歷妒貌、操作者娱、事件處理、動畫苏揣,以及使用Ajax黄鳍。且具有多瀏覽器兼容性。
題目3: jquery 對象和 DOM 原生對象有什么區(qū)別平匈?如何轉(zhuǎn)化框沟?
區(qū)別:jquery對象是在DOM原生對象上做了一層包裝,只能使用jquery對象方法增炭,不能使用DOM原生對象方法忍燥,同理DOM原生對象也不能使用jquery對象方法。
DOM轉(zhuǎn)換jquery對象
var a = document.getElementById('a') //DOM對象
var $b = $(a) //DOM對象轉(zhuǎn)換為jquery對象
jquery對象轉(zhuǎn)換為DOM對象
var a = $('#a')[0]
題目4:jquery中如何綁定事件隙姿?bind梅垄、unbind、delegate输玷、live队丝、on靡馁、off都有什么作用?推薦使用哪種机久?使用on綁定事件使用事件代理的寫法臭墨?
$('#a').on('click',function(){
console.log('a') //通過on給元素綁定事件,推薦使用
})
//事件代理
$('ul').on('click','li',function(){
console.log('a')
})
//off是給元素解除綁定事件
$('ul').off()
//bind
$('#a').bind('click',function(){
console.log('a') //相比on,少了一個selector參數(shù),selector可以過濾制定元素,已棄用
})
//unbind
$('#a').unbind() //和off效果一樣,和bind一樣,沒有selector參數(shù),已棄用
//delegate為被選元素的子元素添加事件
$('#a').delegate('#btn','click',function(){
console.log('a')
})
//live給匹配到的元素添加事件,現(xiàn)在匹配到的和將來匹配到都添加事件
$('#a').live('click', function() {
console.log('a');
});
題目5:jquery 如何展示/隱藏元素膘盖?
<p>jquery展示和隱藏元素</p>
<button id="show" type="button">顯示</button>
<button id="hide" type="button">隱藏</button>
<script>
$('#show').on('click',function(){
$('p').show()
})
$('#hide').on('click',function(){
$('p').hide()
})
</script>
題目6: jquery 動畫如何使用胧弛?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#an{
height:100px;
width:500px;
border:3px solid red;
}
#but{
margin:20px
}
</style>
</head>
<body>
<div id="an"></div>
<button id="but">點一下試試</button>
<script>
$('#but').on('click',function(){
$('#an').animate({height:'200px',width:'300px'},1000)
})
</script>
</body>
</html>
題目7:如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本侠畔?
//獲取html內(nèi)容
$('#a').html()
//設(shè)置html內(nèi)容
$('#a').html('<span>aaaa</span>')
//獲取text內(nèi)容
$('#a').text()
//設(shè)置text內(nèi)容
$('#a').text('設(shè)置text')
題目8:如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容结缚?如何設(shè)置和獲取元素屬性?
//獲取表單用戶輸入或者選擇的內(nèi)容
$('#inputVal').val()
//設(shè)置表單用戶輸入或者選擇的內(nèi)容
$('#inputVal').val('設(shè)置')
//獲取元素屬性
$('.text1').attr('title')
//設(shè)置元素屬性
$('.text1').attr('title', 'input-text')