Sự Kiện Trong JQuery - JQuery Events

Trang chủ » Sự Kiện Hover() Trong Jquery Có Tác Dụng Gì » Sự Kiện Trong JQuery - JQuery Events

Có thể bạn quan tâm

$("p").click(function(){ // viết đoạn mã thực thi khi xảy ra sự kiện click chuột ở đây });

4. Một số sự kiện thường sử dụng trong JQuery.

4.1 $(document).ready()

Phương thức này cho phép thực thi các khối lệnh JQuery Javascript khi toàn bộ DOM đã được tải về hoàn tất và sẵn sàng.

Ngoài phương thức này JQuery còn một số phương thức khác ở dạng rút gọn hay tinh giản.

$().ready(function(){ // Some code }); // Hoặc $(function(){ }); 4.2 Sự kiện click()

Phương thức này gán một hàm xử lý sự kiện vào một phần tử HTML. Hàm này chỉ được thực thi khi người dùng nhấp chuột lên phần tử đích HTML đó.

Ví dụ: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo sự kiện click trong JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net. Bạn vui lòng click vào đây nhé</p> <script type="text/javascript"> $().ready(function(){ $("p").click(function(){ alert('Ôi. Bạn click vào tôi thật đấy ah'); }); }); </script> </body> </html> Xem kết quả

4.3 Sự kiện hover()

Phương thức này là sự kết hợp của 2 phương thức mouseenter() và mouseleave(). Hàm đầu tiên thực thi khi chuột được di chuyển trên phần tử HTML, và hàm thứ 2 được thực thi khi chuột rời khỏi phần tử HTML đó.

$(selector).hover(function(event){ // Some code }); // Hoặc $(selector).hover(function(){ // Mouse on }, function(){ // Mouse out });

Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo sự kiện hover() trong JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net. Bạn vui lòng di chuột vào đây</p> <script type="text/javascript"> $().ready(function(){ $("p").hover(function(){ alert('Bạn đang di chuột vào tôi !'); }, function(){ alert('Đừng bỏ tôi đi mà !'); }); }); </script> </body> </html> Xem kết quả

4.4. Sự kiện show()/hide() và fadeIn()/fadeOut()

Phương thức show() & fadeIn() hiện phần tử HTML được gán sự kiện. Ngược lại với nó hide() và fadeOut() ẩn phần tử HTML được gán sự kiện.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo sự kiện hover() trong JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net.</p> <button type="button" class="hide">Ẩn</button> <button type="button" class="show">Hiện</button> <div class="para" style="awidth:100px; height:100px; background:#03C"></div> <script type="text/javascript"> $().ready(function(){ $(".hide").click(function(){ $('.para').hide(); $('.para').fadeOut(); }); $(".show").click(function(){ $('.para').show(); // $('.para').fadeIn(); }); }); </script> </body> </html> Xem kết quả

4.5 Sự kiện change()

Sự kiện change được thực thi khi bạn thay đổi giá trị của một điều khiển của Form như là input, select, textarea, radio,...

Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo sự kiện change() trong JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net.</p> <p> <label>Input text</label> <input type="text" id="input" placeholder="Nhập vào một ký tự bất kỳ" /> </p> <p> <label>Select box</label> <select id="select"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </p> <p> <label>Radio</label> <input type="radio" name="gender" value="Male" /> Male <input type="radio" name="gender" value="FeMale" /> FeMale </p> <script type="text/javascript"> $().ready(function(){ $('#input').change(function(){ alert("Value = "+$(this).val()); }); $('#select').change(function(){ alert("Value = "+$(this).val()); }); $('input[name=gender]').change(function(){ alert("Value = "+$(this).val()); }); }); </script> </body> </html>

Xem kết quả

4.6 Sự kiện keypress() / keydown() / keyup()

  • keypress: Sự kiện keypress xảy ra khi ta nhấn một phím bất kỳ trên bàn phím.
  • keydown: Sự kiện keydown xảy ra khi ta nhấn một phím bất kỳ trên bàn phím xuống.
  • keyup: Sự kiện keyup xảy ra khi ta nhả một phím bất kỳ trên bàn phím nên.

Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo sự kiện keypress() / keydown() / keyup() trong JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <p>Chào mừng bạn đã chọn học JQuery cùng www.chiasephp.net.</p> <p> <label>Keypress</label> <input type="text" id="keypress" placeholder="Nhập vào một ký tự bất kỳ" /> </p> <p> <label>Keydown</label> <input type="text" id="keydown" placeholder="Nhập vào một ký tự bất kỳ" /> </p> <p> <label>Keyup</label> <input type="text" id="keyup" placeholder="Nhập vào một ký tự bất kỳ" /> </p> <script type="text/javascript"> $().ready(function(){ $('#keypress').keypress(function(ev){ alert("Value = "+ev.keyCode); }); $('#keydown').keydown(function(ev){ alert("Value = "+ev.keyCode); }); $('#keyup').keyup(function(ev){ alert("Value = "+ev.keyCode); }); }); </script> </body> </html>

Xem kết quả

4.7 Sự kiện focus() & blur()

Phương thức focus() được thực thi khi trường dữ liệu trên form được chọn. Ngược lại blur() áp dụng khi người dùng rời chọn trường dữ liệu đó.

Ví dụ: Khi chọn (focus) trường nhập liệu thì trường đó có màu nền #CCC, khi bỏ chọn (blur) thì trường nhập liệu có màu nền là màu #FFF.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "#CCC"); }); $("input").blur(function(){ $(this).css("background-color", "#FFF"); }); }); </script> </head> <body> <form method="post" action=""> <h2>Đăng ký thành viên tại dammio.com </h2> <p>Họ & tên: <input type="text" name="fullname"></p> <p>Email: <input type="text" name="email"></p> </form> </body> </html>

Xem kết quả

4.8 Lồng các sự kiện.

Trên thực tế đôi khi ta cần gán nhiều các sự kiện cho một phần tử bất kỳ. Trong JQuery hoàn toàn cho phép chúng ta làm được được đó thông qua một số hàm trung gian như hàm on(), bind()... Ngoài ra ta còn có thể viết chuỗi các hàm nối nhau bằng dấu (.).

$(selector).action1().action2().action3(); // Hoặc $(selector).bind('action1, action2', function(){ // Some code }); // Hoặc $(selector).on({ action1: function(){ // Some code }, action2: function(){ // Some code } });

Lưu ý: Hết câu lệnh javascript bạn nên sử dụng dấu (.)

Ví dụ: Chúng ta có một hình vuông. Mình sẽ làm nó ẩn đi(fadeOut) sau 2s nó lại hiện nên(fadeIn).

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.square') .fadeOut() .delay(2000) .fadeIn(); }); </script> </head> <body> <div class="square" style="awidth:100px; height:100px; background:#00C;"></div> </body> </html> Xem kết quả Ví dụ 2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } }); }); </script> </head> <body> <p class="para">Rê chuột, nhấn chuột, rê chuột ra ngoài để thấy các hiệu ứng đổi màu. --- dammio.com</p> </body> </html> Xem kết quả

5. Kết luận.

Trong JQuery có rất nhiều hàm xử lý sự kiện và chúng rất đa dạng trong bài viết này mình không thể liệt kê hết ở bài viết này. Nhưng trên đây là một vài sự kiện phổ biến chúng ta hay sử dụng nhất. Hy vọng bài viết có ích với các bạn.

Từ khóa » Sự Kiện Hover() Trong Jquery Có Tác Dụng Gì