jQuery 能做什么没宾？
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代碼要方便溜嗜，高效的多。
jQuery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別架谎？如何轉(zhuǎn)化炸宵？
- 區(qū)別：
jquery對(duì)象通常用jquery的方法$(’’)來(lái)得到，可以使用jquery提供的方法來(lái)操作html的數(shù)據(jù)
DOM原生對(duì)象只能用js提供的方法谷扣，如getElementById土全，getElementByTagName,有的獲取的是一個(gè)元素，有的獲取的是一個(gè)數(shù)組会涎。 - 轉(zhuǎn)化方法：
普通dom對(duì)象轉(zhuǎn)化成jq對(duì)象的方法
普通的dom對(duì)象的話(huà)只需要用$()包裹一下就好了
var yangchenjian=document.getElementById("yangchenjian"); // 原生獲取
var $yangchenjian = $(yangchenjian)
‘$(yangchenjian) //這就算是把原生的轉(zhuǎn)化成jq對(duì)象了經(jīng)過(guò)轉(zhuǎn)化jq封裝好的api就可以正常使用了’
** jq對(duì)象轉(zhuǎn)化成原生對(duì)象 **
通過(guò)jquery自身提供的.get[index] 這個(gè)方法來(lái)完成轉(zhuǎn)化
var yangchenjian=document.getElementById("yangchenjian");
var $yangchenjian = $(yangchenjian) ;
var yangchenjian = $yangchenjian.get[0]; //完成原生轉(zhuǎn)化
jQuery中如何綁定事件裹匙？bind、unbind末秃、delegate概页、live、on练慕、off都有什么作用惰匙？推薦使用哪種？使用on綁定事件使用事件代理的寫(xiě)法贺待？
- jQuery中如何綁定事件
現(xiàn)在常用的事件代理方法是on方法徽曲，
on(events,[selector],[data],fn)
- events: 觸發(fā)的事件類(lèi)型 點(diǎn)擊 雙擊 等等
- selector: 事件委托的時(shí)候用，用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代
- data: 當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)麸塞。
- fn: 用戶(hù)觸發(fā)后要做的事情是個(gè)函數(shù)方法
----------------------------下面寫(xiě)關(guān)于on的例子-------------------------------
$('p').on('click',function(){
alert('1234')
})
//阻止默認(rèn)事件
$('from').on('submit',function(e){
e.stopPropagation();
})
//事件委托 只有ul內(nèi)部中的li才能觸發(fā)事件p標(biāo)簽是沒(méi)有觸發(fā)效果的
$(document).ready(function () {
function test(e) {
console.log($(this).text())
console.log(e.data.name)
}
$('.yu').on('click.la','li', {name: "楊晨健"},test)
})
</script>
<ul class="yu">
<li>hahha</li>
<li>ahdkada</li>
<li>dadada</li>
<p>adadadadadadada</p>
</ul>
//取消li中的觸發(fā)事件
$('.yu').off('.la')
一定要注意應(yīng)該是.事件名才行秃臣，別忘了帶上‘.’
推薦使用on方法來(lái)完成事件綁定，同時(shí)應(yīng)該記住 .off( events [, selector ] )方法用來(lái)對(duì)應(yīng)on的綁定方法哪工。注意：多個(gè)事件綁定的時(shí)候最好給觸發(fā)事件取一個(gè)名字奥此，這樣解綁事件的時(shí)候不至于一下子全給解綁了 例子：node.on('click.eventname',function(){}) 解綁的時(shí)候就用node.off('.eventname'）
bind 早期的事件綁定方法，現(xiàn)在已經(jīng)被棄用了雁比，unbind是其對(duì)應(yīng)的解綁事件的方法稚虎。
delegate(selector,[type],[data],fn) 用來(lái)執(zhí)行事件委托（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)偎捎。
live(type, [data], fn)蠢终，給所有匹配的元素附加一個(gè)事件處理函數(shù)序攘，即使這個(gè)元素是以后再添加進(jìn)來(lái)的也有效，但是在1.7之后已經(jīng)不被推薦使用了寻拂，如果想添加事件處理就用on方法就好程奠，如果用的是老版本的jq就用delegate來(lái)代替live
jQuery 如何展示/隱藏元素？
show()方法完成元素的展示
hide()方法完成元素的隱藏
<script>
$('.show').on('click',function (){
$('p').show(100)
})
$('.hide').on('click',function () {
// body...
$('p').hide(100)
})
})
</script>
<ul class="yu">
<li>hahha</li>
<li>ahdkada</li>
<li>dadada</li>
<p>adadadadadadada</p>
</ul>
<button class="show">顯示</button>
<button class="hide">隱藏</button>
</body>
</html>
jQuery 動(dòng)畫(huà)如何使用祭钉？
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
button{
padding: 5px;
}
.block{
width: 50px;
height: 50px;
background-color: pink;
position: relative;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<script>
$(document).ready(function () {
var block = $('.block')
var start = $('.start')
var stop = $('.stop')
var reset = $ ('.reset')
start.on('click',function () {
block.animate({
width:'200px',
height:'200px'
},1200,"swing",function () {
console.log('回調(diào)函數(shù) ')
});
block.animate({
left:'400px',
},1200,"swing",function () {
console.log('??移動(dòng) ')
});
block.animate({
left:'0px'
},1200,"swing",function () {
console.log(' ??移動(dòng) ')
});
block.animate({
width:'50px',
height:'50px'
},1200,"swing",function () {
console.log(' 恢復(fù)啦 ')
});
})
reset.on('click',function () {
console.log('復(fù)位啦')
block.finish()
})
stop.on('click',function () {
console.log('停止了正在運(yùn)行的動(dòng)畫(huà)')
block.stop(true,true)
})
})
</script>
<div class="block"></div>
<button class="start">動(dòng)畫(huà)開(kāi)始</button>
<button class="stop">暫停</button>
<button class="reset">復(fù)位</button>
</body>
</html>
如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容瞄沙？如何設(shè)置和獲取元素內(nèi)部文本？
//獲取元素內(nèi)部HTML
$('selector').html()
//獲取元素內(nèi)部文本
$('selector').text()
//設(shè)置元素內(nèi)部HTML
$('selector').html(' 內(nèi)容放在里面 ')
//設(shè)置元素內(nèi)部文本
$('selector').text(' 內(nèi)容放在里面 ')
如何設(shè)置和獲取表單用戶(hù)輸入或者選擇的內(nèi)容慌核？如何設(shè)置和獲取元素屬性距境？
//設(shè)置表單的內(nèi)容
$('selector').val('請(qǐng)輸入您的賬號(hào)')
//設(shè)置元素屬性
$('selector').attr('name','野豬'):設(shè)置該元素中的name屬性值為 野豬;
//獲取用戶(hù)輸入內(nèi)容
$('selector').val()
//獲取元素屬性
$('selector').attr('name'):獲取該元素中的name屬性;
