jQuery_效果(隐藏和显示)
一、jQuery hide() 显示和 show()隐藏
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#hide').click(function(){
$("p").hide();
})
$('#show').click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。如果点击“显示”按钮,我又出现啦</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
语法:
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#hide').click(function(){
$("p").hide(1000);//给hide加上参数
})
$('#show').click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。如果点击“显示”按钮,我又出现啦</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
二、jQuery toggle()方法
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#hide').click(function(){
$("p").toggle(1000);//给hide加上参数
});
});
</script>
</head>
<body>
<p id="p1">如果点击"隐藏/显示"按钮,我就会消失或者出现啦</p>
<button id="hide" type="button">隐藏/显示</button>
</body>
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery_效果(隐藏和显示)的更多相关文章
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
- Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- jQuery效果---隐藏与显示
隐藏与显示 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- jQuery效果------隐藏hide()/显示show()
hide()和show() hide():隐藏文本. show():显示文本. 语法: $(selector).hide(speed,callback); $(selector).show(speed ...
- jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链
隐藏和显示 $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度, ...
- jQuery 效果 - 隐藏和显示
$('...').hide();//隐藏 $('...').show();//显示 以上使用需要针对特定的功能单独使用,如果是混用,那么就要有标志位去实现,而通常两者更高级的一步到位实现: $('.. ...
- jQuery 效果 – 隐藏和显示
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏.显示.切换,滑动 ...
- jQuery效果--隐藏和显示
jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click( ...
- jQuery效果-隐藏与显示 小方块的移除
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
随机推荐
- Nodejs Express 4.X 中文API 1--- Application篇
相关阅读: Express 4.X API 翻译[一] -- Application篇 Express4.XApi 翻译[二] -- Request篇 Express4.XApi 翻译[三] -- ...
- VC++之GetLastError()使用说明
VC中GetLastError()获取错误信息的使用 在VC中编写应用程序时,经常需要涉及到错误处理问题.许多函数调用只用TRUE和FALSE来表明函数的运行结果.一旦出现错误,MSDN中往往会指出请 ...
- 负MARGIN之讲解
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- (翻译)Google Guava Cache
翻译自Google Guava Cache This Post is a continuation of my series on Google Guava, this time covering G ...
- Ckeditor 中一些核心的对象的作用
1.CKEditor CKEditor对象用于掌管全局,他是一个单例对象,管理着所有实例化了的编辑框. 通过replace方法创建编辑框实例. 2.CKEditor.editor 表示一个编辑框实例, ...
- jquey ajax 无刷新提交form
http://bbs.csdn.net/topics/380237868 $.ajax({ type: "POST", url:ajaxCallUrl, data:$('#your ...
- 传说中的WCF(11):会话(Session)
在标题中我加了一个大家都很熟悉的单词——Session,熟吧?玩过Web开发的朋友肯定在梦中都会见到她. 在Web中为什么要会话呢?毕竟每个用户在一个Web应用中可能不止进行一次操作,比如,某二手飞机 ...
- (4)opencv在android平台上实现 物体跟踪
最近项目时间很紧,抓紧时间集中精力去研究android平台的opencv里的物体跟踪技术 其他几篇文章有时间再去完善吧 从网上找到了一些实例代码,我想采取的学习方法是研究实例代码和看教程相结合,教程是 ...
- Linux多线程之同步2 —— 生产者消费者模型
思路 生产者和消费者(互斥与同步).资源用队列模拟(要上锁,一个时间只能有一个线程操作队列). m个生产者.拿到锁,且产品不满,才能生产.当产品满,则等待,等待消费者唤醒.当产品由空到不空,通知消费者 ...
- mysql之触发器
触发器 MySQL语句在需要时被执行,存储过程也是如此.但是,如果你想要某条语句(或某些语句)在事件发生时自动执行,怎么办呢?例如:每当增加一个顾客到某个数据库表时,都检查其电话号码格式是否正 ...