页面html
<head>
<style>
.highlight{
background :#ADFF2F;
}
</style>
</head>
<body >
<div id = panda>
<h5 class = panda2>jquery的绑定事件</h5>
<div class = content style = "display :none">
//绑定事件bind()
bind(type [.data],fn)
type：blur focus load resize scroll unload click dbclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error
[.data] :可选参数，event.data
fn:绑定的处理函数
//2.加强效果
实现多次单击、不同效果，隐藏的情况下单击-》显示，显示的情况下单击-》隐藏
//3.绑定mouseover鼠标滑入-》显示 mouseout鼠标滑出-》隐藏
//4.简写绑定事件 简写就是可以不写
//5.合成事件 hover() toggle()
</div>
</div>
</body>1.hover()
模拟光标悬停事件 移入元素触发一个事件，移除元素触发一个事件 相当于mouseenter+mouseleave
<script>
$(function(){
$("#panda h5.panda2").hover(function(){
$(this).next().show();//移入的时候显示
},function(){//注意这里是逗号，相当于给hover绑定了两个function
$(this).next().hide();//移除的时候隐藏
});
});
</script>
2.toggle
模拟鼠标连续单击事件，其实就是绑定两个函数，交替触发
分3步：
1.等待dom加载完
2.找到元素，添加toggle方法
3.显示函数里，给标题添加样式，高亮显示
4.隐藏函数里，移除标题样式，去掉高亮显示
<script>
$(function(){
$("#panda h5.panda2").toggle(function(){
$(this).removeClass("highlight")//移除样式
$(this).next().hide();//隐藏文本
},function(){//注意这里是逗号，这两个函数交替执行
$(this).addClass("highlight");//添加样式
$(this).next().show();//显示文本
});
});
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
