事件
- 綁定事件：
1）方式一：bind( type,function(){} )
$('#d1').bind('click',function(){//正式寫法柴淘，常用于解決瀏覽器兼容性
$(this).html('hello java');
});
2）方式二（綁定的簡寫形式）：click( function(){} );
$('#d1').click(function(){//簡寫形式
$(this).html('hello java');
});
方法：
1）$ele.click()：不帶任何參數(shù)一般是用來指定觸發(fā)一個事件（手動觸發(fā)）妈踊，用的比較少
2）$ele.click( handler(eventObject) )：每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù)
3）$ele.click( [eventData ], handler(eventObject) )：可以接受一個數(shù)據(jù)參數(shù)名段，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
其他事件有：
鼠標(biāo)相關(guān)：$ele.mousedown/mouseup/mousemove/mouseover/mouseout/mouseenter/mouseleave/hover/focusin/focusout/select()
表單相關(guān)：blur/focus/change/submit()
鍵盤相關(guān)：keydown/keyup/keypress()
【注意：mouseenter事件只會在綁定它的元素上被調(diào)用，而不會在后代節(jié)點上被觸發(fā);
form元素是有默認提交表單的行為官觅，如果通過submit處理的話，需要禁止瀏覽器的這個默認行為傳統(tǒng)的方式是調(diào)用事件對象 e.preventDefault() 來處理期犬， jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可】
on()：多事件綁定叁巨，如：$(“#elem").on("mouseover mouseout",function(){ });或不同的事件綁定不同的函數(shù) ：
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});
//將數(shù)據(jù)傳遞到處理程序
function greet( event ) {
alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
name: "ffff"
}, greet );
—>事件委托：.on( events ,[ selector ] ,[ data ], handler(eventObject) )
<div class="left">
<p class="aaron">
<a>目標(biāo)節(jié)點</a> //點擊在這個元素上
</p>
</div>
$(“div”).on(“click”,"p",fn)//事件綁定在最上層div元素上，當(dāng)用戶觸發(fā)在a元素上吞杭，事件將往上冒泡盏浇，
一直會冒泡在div元素上。如果提供了第二參數(shù)芽狗，那么事件在往上冒泡的過程中遇到了選擇器匹配的元素绢掰，
將會觸發(fā)事件回調(diào)函數(shù)
off()：通過.on綁定事件后，可用.off()移除該綁定童擎。如：$("elem").off("mousedown mouseup”)//移除指定事件滴劲；$(‘ele’).off();//移除所有
合成事件
1）hover(enter,leave)：模擬光標(biāo)懸停事件。
$(function(){ $('.s1').hover(function(){ $(this).addClass('s2');//光標(biāo)進入
},function(){ $(this).removeClass('s2');//光標(biāo)離開 });
});
2）不使用合成事件的方式顾复。
$('.s1').mouseenter(function(){//鼠標(biāo)移入
$(this).addClass('s2');//綁定了mouseenter事件的div
});
$('.s1').mouseleave(function(){//鼠標(biāo)移出
$(this).removeClass('s2');
});
3）toggle(function1(){},function2(){},…)：模擬光標(biāo)連續(xù)單擊事件班挖。
$(function(){
$('a').toggle(function(){
$('#d1').show('slow');},function(){
$('#d1').hide('slow');
});
});
事件冒泡
1）概述：子節(jié)點產(chǎn)生的事件，會依次向上拋出給相應(yīng)的父節(jié)點芯砸。
2）取消冒泡：使用event對象萧芙，e.cancelBubble=true;
事件處理：
1）獲得事件對象
click(function(e){ //e：對底層的事件對象做了一個封裝 });
2）事件對象的屬性：
①event.type：事件類型
②event.target：返回事件源（是DOM對象）
③event.pageX/pageY：返回點擊的坐標(biāo)
④event.which：獲取鼠單擊時的按下的哪個鍵⑤event.currentTarget：在事件冒泡過程中的當(dāng)前DOM元素【注意：this和event.target的區(qū)別：js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標(biāo)DOM元素稀蟋；】
3）停止冒泡：event.stopPropagation()
4）停止默認行為：event.preventDefault()【注意：原來的寫法為<a href="del.do" onclick="return false"></a>】
5）模擬操作（自定義事件）：
.trigger(‘click’)：可傳遞參數(shù)囊拜，如；$(‘#elem’).trigger(‘onbindEle’,[‘參數(shù)1’,'參數(shù)2'])
.triggerHandler()：可觸發(fā)通過jQuery綁定的事件,而不會觸發(fā)系統(tǒng)事件郑口。且只影響第一個匹配到的元素；
不會向上冒泡，若不是由目標(biāo)元素直接觸發(fā)擎场，則不會調(diào)用(.trigger與此相反)；返回最后一個處理的事件返回值几莽，若沒有觸發(fā)則返回underfined.*
動畫
1）show()/hide()：
①作用：通過同時改變元素的“寬度”和“高度”來實現(xiàn)顯示或隱藏迅办。
②用法：show(速度,[回調(diào)函數(shù)]); （hide同理）
A.回調(diào)函數(shù)：整個動畫執(zhí)行完畢之后，會執(zhí)行該函數(shù)章蚣。
B.速度：'slow'站欺，'fast'姨夹，'normal' 或者使用毫秒數(shù)。slow=600,fast=200,narmal=400
【注意：show/hide是修改display的屬性矾策，通過visibility屬性布局的需要單獨設(shè)置磷账；若設(shè)置了!important,必須使用.css(‘display’,’block !important’)來讓show()生效】* .toggle(duration,func)：互斥的方法(從右至左，橫向動作)贾虽，相當(dāng)于：
if ( display === true ) {
$( "elem" ).show();
} else if ( display === false ) {
$( "elem" ).hide();
}
可用 .toggle()來替換
2）slideUp()/slideDown()
①作用：通過同時改變元素的“高度”來實現(xiàn)顯示或隱藏逃糟。即上滑/滑動動畫
②用法：同上。
slideToggle()：同toggle()蓬豁，從上到下绰咽，豎向動作。用于slideUp/slideDown()
3）fadeIn()/fadeOut()
①作用：通過改變元素的不透明度來實現(xiàn)顯示或隱藏地粪。0透明0.5半透明1不透明（用法同上）
fadeToggle()：同toggle()取募，用于fadeIn/fadeOut
fadeTo(duration,opacity,callback)：指定透明度變化的目標(biāo)值opacity.
4）自定義動畫animate(params,speed,[callback])
①params：是一個JavaScript對象，描述動畫執(zhí)行結(jié)束之后元素的樣式蟆技，比如：{'height':'200px'}
②speed：速度玩敏，只能用毫秒數(shù)。
③callback：回調(diào)函數(shù)质礼。
$aaron.animate({
width : “+=100px”,//或者width: “toggle" width : "+=100px"
fontSize: “5em”旺聚，
opacity: 'show', //或者： opacity: ‘0.5',
});
.animate(properties,options)：可觀察動畫的一些執(zhí)行情況，或在動畫進行中的某一時刻進行一些其他處理几苍。參數(shù)：
- duration - 設(shè)置動畫執(zhí)行的時間
- easing - 規(guī)定要使用的 easing 函數(shù)翻屈，過渡使用哪種緩動函數(shù)
- step：規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
- progress：每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào)，就是一個進度的概念
- complete：動畫完成回調(diào)
$aaron.animate({height: '50'}, {
duration :2000,
//每一個動畫都會調(diào)用
step: function(now, fx) {
$aaron.text('高度的改變值:'+now)
}
})
$aaron.animate({ height: '50'}, {
duration :2000,
//每一步動畫完成后調(diào)用的一個函數(shù)妻坝，
//無論動畫屬性有多少伸眶，每個動畫元素都執(zhí)行單獨的函數(shù)
progress: function(now, fx) {
$aaron.text('進度:'+arguments[1])
}
})
stop()：停止當(dāng)前動畫；
- .stop(true)：如果同一元素調(diào)用多個動畫方法刽宪，尚未被執(zhí)行的動畫被放置在元素的效果隊列中厘贼。這些動畫不會開始，直到第一個完成圣拄。
- .stop(true,true)：當(dāng)前動畫將停止嘴秸，但該元素上的 CSS 屬性會被立刻修改成動畫的目標(biāo)值
類數(shù)組的操作
jQuery對象里面可能包含多個DOM對象，所謂類數(shù)組庇谆，指的就是這些DOM對象岳掐。
1）each(function(i))：循環(huán)遍歷每一個元素，this代表被遍歷的DOM對象饭耳，$(this)代表被迭代的jQuery對象串述，i代表正在被遍歷的那個對象的下標(biāo)。下標(biāo)從0開始寞肖。
如：$obj.each(function(i){//i：表示正在被遍歷的那個節(jié)點的下標(biāo)纲酗，下標(biāo)從0開始
2）eq(index)：返回index位置處的jQuery對象衰腌。
3）index(obj)：返回下標(biāo)，其中obj可以是DOM對象或者jQuery對象觅赊。
4）length屬性：獲得jQuery對象包含的DOM對象的個數(shù)右蕊。
5）get()：返回DOM對象組成的數(shù)組。
6）get(index)：返回第index個DOM對象吮螺。支持負索引值饶囚，即從后向前開始
7）inArray(value,array,[fromIndex])：在數(shù)組中查找是否存在，并可指定起始位置规脸；返回value在array中的索引坯约，沒有則返回-1.
8）trim()：同java中的trim()，用于去空格莫鸭。
數(shù)據(jù)存儲
主要是針對HTML5 dataset的簡化操作。
- $.data(element,’key’,’value’)：靜態(tài)接口横殴，存數(shù)據(jù)
- $.data(element,’key’)：靜態(tài)接口被因，取數(shù)據(jù)
- ele.data(‘key’,’value’)：實例接口，存數(shù)據(jù)
- ele.data(key)：實例接口衫仑，取數(shù)據(jù)
將JavaScript與HTML分開
目的是使用行為與數(shù)據(jù)分開梨与。
博客地址：Web基礎(chǔ)之jQuery（二）
