jquery选择器案例
2016-04-27 15:55
405 查看
一、预期效果
实现一个效果,如下。<!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script> </head> <body> <button>test click me</button> <script> $(document).ready(function(){ $("button").toggle(function(){ $("body").css("background-color", "green"); }, function(){ $("body").css("background-color", "red"); }, function(){ $("body").css("background-color", "yellow"); }); }); $.fn.toggle = function( fn ) { // Save reference to arguments for access in closure var args = arguments, guid = fn.guid || jQuery.guid++, i = 0, toggler = function( event ) { // Figure out which function to execute var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i; jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 ); // Make sure that clicks stop event.preventDefault(); // and execute the function return args[ lastToggle ].apply( this, arguments ) || false; }; // link all the functions, so any of them can unbind this click handler toggler.guid = guid; while ( i < args.length ) { args[ i++ ].guid = guid; } return this.click( toggler ); } </script> </body> </html>
View Code
2、.toggle()切换元素的可见状态。
语法:$(selector).toggle(speed,callback,switch)
参数都是可选的。
例子:切换p的显隐。
$(".btn1").click(function(){ $("p").toggle(); });
文中案例来自《锋利的jquery》,但是书中内容难免过时,但也不能因噎废食,知道一些技术的历史,哪怕是过时的,新旧结合,也可以帮助我们更全面的认识掌握技术。
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/5416895.html有问题欢迎与我讨论,共同进步。
相关文章推荐
- jQuery Mobile开发实例 - 手机中医邦
- jQuery select2设置默认值为下拉列表中的一个选项
- Jquery 全屏滚动插件
- jquery ajax 发送js对象
- 模仿jquery的$选择符
- JQuery初探---Jquery/Ajax
- Jquery 判断 checked 是否选中
- jQuery上传插件uploadify 3.2.1 参数
- jQuery文件上传控件 Uploadify
- 关于 firefox火狐 keydown等键盘事件jquery不起作用
- jquery图片切换插件-NivoSlider.js
- jquery.easyui-使用笔记-后台管理功能
- jQuery取得select选中的值
- jQuery中 trigger() & bind() 使用心得
- Jquery实现Ajax同步请求
- jquery的deferred使用详解
- jquery插件开发及 jquery自定义函数
- jQuery操作checkbox选择
- jquery 字符串对比 以及each遍历
- jQuery绑定事件on()与弹窗的简要概述