Ý kiến học viên

Trần Hoàng Thiện

Trần Hoàng Thiện

Chất lượng học và giảng dạy tốt, hướng dẫn tận tình, truyền thụ kiến t...
  • - Phone : 0944418192
  • - Email : thienhb12@gmail.com
  • - Facebook : Xem
Bùi Quốc Đạt

Bùi Quốc Đạt

Website thiết kế đẹp dễ nhìn và sử dụng, thông tin chưa nhiều nhưng kh...
  • - Phone : 0964142565
  • - Email : bqdat.it@gmail.com
Trần Văn Tùng

Trần Văn Tùng

Giảng viên nhiệt tình giảng dạy. dễ tiếp thu, dễ hiểu.
  • - Phone : 01667419325
  • - Email : dongjan479@gmail.com
  • - Facebook : Xem
Viết đánh giá

Viết đánh giá

Về chất lượng đào tạo, website

Đánh giá của học viên

Ý kiến của học viên

Xem đánh giá của học viên về phpandmysql.net

jQuery event - Các sự kiện trong jquery

Jquery Events, Các sự kiện thường gặp trong jquery
Nếu như trước đây bạn đã quen với các sự kiện trong javascript thuần thì nay bạn sẽ gặp lại nó trong jquery. Các sự kiện này được viết lại đơn giản ngắn gọn hơn và sử dụng thuận tiện hơn javascript thuần. 

Trong jquery ta thường gặp 5 sự kiện ( Events ) như sau

1. Jquery focus()

Thực hiện một sự kiện khi ta click chuột vào các đối tượng như input, textarea, select

$("input,select,textarea").focus(function () {
   //Hành động
});

2. Jquery blur()

Thực hiện một hành động nào đó khi con trỏ chuột thoát khỏi sự kiện focus(), hay nó là điều kiện trái lại của focus.
$("input,select,textarea").blur(function () {
   //Hành động
});

3. Jquery change()

Thực hiện một hành động nào đó khi dữ liệu của đối tượng thay đổi
$("input,select,textarea").change(function () {
   //Hành động
});

4. Jquery select()


Thực hiện một hành động khi ta lựa chọn một đoạn text trong textfield hoặc textarea
$("input,select,textarea").select(function () {
   //Hành động
});

5. Jquery submit()


- Sự kiện jquery submit dùng để submit form
$("form").submit(function () {
   //Form submit
});

- THỬ NGAY 


<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery events</title>
<style type="text/css">
div{
 padding:16px;
}
.focus, .blur, .change, .select{
 color:white;
 border:1px solid red;
 background-color:blue;
 padding:8px;
 margin:8px;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
 // Focus
 $("input,select,textarea").focus(function () {
   $(this).after("<span class='focus'> focus() triggered! </span>");
   $("span").filter('.focus').fadeOut(4000);
    });
 
 // Blur
    $("input,select,textarea").blur(function () {
   $(this).after("<span class='blur'> blur() triggered! </span>");
   $("span").filter('.blur').fadeOut(4000);
    });
 
  // Change
    $("input,select,textarea").change(function () {
   $(this).after("<span class='change'> change() triggered! </span>");
   $("span").filter('.change').fadeOut(4000);
 
    });
 
 // Select
    $("input,textarea").select(function () {
   $(this).after("<span class='select'> select() triggered! </span>");
   $("span").filter('.select').fadeOut(4000);
 
    });
 
  // Submit
    $("form").submit(function () { 
   alert('Form submitted!');
    }); 
});
</script>
</head>
 
<body>
<form name="formsubmit" action="#">
  <div> TextBox :
    <input type="textbox" size="50"/>
  </div>
  <div>
    <label style="float:left">TextArea : </label>
    <textarea cols="30" rows="5"></textarea>
  </div>
  <div> Radio :
    <input name="sex" type="radio" value="Male" checked/>Male
    <input name="sex" type="radio" value="Female"/>Female
  </div>
  <div> CheckBox :
    <input type="checkbox" name="checkme"/>Check Me
  </div>
  <div> Country :
    <select id="country">
      <option value="China">China</option>
      <option value="United State">United State</option>
    </select>
  </div>
  <div>
    <input type="submit"/>
    <input type="reset"/>
  </div>
</form>
</body>
</html>


- Xem demo
tại đây
Bạn vẫn chưa hiểu vấn đề, bạn cần người trợ giúp?. Hãy click vào đây để gửi câu hỏi, mọi người sẽ support cho bạn