jQuery(七)常用事件

1、当单击元素时,发生 click 事件

$('div').eq(0).click(function()
{
     $(this).css('color', 'red');
})

2、当元素的值改变时发生 change 事件(仅适用于表单字段)。

$('input[name=userName]').change(function(){
	$(this).css('background', 'red');
})

3、当鼠标指针离开被选元素时,会发生 mouseover 事件。
4、当鼠标指针离开被选元素时,会发生 mouseout 事件。

$('div').eq(1).mouseover(function()
{
     $(this).css('color', 'red');
})
$('div').eq(1).mouseout(function()
{
     $(this).css('color', 'blue');
})

5、hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

$('div').eq(2).hover(function()
{
      $(this).css('color', 'red');
 },
 function()
 {
      $(this).css('color', 'blue');
 })

6、focus() 当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。

if($('#passWord').val() == '')
{
     $('#passWord').focus();
}

7、当键盘键被按下时发生 keydown 事件。
8、当键盘键被松开时发生 keyup 事件。
使用 event.which 属性来返回哪个键盘键被按下

$('#email').keydown(function(){
	$(this).css('color', 'pink');
 })
 $('#email').keyup(function(){
      $(this).css('color', 'green');
 })
 $(document).keydown(function(){
      //alert(event.which);
 })

9、显示show() 隐藏hide()

$('#show').click(function()
{
      $('div').eq(3).show();
})
$('#hide').click(function()
{
      $('div').eq(3).hide();
})

10、fadeIn() 用于淡入已隐藏的元素。
11、fadeOut() 方法用于淡出可见元素。
12、fadeToggle() 如果淡出,则淡入,如果淡入,则淡出。
13、fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

$('#fadeIn').click(function()
{
       $('div').eq(4).fadeIn(5000);
 })
 $('#fadeOut').click(function()
 {
       $('div').eq(5).fadeOut(5000);
 })
 $('#fadeToggle').click(function()
 {
       $('div').eq(6).fadeToggle(5000);
       /* 设置透明度
       $('div').eq(6).fadeTo(3000,0.4);
       */
 })

猜你喜欢

转载自blog.csdn.net/qq_38904347/article/details/82863691