Thứ Bảy, 2 tháng 1, 2016

WEB HAY

1/02/2016 10:51:00 CH    No comments
jQuery event - Các sự kiện trong jquery
Trang chủ » Javascript & jQuery

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

0 nhận xét:

Đăng nhận xét