說(shuō)說(shuō)庫(kù)和框架的區(qū)別?
庫(kù):是一個(gè)很多小工具的集合摄杂,可以用此工具簡(jiǎn)化你的代碼坝咐。
框架:為解決一個(gè)(一類)問(wèn)題而開(kāi)發(fā)的產(chǎn)品,開(kāi)發(fā)者按照框架的設(shè)計(jì)去做一些事
jQuery 能做什么析恢?
- 可以做和原生js相同的事情墨坚,可以簡(jiǎn)化js代碼
- 可以解決ie的兼容性問(wèn)題
- jQuery庫(kù)容易擴(kuò)展而且不斷有新插件面世增強(qiáng)它的功能
jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別?如何轉(zhuǎn)化映挂?
jquery對(duì)象就是用jQuery的方法進(jìn)行獲取的對(duì)象泽篮,而原生DOM對(duì)象就是用javaScript的方法進(jìn)行獲取的對(duì)象。
jQuery對(duì)象就只能使用jQuery的方法柑船,原生DOM對(duì)象只能使用原生DOM的方法
如何轉(zhuǎn)換
- 獲取jQuery對(duì)象
$('#btn')
獲取DOM對(duì)象
document.getElementById('btn') - jQuery轉(zhuǎn)換成DOM
$('#btn')[0]
DOM轉(zhuǎn)換成jQuery
$('dom對(duì)象')
jquery中如何綁定事件帽撑?bind、unbind鞍时、delegate亏拉、live历恐、on、off都有什么作用专筷?推薦使用哪種弱贼?使用on綁定事件使用事件代理的寫法?
bind:為一個(gè)元素綁定一個(gè)或多個(gè)事件磷蛹,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)吮旅。
unbind:為一個(gè)元素解綁其身上所綁定的事件,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)味咳。
delegate:為指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序庇勃,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
live:為被選元素附加一個(gè)或多個(gè)事件處理程序槽驶,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)责嚷。
on和off是以上四種方法的替代品,該方法給 API 帶來(lái)很多便利掂铐,我們推薦使用該方法罕拂,它簡(jiǎn)化了 jQuery 代碼庫(kù)。
on替代了bind全陨,delegate爆班,live
off替代了unbind
<body>
<button id="btn">submit</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('#btn').on('click',function(){
console.log(this)
})
</script>
</body>
事件代理:事件委托或者事件代理,想讓div 下面所有的span綁定事件辱姨,可以把事件綁定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
jquery 如何展示/隱藏元素柿菩?
<body>
<p>nihao</p>
<button id='show'>show</button>
<button id="hide">hide</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
var $p=$('p')
$('#show').on('click',function(){
$p.show();
})
$('#hide').on('click',function(){
$p.hide();
})
</script>
</body>
jquery 動(dòng)畫如何使用?
$(selector).animate(styles,speed,easing,callback)
<body>
<p style="border:1px solid red";>nihao</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
var $p=$("p")
$p.on('click',function(){
$p.animate({
height:'100px'
},1000)
})
</script>
</body>
如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容雨涛?如何設(shè)置和獲取元素內(nèi)部文本枢舶?
使用$().html()獲取html內(nèi)容,$().text()獲取文本內(nèi)容
括號(hào)里如果有內(nèi)容則為設(shè)置
如果括號(hào)內(nèi)沒(méi)有內(nèi)容則為獲取
<body>
<button id="htm">htm</button>
<button id="text">text</button>
<p><span>hello</span>world</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('#htm').on('click',function(){
console.log($('p').html())
$('p').html('<span>world</span>')
})
$('#text').on('click',function(){
console.log($('p').text())
$('p').text('nihao world')
})
</script>
</body>
如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容替久?如何設(shè)置和獲取元素屬性凉泄?
$().val():獲取表單用戶輸入的值,val()中可以更改值
使用attr()可以設(shè)置元素的屬性侣肄,attr接受兩個(gè)值旧困,第一個(gè)值為元素的屬性,第二個(gè)是屬性的值
<head>
<style>
.col{
border: 2px solid red;
}
</style>
</head>
<body>
<input type="text">
<button id="btn">submit</button>
<button id="add">add</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('#btn').on('click',function(){
console.log($('input').val())
$('input').val('')
})
$('#add').on('click',function(){
$('input').attr('class','col')
})
</script>
</body>