程序员人生 网站导航

jquery学习笔记-jQuery实现单击和鼠标感应事件

栏目:htmlcss时间:2015-01-27 14:00:18

对单击事件而言,jQuery一样提供了动态交替的toggle()方法,这个方法接受两个参数,两个参数均为监听函数,在click事件中交替使用。

例子:点击事件的动态交互。

复制代码
<script type="text/javascript"> $(function() { $("#ddd").toggle( function(oEvent) { $(oEvent.target).css("opacity", "0.5"); }, function(oEvent) { $(oEvent.target).css("opacity", "1.0"); } ); }); </script> <div id="ddd">11</div>
复制代码

2.实现鼠标感应

在css中可以利用:hover伪类实现样式的改版,实现单独的css样式,在jQuery引入后,几近所有的元素都可以用hover()来感应鼠标。并且可以制作更复杂的效果。其本质是mouseover和mouseout事件的合并
hover(over,out)方法可接受两个参数,均为函数。第1个是鼠标移动到元素上面触发,第2个是鼠标移出元素时触发。

复制代码
<script type="text/javascript"> $(function() { $("#ddd").hover( function(oEvent) { //第1个函数相当于mouseover事件监听 $(oEvent.target).css("opacity", "0.5"); }, function(oEvent) { //第2个函数相当于mouseover事件监听 $(oEvent.target).css("opacity", "1.0"); } ); }); </script> <div id="ddd">11</div>
复制代码

与第1个例子相比,只是把toggle()换成了hover().

 


受wenzi0_0指点,写几个关于toggle()的小例子

1.常规的利用

复制代码
<script type="text/javascript"> $(function() { $("#ddd").click(function(){ $("#eee").toggle(); }); }); </script> <div id="ddd">11</div> <div id="eee">122</div>
复制代码

2.css属性

复制代码
<script type="text/javascript"> $(function(){ $("#eee").toggle(function() { $("#ddd").css("background-color", "green"); }, function() { $("#ddd").css("background-color", "red"); }, function() { $("#ddd").css("background-color", "yellow"); } ); }); </script> <div id="ddd">11</div> <div id="eee">122</div>
复制代码

 

写博客不容易,欢迎大家给评论以给鼓励,分享是快乐!欢迎大家拍砖和点赞。(JavaScript、ajax、jQuery系列文章不断更新,关注我便可随时关注更新)

其他精彩文章

jQuery教程(29)-jQuery插件开发之为插件方法指定参数

jQuery教程(28)-jQuery插件开发之使用插件

jQuery教程(27)-jQueryajax操作之修改默许选项

jQuery教程(26)-ajax操作之使用JSONP加载远程数据

jQuery教程(25)-ajax操作之安全限制



------分隔线----------------------------
------分隔线----------------------------

最新技术推荐