Thêm sự kiện đối tượng Jquery

1. Ready
   
2. Click
   
3. Change
   
4. KeyDown
   
5. ToggleClass
   
6. Sử dụng sự kiện với ON
   
7. Sự kiện select Combobox
   

**********************************************************************

1. Sử dụng hàm khi HTML nội dung nhiều

$(document).ready(function(){
  .....
});

Tại sao phải sử dụng $(document).ready(function() khi làm web ?
 Tại vì: Nếu để hàm javascript ở giữa trang html thì việc thực thi đoạn javascript ngay lúc đó sẽ không tìm được các đối tượng dom bên dưới, nếu hàm trên cho máy tính biết là hãy chạy đoạn javascript này khi load xong trang web.

2. Sự kiện click:

  gọi hàm click

  $('.btCloseFrm').click(function(){
        alert('test');
     //  $(this).attr('XXXX');   // tác động thẻ được click
    });

$("#DoiTuong").click(function(){ lenh; });


$('DoiTuongCha').on('click', 'DoiTuongCon', function () {
   // có thể dùng đối tượng this
} );
Ví dụ:
$('td').on('click', '.btn-xs', function () {
   
    } );

** sự kiện click khi gán cho nhiều class cùng tên.

3. Sự kiện change - nhập xong enter tại ô nhập:

<input type="text" id="price" name="number" />
$('#price').on('change',function(){
  ....                  
});

4. Sự kiện KeyDown:

    $( "#Text1" ).keydown(function(event) {
   alert( event.which  );
    });

   ** Sự kiện nhấn Enter goi hàm khác không submit
$( "#Text1" ).keydown(function( event ) {
  if ( event.which == 13 ) {
   event.preventDefault();
  }
  ....
});

5. Dùng sự kiện với ON

<script>
$( "#id" ).on({
  click: function() {
    $( this ).toggleClass( "active" );
  }, mouseenter: function() {
    $( this ).addClass( "inside" );
  }, mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});
</script>

<script>
$( "body" ).on( "click", "p", function() {
  $( this ).after( "<p>Another paragraph!</p>" );
});
</script>
** Tác động đến thẻ P trong Body

** Kết hợp được nhiều sự kiện vào đối tượng

6. Hàm toggleClass: nếu chưa có class thì thêm, nếu có rồi thì xóa

$('p').click(function(){
        $(this).toggleClass('test');
    })

   .test{ color:red; }