การใช้ jQuery จัดการอีเวนต์
อีเวนต์ .click() ผู้ใช้คลิกเอลิเมนต์ที่กำหนดอีเวนต์ไว้จะมีการรันคำสั่งที่เขียนไว้รองรับ
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> <style> .red{ background-color:red; width:400px; height:300px; color:white; } .blue{ background-color:blue; </style> </head> <body> <div id="myData" class="red blue">Click Me!!</div> <script> $("#myData").click(function() { $(this).toggleClass("blue"); }); </script> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> </head> <body> <form> <table> <tr><td colspan="2" align="center">Student Info</td></tr> <tr><td>Name</td><td><input type="text" name="std_name" id="std_name"></td></tr> <tr><td>Last name</td><td><input type="text" name="std_lastname" id="std_lastname"></td></tr> <tr><td colspan="2"><input type="button" name="std_show" id="std_show" value="Show"></td></tr> <tr><td colspan="2"><div id="myData"></div></td></tr> </table> </form> <script> $(document).ready(function() { myShow(); }); function myShow(){ $("#std_show").click(function() { var std_name = $("#std_name").val(); var std_lastname = $("#std_lastname").val(); $("#myData").html( 'Name : '+ std_name +'<br>'+ 'Last Name : '+std_lastname+'<br>' ); } </script> </body> </html>
อีเวนต์ .dbclick() ใช้ตรวจสอบการดับเบิลคลิกในพื้นที่ ที่กำหนดไว้
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> <style> #myGreen, #myRed, #myBlue, #myOrange{ width:60px; height:60px; } #myGreen { background-color:green;} #myRed { background-color:red;} #myBlue { background-color:blue;} #myOrange { background-color:orange;} </style> </head> <body> <h3>Double click</h3> <table> <tr> <td><div id="myGreen" class="test"></div></td> <td><div id="myRed" class="test"></div></td> <td><div id="myBlue" class="test"></div></td> <td><div id="myOrange" class="test"></div></td> </tr> <td colspan="4"><div id="showData"></div></td> </table> <script> $(document).ready(function() { myDbclick(); }); function myDbclick(){ $(".test").dblclick(function() { var strColor = $(this).css("background-color"); $("#showData").html(strColor); </script> </body> </html>
การส่งค่าผ่านออบเจ็กต์ event.pageX และ event.pageY แสดงค่าตำแหน่งที่คลิกเมาส์
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> <style> .basicRed{ width:300px; height:200px; background-color:red; } </style> </head> <body> <h3>click event</h3> <table> <tr> <td><div class="basicRed"></div></td> </tr> <td><div id="showData"></div></td> </table> <script> $(document).ready(function() { myAction(); }); function myAction(){ $(".basicRed").mouseup(function(e) { var x = e.pageX; var y = e.pageY; $("#showData").html(x + ',' + y); </script> </body> </html>
การแสดงหรือซ่อนเอลิเมนต์ด้วย jQuery show() แสดงเอลิเมนต์ show(speed,callback) แสดงเอลิเมนต์โดยกำหนดความเร็ว hide() ซ่อนเอลิเมนต์ hide(speed,callback) ซ่อนเอลิเมนต์โดยกำหนดความเร็ว toggle() สลับการทำงานระหว่างซ่อนกับแสดง toggle(speed,callback) สลับการทำงานโดยกำหนดความเร็ว
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> </head> <body> <h3>Animation</h3> <div> <img src="mypic.jpg" id="mypic"> </div> <input type="button" id="show" value="show"> <input type="button" id="hide" value="hide"> <input type="button" id="toggle" value="toggle"> <script> $(document).ready(function() { getAnimate(); }); function getAnimate(){ $("#show").click(function() { $("#mypic").show(4000); $("#hide").click(function() { $("#mypic").hide(4000); $("#toggle").click(function() { $("#mypic").toggle(4000); } </script> </body> </html>