jQuery事件處理，鼠標的單擊，雙擊，懸停，鍵盤按鍵，文本動畫.....
此章節有
1.1被點擊的按鈕查找
一個頁面上有很多按鈕，對應不同的功能，一個按鈕對應一個事件，說到底就是給每個按鈕綁定一個事件。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery</title> <link href="css/css.css" rel="stylesheet" type="text/css" /> <script src="script/jquery-1.4.1.js" type="text/javascript"></script> <script src="script/js.js" type="text/javascript"></script> </head> <body> <span class="buttons bold">Bold</span> <span class="buttons italic">Italic</span> </body> </html>
使用bind()方法為按鈕添加單擊事件
$(document).ready(function () { //bold click事件 $(".bold").bind("click", function () { alert("You clicked the bold button!"); }); //bold click事件 $(".italic").bind("click", function () { alert("You clicked the italic button!"); }); });
現在要把單擊事件添加到button，並不是單獨為每一個按鈕綁定添加點擊事件
$(document).ready(function () { $(".buttons").bind("click", function () { alert("You clicked the " + $(this).text() + " button"); }); });
不使用bind()方法也可以直接為指定的任何元素添加事件
$(document).ready(function () { //bold click事件 $(".bold").click(function () { alert("You clicked the bold button!"); }); //bold click事件 $(".italic").click(function () { alert("You clicked the italic button!"); }); });
利用事件對象的目標屬性
事件對象包含事件細節，JavaScript把事件對象自動發送到事件處理函數。事件對象的其中一個屬性稱為(target)目標，利用這個屬性我們可以知道在哪個元素上發生了事件。
$(document).ready(function () { $(".buttons").click(function (event) { //event 事件對象 var target = $(event.target); //event.target ==> span.buttons（classname） if (target.is(".bold")) { //是否有bold的class alert("You clicked the bold button."); } if (target.is(".italic")) { alert("You clicked the italic button."); } }); });
注：如果一個元素上有多個classname的話，event.target只取第一個
雙擊事件的綁定，和也上面一樣，只是把click關鍵字換成dblclick
$(document).ready(function () { //bold dblclick事件 $(".bold").bind("dblclick", function () { alert("You clicked the bold button!"); }); //bold dblclick事件 $(".italic").bind("dblclick", function () { alert("You clicked the italic button!"); }); });
在這一段，主要用到了
事件的綁定方法bind(eventType ， data ，hanlder) 將事件附加到指定的元素上
單擊事件的綁定click(handler)
雙擊事件的綁定dblclick(handler)
1.2事件的自動觸發
有的時候，事件的觸發，需要自動式的，而不是手動點擊或者其他操作觸發，這個時候就要用到trigger()方法了。
$(document).ready(function () { $(".buttons").bind("click", function () { alert("You clicked the " + $(this).text() + " button"); }); $(".bold").trigger("click"); //觸發 });
觸發事件的方法trigger(eventType) eventType為字符串類型
1.3點擊之后禁用按鈕
有的時候，我們希望事件只觸發一次，比如提交按鈕被點擊一次之后，我們想要禁用該按鈕。
$(document).ready(function () { $(".buttons").bind("click", function () { alert("You clicked the " + $(this).text() + " button"); $(this).unbind("click"); //刪除click單擊事件 }); });
unbind()從指定的元素中刪除先前綁定的事件處理函數
unbind()
unbind(eventType)
unbind(eventType,handler)
如果不傳入任何參數，所有的事件將被刪除
另一種方法 使用one方法
當點擊 p 元素時，增加該元素的文本大小
<body> <p>這是一個段落。</p> <p>這是另一個段落。</p> <p>請點擊 p 元素增加其內容的文本大小。每個 p 元素只會觸發一次改事件。</p> </body>
$(document).ready(function(){ $("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); }); });
one() 方法為被選元素附加一個或多個事件處理程序，並規定當事件發生時運行的函數。
當使用 one() 方法時，每個元素只能運行一次事件處理器函數。
one(event,data,function)
event 必需。規定添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
data 可選。規定傳遞到函數的額外數據。
function 必需。規定當事件發生時運行的函數。
1.4鼠標事件
鼠標除了單擊雙擊事件，還有懸浮
mouseup() 鼠標抬起時候觸發，不分鼠標左右鍵，和click不同的是，click只能是左鍵點擊觸發
$(document).ready(function () { $(".buttons").bind("mouseup", function () { alert("You clicked the " + $(this).text() + " button"); }); });
mousedown() 鼠標按下時候觸發，不分鼠標左右鍵，和click不同的是，click只能是左鍵點擊觸發
$(document).ready(function () { $(".buttons").bind("mousedown", function () { alert("You clicked the " + $(this).text() + " button"); }); });
mouseover() 鼠標指針進入特定區域，觸發
$(document).ready(function () { $(".buttons").bind("mouseover", function () { alert("You get in the " + $(this).text() + " button area."); }); });
mouseout() 鼠標指針離開特定區域，觸發
$(document).ready(function () { $(".buttons").bind("mouseout", function () { alert("You get out the " + $(this).text() + " button area."); }); });
判斷左右鼠標鍵的點擊
假如，一個頁面上有一個按鈕，鼠標左鍵右鍵分別做不同的事，如果判斷鼠標的左右鍵呢。利用事件對象屬性。
$(document).ready(function () { $(".buttons").mousedown(function (event) { var theKey = event.button; if (theKey == 0) { alert("左鍵") } else if (theKey == 1) { alert("滾輪點擊"); } else { alert("右鍵"); } }); });
顯示鼠標指針的屏幕坐標
$(document).ready(function () { $(".div").mousedown(function (event) { var xpoint = event.screenX; //橫坐標 var ypoint = event.screenY; //縱坐標 $("p").html("X坐標：" + xpoint + "<br/>Y坐標：" + ypoint); }); });
文字顯示動態突出
當鼠標在一行中的某個，某幾個字體上滑過的時候，突出字突然加大，移走時候回復原來大小。
$(document).ready(function () { $("span").mouseover(function () { //到達匹配元素的上方，改變css樣式 $(this).css({ 'font-weight': 'bold', 'font-size': 'large' }); }); $("span").mouseout(function () { //鼠標離開，css樣式還原 $(this).css({ 'font-weight': 'normal', 'font-size': 'inherit' }); }); });
主要方法是css() , 用於將css屬性直接應用到HTML元素
css(property,value)
還有一個經常應用到圖片上的效果，當鼠標放在圖片上，圖片加大，移出后還原
$(document).ready(function () { $(".img").mouseover(function () { $(this).css("height", function () { return $(this).height() + 50 }); $(this).css("width", function () { return $(this).width() + 50 }); }); $(".img").mouseout(function () { $(this).css("height", function () { return $(this).height() - 50 }); $(this).css("width", function () { return $(this).width() - 50 }); }); });
或者可以換一個寫法，使用hover、addClass、removeClass
hover(handler1,handler2) 把兩個事件附加到指定元素，一個處理鼠標指針進入，一個處理鼠標指針離開元素時觸發
$(document).ready(function () { $(".img").hover(mouseover, mouseout); function mouseover() { $(this).css("height", function () { return $(this).height() + 50 }); $(this).css("width", function () { return $(this).width() + 50 }); } function mouseout() { $(this).css("height", function () { return $(this).height() - 50 }); $(this).css("width", function () { return $(this).width() - 50 }); } });
or
$(document).ready(function () { $(".img").hover(mouseover, mouseout); function mouseover() { $(this).addClass("imgAdd"); } function mouseout() { $(this).removeClass("imgAdd"); } });
圖片設置透明度
$(document).ready(function () { $(".img").css("opacity", 0.2); //設置透明度 $(".img").mouseover(function () { //放大 $(".img").css("opacity", 1.0); //清晰 $(this).css("height", function () { return $(this).height() + 50 }); $(this).css("width", function () { return $(this).width() + 50 }); }); $(".img").mouseout(function () { //還原 $(".img").css("opacity", 0.2); $(this).css("height", function () { return $(this).height() - 50 }); $(this).css("width", function () { return $(this).width() - 50 }); }); });
1.5焦點事件
元素得到失去焦點的時候觸發
$(document).ready(function () { $(".input").focus(function () { //得到焦點 $("p").html("請填寫。"); }); $(".input").blur(function () { //失去焦點 $("p").html(""); }); });
1.6CSS的操作
之前的 css(property,value)、addClass("className")、removeClass("className")都是對css的操作
還有一個toggleClass()方法，利用toggleClass()方法刪除或應用一個css類，如果指定元素已經應用了這個css類，使用toggleClass()方法將會把它刪除，如果沒有應用，那么將為指定的元素應用css類
js
$(document).ready(function () { $("#click").click(function () { $("#set").toggleClass("red"); }); });
html
<span id="click" class="buttons">Click</span> <span id="set" class="buttons">Set</span>
css
.buttons { width: 100px; float: left; text-align: center; margin: 5px; border: 2px solid; } .red { background-color: Red; }
與之差不多的一個方法是toggle()此方法為指定的元素附加兩個事件處理函數。第一個事件在事件偶數次發生時執行，而第二個 事件處理函數在事件在奇數數次發生執行，從0開始計數。
toggle(handler1,handler2)
如此，上面切換樣式的方法可改成
$(document).ready(function () { $("#set").toggle(function () { $("#set").addClass("red"); }, function () { $("#set").removeClass("red"); }); });
樣式的切換
<span id="bold" class="buttons">bold</span> <span id="italic" class="buttons">italic</span> <br /><br /> <div> This is a test！ </div>
$(document).ready(function () { //鼠標懸浮 $(".buttons").hover(function () { $(this).addClass("sethover"); }, function () { $(this).removeClass("sethover"); }); //bold $("#bold").click(function () { $("div").addClass("bold"); $("div").removeClass("italic"); }); //italic $("#italic").click(function () { $("div").addClass("italic"); $("div").removeClass("bold"); }); });
樣式切換，氣泡對話框
css
.buttons { width: 100px; float: left; text-align: center; margin: 5px; border: 2px solid; } .hover1 { width:200px; height:100px; color: Red; background-image: url(../image/3.png); background-repeat: no-repeat; background-position: bottom; }
html
<body> <span id="bold" class="buttons">bold</span> <span id="italic" class="buttons">italic</span> <span class="hover1"></span> </body>
js
$(document).ready(function () { //鼠標懸浮 $(".buttons").hover(function (event) { $(this).addClass("hover1"); var txt = $(this).text(); $("<span class='showtip'><br/><br/>This is " + txt + " menu<span>").appendTo($(this)); }, function () { $(this).removeClass("hover1"); $(".showtip").remove(); }); });
1.7元素創建
在一個元素前，或后插入另外的元素，可以用到after、before、append、appendTo、prepend、prependTo(更多方法與區別)，移除可以用remove()方法.
after、before 同等級插入，無嵌套關系 after例子： $("p").after("<p> Hello world!</p> "); <p>標桿</p> <p> Hello world!</p> before例子 <p> Hello world!</p> <p>標桿</p> append、appendTo 有嵌套 后面開始 $("p").append("<b>Hello world!</b>");向匹配p元素集合中的每個元素結尾插入由參數指定的內容,會嵌套在內部<p><b>Hello world!</b></p> $("<b>Hello world!</b>").appendTo("p");向目標結尾插入匹配元素集合中的每個元素。會嵌套在內部,與append只是語法不一樣。 prepend、prependTo 有嵌套 前面開始 $("p").prepend('<h2>插入元素h2</h2>');向匹配元素集合中的每個元素開頭插入由參數指定的內容。插入的元素為<p>的下級 $('<h2>插入元素h2</h2>').prependTo("p");向目標開頭插入匹配元素集合中的每個元素。插入的元素為<p>的下級
$(document).ready(function () { $("#add").click(function () { $("div").prepend("<p>this is a test p .</p>"); }); $("#remove").click(function () { $("p").remove(); }); });
創建“返回頂部”連接
如果一篇文章很長，想回到頂部，總是要滑動鼠標滾軸，或按home鍵盤，太麻煩，我們需要頁面上有一個圖片或文字直接點擊到頭部。
html
<body> <p> 是樹的不挽留，還是葉的無情；是時間的摧殘，還是風的誘惑。<br /> <br /> 葉終歸還是毅然絕然的離開了樹的懷抱，投奔向了它早已心有所屬的大自然，可等到它被自然摧殘的面目全非再無昔日的生機時，是否會懷念曾經留在樹懷抱時的美好。<br /> --題。<br /> </p> <p> 塵世中，每一次的轉身都可能是一輩子，每一次的別離都可能是永遠，每一次的錯過都可能是過去。<br /> 所以，我很珍惜每一次偶遇的美妙，每一次重逢的喜悅，每一次機會的把握。<br /> </p> <p> 愛，曾經歡喜地來到過我的世界，但最終卻又無情的離我而去。<br /> 有人說過“愛情里，傷的最深的永遠是那個不願放手的人”。<br /> 確實，最初幾年，以前的點滴依舊會清晰的出現在我的腦海。<br /> 在每次經過那相遇的地點時，在孤身一人漫步在夕陽下時，在每次從外回家時，都會想起那個曾經深愛過的你。<br /> </p> <p> 心，傷過一次，便害怕再次受傷，以至於時隔幾年都不敢再去觸碰愛的邊緣，只想孤獨的靜待緣分的到來。<br /> </p> <p> 大學畢業，來了外地工作，曾有很多人都問我，你咋跑那么遠的地方來上班。<br /> 我當時都笑着回答說：“在家鄉呆久了，出來逛逛，看看大海看看雪。<br /> ”可有誰知道，在表面微笑的內在里，這其實是一個懦弱與逃避的謊言，逃避那個曾經的傷城，想離那個地方越遠越好，不管去哪兒只要不在那個城，想靠時間和空間來淡化那段已逝去的初戀情懷。<br /> </p> <p> 張嘉佳說的好，初戀永遠是一個人的兵荒馬亂，總是承諾的很多，實現的卻很少。<br /> 我們面對面越走越遠，肩並肩悄然失散。<br /> 記得有段時間，每次接到你的電話，或是不小心聽到關於你的消息，心都會盪起無聲的漣漪，思緒總是會隨着你那動人的聲音回到過去，回到那個有你的年歲。<br /> </p> <p> 我仿佛又看到那頭長發在風中微微盪起，那副紅色鏡框的眼鏡依舊調皮的橫躺在你微高的鼻梁上，那櫻桃般的小嘴在你瓜子型的臉蛋上略微的鼓起，那會說話的大眼睛俏皮的盯着我……</p> <p> 可現實總是這么殘酷，回憶的思緒也是那么的虛無縹緲，都頂不過電話那頭你的聲音。<br /> 你說有事，晚會兒再聊，於是通話很快便結束了。<br /> 我把平時設置成靜音的手機又調成了很長一段時間都不曾聽到的鬧鈴，可是第二天還是換成了靜音…</p> <p> 一生中，遇見的人很多，住在心里的卻很少。<br /> 可總有那么少數的人，讓你遇見，就得用一生的時間去忘記。<br /> 我想對大多數人來說，那個人應該就是初戀吧。<br /> </p> <p> 時間最是公正與無情，不過也是最有效的療傷葯，就算是那顆曾已千瘡百孔的心，它都能治愈。<br /> 時至今日我終於不在像當初那般想起那個曾經的你就心痛，只是將它當成美好的回憶藏在心里最深處，讓它與青春作伴。<br /> 或者說將有你的時光像釀酒一般封存，深埋地底，待多年以后再細細品嘗。<br /> </p> <p> 我很感謝你曾經來到過我的世界，在我最青春年少時。<br /> 現在我已行走在青春的末端，正慢慢的變得成熟，穩重，再不像以前那般浮躁，心有不平便拔劍四起。<br /> 這樣寫，有點顯老。<br /> 呵，不過成長的途中，老就老點吧。<br /> </p> <p> 一段情，一塵往事，漸行漸遠；一個人，一段青春，且行且惜。<br /> </p> <p> 末了，祝你我各自的未來安好。<br /> 祝天下有情人總成眷屬！</p> <p> 謹以此文，獻給自己快要走完的青春。<br /> </p> </body>
js
$(document).ready(function () { $("<a href='#topofpage'>Return to top</a>").insertAfter('p'); $("<a name='topofpage'></a>").prependTo('body'); });
在這里主要是應用到了insertAfter()方法，把匹配的元素插入到另一個指定的元素集合的后面。與insertBefore()函數對應。同等級不包含
1.8動畫隱藏和展示
“更多”連接的顯示與隱藏
css
.sethover { /*background-color: cyan;*/ cursor: pointer; }
html
<body> <div> 是樹的不挽留.....<span class="readMore">ReadMore</span></div> <div class="divShow"> <p> 是樹的不挽留，還是葉的無情；是時間的摧殘，還是風的誘惑。<br /> <br /> 葉終歸還是毅然絕然的離開了樹的懷抱，投奔向了它早已心有所屬的大自然，可等到它被自然摧殘的面目全非再無昔日的生機時，是否會懷念曾經留在樹懷抱時的美好。<br /> --題。<br /> </p> <p> 塵世中，每一次的轉身都可能是一輩子，每一次的別離都可能是永遠，每一次的錯過都可能是過去。<br /> 所以，我很珍惜每一次偶遇的美妙，每一次重逢的喜悅，每一次機會的把握。<br /> </p> <p> 愛，曾經歡喜地來到過我的世界，但最終卻又無情的離我而去。<br /> 有人說過“愛情里，傷的最深的永遠是那個不願放手的人”。<br /> 確實，最初幾年，以前的點滴依舊會清晰的出現在我的腦海。<br /> 在每次經過那相遇的地點時，在孤身一人漫步在夕陽下時，在每次從外回家時，都會想起那個曾經深愛過的你。<br /> </p> <p> 心，傷過一次，便害怕再次受傷，以至於時隔幾年都不敢再去觸碰愛的邊緣，只想孤獨的靜待緣分的到來。<br /> </p> <p> 大學畢業，來了外地工作，曾有很多人都問我，你咋跑那么遠的地方來上班。<br /> 我當時都笑着回答說：“在家鄉呆久了，出來逛逛，看看大海看看雪。<br /> ”可有誰知道，在表面微笑的內在里，這其實是一個懦弱與逃避的謊言，逃避那個曾經的傷城，想離那個地方越遠越好，不管去哪兒只要不在那個城，想靠時間和空間來淡化那段已逝去的初戀情懷。<br /> </p> <p> 張嘉佳說的好，初戀永遠是一個人的兵荒馬亂，總是承諾的很多，實現的卻很少。<br /> 我們面對面越走越遠，肩並肩悄然失散。<br /> 記得有段時間，每次接到你的電話，或是不小心聽到關於你的消息，心都會盪起無聲的漣漪，思緒總是會隨着你那動人的聲音回到過去，回到那個有你的年歲。<br /> </p> <p> 我仿佛又看到那頭長發在風中微微盪起，那副紅色鏡框的眼鏡依舊調皮的橫躺在你微高的鼻梁上，那櫻桃般的小嘴在你瓜子型的臉蛋上略微的鼓起，那會說話的大眼睛俏皮的盯着我……</p> <p> 可現實總是這么殘酷，回憶的思緒也是那么的虛無縹緲，都頂不過電話那頭你的聲音。<br /> 你說有事，晚會兒再聊，於是通話很快便結束了。<br /> 我把平時設置成靜音的手機又調成了很長一段時間都不曾聽到的鬧鈴，可是第二天還是換成了靜音…</p> <p> 一生中，遇見的人很多，住在心里的卻很少。<br /> 可總有那么少數的人，讓你遇見，就得用一生的時間去忘記。<br /> 我想對大多數人來說，那個人應該就是初戀吧。<br /> </p> <p> 時間最是公正與無情，不過也是最有效的療傷葯，就算是那顆曾已千瘡百孔的心，它都能治愈。<br /> 時至今日我終於不在像當初那般想起那個曾經的你就心痛，只是將它當成美好的回憶藏在心里最深處，讓它與青春作伴。<br /> 或者說將有你的時光像釀酒一般封存，深埋地底，待多年以后再細細品嘗。<br /> </p> <p> 我很感謝你曾經來到過我的世界，在我最青春年少時。<br /> 現在我已行走在青春的末端，正慢慢的變得成熟，穩重，再不像以前那般浮躁，心有不平便拔劍四起。<br /> 這樣寫，有點顯老。<br /> 呵，不過成長的途中，老就老點吧。<br /> </p> <p> 一段情，一塵往事，漸行漸遠；一個人，一段青春，且行且惜。<br /> </p> <p> 末了，祝你我各自的未來安好。<br /> 祝天下有情人總成眷屬！</p> <p> 謹以此文，獻給自己快要走完的青春。<br /> </p> </div>
js
$(document).ready(function () { //懸浮 $(".readMore").hover( function () { $(this).addClass("sethover"); }, function () { $(this).removeClass("sethover"); } ); //隱藏和顯示 $(".readMore").toggle(function () { $(".divShow").show("show"); }, function () { $(".divShow").hide("show"); }); });
這里主要是用到了show()和hide()方法,
show()使指定的隱藏元素可見 show(speed,callback),speed 以毫秒為單位，也可以使用指定的字符串 'slow'=600ms , 'normal' =400ms ,'fast' =200ms,如果省略，默認的就是normal
callback 回調，當動畫完成時調用的函數
hide(speed,callback)作用功能和show()相反.
還有兩個漸顯，漸隱的方法是 fadeIn(speed,callback) 和fadeOut(speed,callback),它們是改變字體透明度而實現的。
1.9效果
文本滑動效果
html
<body> <p id="message1">jQuery is an pen source project</p> <p id="message2">jQuery is an pen source project</p> </body>
js
$(document).ready(function () { $("p#message1").css({ "border": "2px solid", "text-align": "center", "font-weight": "bold" }).hide().click(function () { $(this).slideUp("slow"); //消失 $("p#message2").slideDown("slow"); //滑動顯示 }); $("p#message2").css({ "backgroundColor": "#f00", "color": "#fff", "text-align": "center", "font-weight": "bold" }).click(function () { $(this).slideUp("slow"); //消失 $("p#message1").slideDown("slow"); //滑動顯示 }); });
首先利用css()方法，給message1、message2添加了不同的樣式，然后將其中一個隱藏，再為每個p標簽添加點擊事件，利用slideUp()、和slideDown()。
slideDown(speed，callback) 以滑動效果來逐漸顯示選定元素。
speed 指定動畫的持續時間，可以指定字符串fast、normal、slow或者毫秒，毫秒越大，動畫持續越長。
callback是動畫完成后調用的函數。
slideUp(speed，callback) 以活動效果逐漸使選定元素消失不可見。
圖像滾動效果
首先，將img的position設置為relative
img { position: relative; }
然后利用animate()方法使它移動，移動到距左邊距600px的地方
$(document).ready(function () { //點擊圖片，圖片想右邊移動600px距離 $("img").click(function () { $(this).animate({ left: 600 }, "slow"); }); });
animate() 根據指定的css屬性和使用緩和參數來控制自定義動畫
animate(properties,speed,easing,callback)
properties css 屬性 {left:300}
speed 動畫持續時間 slow、normal、fast 、xxms
easing （緩和）是一個函數（可選），控制動畫隨着時間如何進行。它需要一個插件。有兩個緩和函數：linear（線性），swing（擺動）。默認swing。
callback 回調
點擊橫移，再回去
自動
$(document).ready(function () { //點擊圖片 $("img").click(function () { $(this).animate({ left: 600 }, "slow", function () { $(this).animate({ left: 0 }, "slow"); }); //圖片向右邊移動600px距離,之后回到原來位置 }); });
點擊
$(document).ready(function () { //點擊圖片，圖片向右邊移動600px距離，再點擊回到原位 $("img").toggle(function () { $(this).animate({ left: 600 }, "fast"); }, function () { $(this).animate({ left: 0 }, "slow"); }); });
移動后隱藏
$(document).ready(function () { //點擊圖片，圖片向右邊移動600px距離 $("img").click(function () { $(this).animate({ left: 600 }, "slow"); $(this).slideUp("slow"); //移動后隱藏 }); });
移動后淡出
$(document).ready(function () { //點擊圖片 $("img").click(function () { $(this).animate({ left: 600 }, "slow"); //圖片向右邊移動600px距離 $(this).fadeTo("slow", 0.2); //移動后降低透明度 //$(this).fadeOut("slow"); //移動后談出 等於 $(this).fadeTo("slow", 0); }); });
fadeTo() 和 fadeOut() 作用都是一樣的 ，都是控制圖片的談出，不過fadeTo()比fadeOut的好處是，前者可以控制透明度，而后者直接將透明度設置了0
fadeTo(speed,opacity,callback) 調整選定元素的不透明度
speed 持續時間，時間越大持續越久
opacity 透明度 數值介於 0 -1
使圖像一邊滾一邊變大
$(document).ready(function () { //點擊圖片 $("img").toggle( function () { $(this).animate({ left: 1100, height: $(this).height() * 2, width: $(this).width() * 2 }, "slow"); }, function () { $(this).animate({ left: 0, height: 100, width: 100 }, "slow"); }); });
使圖像滾動到右側在向左滾動
$(document).ready(function () { //點擊圖片 $("img").click( function () { $(this).animate({ left: 1200 }, "slow", function () { //向右邊慢慢滑動1200px $(this).fadeTo("slow", 0); //淡出 $(this).fadeTo("slow", 1); //淡入 $(this).animate({ left: 0 }, "slow"); //回到起始位置 }); }); });
1.10 鍵盤輸入控制
監控鍵盤事件 keypress()、keydown()、keyup()
html
<body> <input type="text" class="infobox" /> <p></p> </body>
js
$(document).ready(function () { $(".infobox").keypress(function (event) { //鍵盤按下事件 $("p").text(String.fromCharCode(event.keyCode)); //字符 FF沒反應... //$("p").text(event.charCode); //ASCII }); });
keypress()和keydown()的區別：
如果用戶反復按任意鍵，按下然后保持按下狀態，keydown()事件只執行一次，而keypress()事件則是每插入一個字符就執行一次（keydown()的持續時間更長一些）
此外，修改Shift鍵、Ctrl鍵等為keydown()所識別，而這些修改鍵不會觸發keypress()事件。
1.11防止事件冒泡
什么是事件冒泡？看代碼。
html
<body> <div> Div Element <p> Paragraph Element <span>Span Element</span> </p> </div> </body>
js
$(document).ready(function () { $("div").click(function () { alert("You click the div element"); }); $("p").click(function () { alert("You click the paragraph element"); }); $("span").click(function () { alert("You click the span element"); }); });
三個元素嵌套 <div<p<span ,三個元素都附加了點擊事件，
當點擊span時，首先彈出警告框的是 “You click the span element ”、再“You click the paragraph element”然后“You click the div element”
當點擊p標簽元素時候，彈框的是“You click the paragraph element”然后“You click the div element”
當點擊div元素時候，彈框的是“You click the div element”
當任何元素上發生事件時，事件處理機制首先檢查該元素是否附加了事件方法（以及事件處理函數）。如果是，就執行（附加的事件方法的）事件處理函數的語句。在此之后，事件處理機制繼續檢查該元素的親節點，看是否附加了事件方法，如果是，也會執行其事件處理函數，直到DOM根節點。
利用事件屬性，稍作修改
$(document).ready(function () { $("div").click(function (event) { var target = $(event.target); if (target.is("div")) { alert("You click the div element"); } else if (target.is("p")) { alert("You click the paragraph element"); } else if (target.is("span")) { alert("You click the span element"); } }); });
小結
此篇記錄了各種不同鼠標事件和鍵盤事件（單擊、雙擊、按鍵keypress等），幾種文字圖片效果（淡入，淡出，上滑、下滑等）最后總結一下所以用到的事件和方法。
1.bind() 綁定事件 --click、dblclick...
$(".bold").bind("click", function () {
alert("You clicked the bold button!");
});
2.event 事件對象 function (event){...}
3.trigger(eventType)方法 觸發事件
$(".bold").trigger("click"); //觸發
4.unbind()方法 從指定的元素中刪除先前綁定的事件處理函數
$(this).unbind("click"); //刪除click單擊事件
CSS處理方法
5.css(property,value)方法 將css屬性直接應用到HTML元素
$(this).css({ 'font-weight': 'normal', 'font-size': 'inherit' }); $(".img").css("opacity", 0.2); //設置透明度
6.addClass("className")
7.removeClass("className")
8.toggleClass()方法 刪除或應用一個css類
9.toggle()方法 為指定的元素附加兩個事件處理函數。
10.元素創建:after、before、append、appendTo、prepend、prependTo...
動畫效果
show()和hide()顯示與隱藏
fadeIn(speed,callback) 和fadeOut(speed,callback)漸隱和漸顯
fadeTo(speed,opacity,callback) 調整選定元素的不透明度
slideDown(speed，callback) 以滑動效果來逐漸顯示選定元素
slideUp(speed，callback) 以活動效果逐漸使選定元素消失不可見。
animate(properties,speed,easing,callback)根據指定的css屬性和使用緩和參數來控制自定義動畫
鼠標事件
mousedown() 鼠標按下時候觸發，不分鼠標左右鍵，和click不同的是，click只能是左鍵點擊觸發
mouseover() 鼠標指針進入特定區域，觸發
mouseout() 鼠標指針離開特定區域，觸發
hover(handler1,handler2) 把兩個事件附加到指定元素，一個處理鼠標指針進入，一個處理鼠標指針離開元素時觸發
鍵盤事件
keypress()、keydown()、keyup()
焦點事件
focus()得到焦點事件
blur()失去焦點事件
事件冒泡
jQuery系列鏈接匯總