jQuery 入门教程(5): 显示/隐藏内容

2019独角兽企业重金招聘Python工程师标准>>>

jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：jQuery的hide()和show() 可以用来显示和隐藏内容。比如下面的例子：

[html] view plain copy print ?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide();
});
$("#show").click(function () {
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

基本语法
$(selector).hide(speed,callback);

$(selector).show(speed,callback);
可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数，在显示或隐藏结束时调用。下面代码在1秒钟内隐藏内容：

[javascript] view plain copy print ?

$("button").click(function(){
$("p").hide(1000);
});

jQuery toggle()方法

使用toggle()方法，可以实现交替显示和隐藏内容，如：

[javascript] view plain copy print ?

$("button").click(function(){
$("p").toggle();
});

其基本语法如下：

$(selector).toggle(speed,callback);

可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数，在显示或隐藏结束时调用

转载于:https://my.oschina.net/u/194743/blog/164540

jQuery 入门教程(5): 显示/隐藏内容相关推荐

jQuery 入门教程
jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自Wikepedia上的jQuery说明: jQuery 是开源软件,使用MIT许可证授权 ...
JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1
需求:利用JS事件与操作元素复刻--世纪佳缘(用户名.显示隐藏内容). 开发环境:VScode.Edge 参考网站:世纪佳缘官网注册截面头部包含算法: 1.利用JS操作元素.事件以及if分支,修改表 ...
CSS便签样式效果，鼠标移动到指定便签显示隐藏内容
css便签样式效果,鼠标移动到指定便签显示隐藏内容这是效果图欢迎大家一起交流学习这里放了源码 <!DOCTYPE html> <html lang="zh"& ...
javascript实现鼠标经过显示隐藏内容
html代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...
jQuery 使用slideToggle()滑动显示隐藏
slideToggle() 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏或显示 ...
jquery关于多个显示隐藏
今天做了一个关于多个栏目的隐藏与显示,内容为初始化显示6个栏目,点击按钮显示所有的栏目,在次点击隐藏出现的栏目 <div class="ftlt_z_navigation acer&q ...
Python+Opencv图像处理新手入门教程(四)：视频内容的读取与导出
一步一步来吧上一节: Python+Opencv图像处理新手入门教程(三):阈值与二值化 1.Intro 今天这节我们主要看怎么利用opencv读取并处理视频中的内容. 2.VideoCapture ...
jQuery的几种显示隐藏方法
jQuery显示隐藏方法 hide()方法元素隐藏,隐藏的前提必须是元素display:block: show()方法元素显示,显示的前提必须是元素display:none; toggle()方法 ...

jQuery 入门教程(5): 显示/隐藏内容

jQuery 入门教程(5): 显示/隐藏内容相关推荐

最新文章

热门文章