jq鼠标移入移出显示和隐藏_jQuery事件-div的显示隐藏及鼠标的移入移出

jQuery事件-div的显示隐藏及鼠标的移入移出

.header{

width:302px;

height:40px;

background:green;

font-size:20px;

margin-bottom: 0px;

}

.content{

width:300px;

border:1px solid #333;

background:#CCC;

display: none;

margin-top:0px;

}

$(function (){

//显示隐藏

$(".header").click(function (){

var flag = $(".content").is(":hidden");

if(flag){

$(".content").show();

}else{

$(".content").hide();

}

});

/*

//使用bind的绑定事件,跟上上面的效果是一样的

$(".header").bind("click", function (){

var flag = $(".content").is(":hidden");

if(flag){

$(".content").show();

}else{

$(".content").hide();

}

});

*/

/*

//鼠标的移入移出

$(".header").mouseover(function (){

$(".content").show();

}).mouseout(function (){

$(".content").hide();

});

*/

/*

//合成事件 hover()

$(".header").hover(function (){

$(".content").show();

},function (){

$(".content").hide();

});

*/

});

什么是jQuery？

Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，

它兼容CSS3，还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)，

jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果，

并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，

而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页面保持代码和html内容分离，也就是说，

不用再在html里面插入一堆js来调用命令了，只需要定义id即可。