1.jQuery事件

简介：jQuery有很多事件、鼠标、键盘、表单等等

1.1鼠标移进(mouseover)、移出事件(mouseout)

一、.绑定导航栏中li的鼠标移进移出事件

$(function(){
     $("#nav li").mouseover(function(){
       $(this).addClass("heightlight");
     });
     $("#nav li").mouseout(function(){
       $(this).removeClass();
     })
});

二、键盘事件、

1.重新回顾一下之前写的jQuery的属性选择器

$("[href]") 选取所有带有href属性的元素

$("[href='#']")选取所有带href值等于'#'的元素

$("[href!='#']")选取所有带有href值不等于'#'的元素

$("[href$='.jpg']")选取所有href值以.jpg结尾的元素

2.$(function(){
   $("[type=password]").keyup(function(){        //注意这里属性选择器必须加上[]否则是选不到密码框
      $("#event").append("keyup ");
   }).keydown(function(){
      $("#event").append("keydown ");
   }).keypress(function(){
      $("#event").append("keypress ");
   });
   $(document).keydown(function(event){
   if(event.code==13)
   alert("确认提交");
   });
 })

三、焦点事件、得到焦点(focus)失去焦点(blur)

1.回顾一下元素选择器的用法。

 $("p") 选取<p>元素

 $("p.intro") 选取所有class="intro"的<p>元素

 $("p#demo)选取所有id="demo"的<p>元素

 四、绑定单个事件(事件绑定的另一种方式)

$(function(){
.bind("click",function(){
           $("p").css("background-color","#F30");
         });

 });等价于

$(function(){
   $("input[name=event_1]").click(function(){
     $("p").css("background-color","#F30");
   });
 })

效果图片如下

鼠标移入移出效果 jquery_jQuery

五、绑定多个事件

1.$(function(){
   $(“inout[name=event_1]”).bind(mouseover:function(){
$(“ul”).css(“display”,”none”);
},
   mouseout:function(){
    $(“ul”).css(“display”,”block”);
}
);
});

六、复合事件

示例1$(“p”).hover(function(){

$(“p”).css(“background-color”,”yellow”);
},
function(){
$(“p”).css(“background-color”,”pink”);
});

等价于：

$(“p”).mouseover(function(){
$(“p”).css(“background-color”,”yellow”);
}).mouseout(function(){
  $(“p”).css(“background-color”,”pink”);
});

示例2.

$(function(){
  $(“myccound”).hover(function(){
 $(“menu_1”).css(“display”,”block”);
},
Function(){
$(“#menu_1”).css(“display”,”none”);
});
});

3.hover方法规定当鼠标悬停在被选元素上时要运行的两个函数。会触发mouseenter事件和mouseleave事件

注意：如果只指定一个函数、则mouseenter和mouseleave都执行它

2.jQuery动画

一、动画——显示和隐藏

1.$(“.btn2”).click(function(){
   $(“p”).show()
});

show(speed,callback)

speed参数是”slow”,”normal”,”fast”或者1000等价于1秒

callback参数是:回调函数、除非设置了speed参数否则不能设置callback参数

2.示例1

说明：input type='hidden'且div style='display:none;'都视为隐藏元素

$(function(){
$(“#del”).click(function(){
 $(“.tipsbox”).show(“slow”);
});
$(“input[name=cancel]”).click(function(){
 $(“.tipsbox”).hide(“fast”);
});
});

二、动画-隐藏多个元素

1.toggle()可以用于绑定两个或多个事件处理器函数、以响应被选元素的轮流click事件

$(“p”).toggle(  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");});

2.toggle()方法可以用于切换被选元素的hide()和show()方法、也就是对被选元素执行取反操作

示例代码2

$(“input[name=more_btn]”).click(function(){
 $(“li:gt(4):not(:last)”).toggle();
});

三、动画-淡入淡出

1.fadeIn(speed,callback)参数的意义和show、hide的参数意义一致

说明：如果元素已经显示那么、该效果不产生任何变化、该效果适用于通过jQuery隐藏的元素、

或在css中声明display:none的元素、（但不适用于visibility:hidden的元素）

$(function(){
  $("input[name=fadein_btn]").click(function(){
                               $("img").fadeIn("slow");
                     });
})

2. fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

$("input[name=fadeout_btn]").click(function(){
                                               $("img").fadeOut(1000);
                                   });

四、改变元素的高度

slideUp(speed,callback)和show fadeIn 等方法的参数意义一致

定义和用法：通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。

slideDown(speed,callback) 和show fadeIn 等方法的参数意义一致

定义和用法: 方法通过使用滑动效果，显示隐藏的被选元素。和fadeIn方法功能类似。

(不适用于visibility:hidden的元素）。