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() 用于淡入已隐藏的元素。
fadeOut() 方法用于淡出可见元素。
fadeToggle() 如果淡出,则淡入,如果淡入,则淡出。
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);
       */
 })

11滑动效果
slideDown():方法用于向下滑动元素。
slideUp():方法用于向上滑动元素。
slideToggle():可以在 slideDown() 与 slideUp() 方法之间进行切换。

function navJump(leif){
    if(leif=='userManage'){
      $('.column').eq(0).slideToggle('fast');
    }
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值