jQuery-显示与隐藏
1.显示与隐藏
- show([speed,easing,function]) speed:毫秒单位的时间值
- hide([speed,easing,function])
- 用法:元素.show()/元素.hide()
2.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏</title>
<style>
#box {
width: 300px;
height: 200px;
border: 1px solid #000;
background-color: #ccc;
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="box">文字</div>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
$("#show").click(function() {
$("#box").show('fast', function() {
alert("元素显示成功")
})
})
$("#hide").click(function() {
$("#box").hide(2000)
})
</script>
</body>
</html>
jQuery-显示与隐藏的更多相关文章
- js 与JQuery显示及隐藏方法
虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...
- Jquery显示和隐藏的4种简单方法
Html代码: <div class="topicList"> <h3><span>学习天地</span></h3> ...
- JQuery显示,隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- jQuery显示和隐藏 常用的状态判断方法
显示:show() display:block; 隐藏:hide() display:none; 当显示和隐藏切换的时候,需要判断此刻是显示还是隐藏,那判断条件常用以下几种方法: 1.if(th ...
- jQuery 显示与隐藏 tab选项卡
方法一:使用display样式:block.none来控制文本的显示与隐藏 <div class="explain_text"> 移动互联网为企业提供了连接用户的新方式 ...
- jquery显示、隐藏div的方法
$("#top_notice").css("display", "block");//第1种方法 //$("#top_notice ...
- Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明)
一.隐藏和显示元素 $('#button_save_12').css('display', 'none'); // 隐藏按钮 $('#button_save_12').css('display', ' ...
- jQuery显示与隐藏返回顶层的箭头
<script type="text/javascript"> $(window).scroll(function(){ var d ...
- jquery显示和隐藏元素
1.$('#id').show()/$('#id').hide()/$('#id').toggle() 2.$('#id').css('display','none')/$('#id').css('d ...
- jquery 显示和隐藏的三种方式
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> & ...
随机推荐
- 【带着canvas去流浪(15)】threejs fundamentals翻译系列1-scene graph
示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 目录 ...
- Kafka 的一些知识点整理【1】
First: Kafka 是什么? Kafka 是一个发布订阅系统 最初是是LinkedIn 开发 最后交给Apache 开源组织 github地址:https://github.com/apache ...
- Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现
项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...
- VMware Centos7 NAT 无法上网的解决方法
问题描述: VMware下CentOS7使用NAT上网方式无法连网 解决方案: 网络设置为DHCP自动获取IP 查看主机(不是虚拟机)的相关服务是否打开,主要是VMware DHCP 和VMware ...
- Java 集合排序策略接口 Comparator
1. 前言 最近用到了集合排序(基于 Java 8).现在我能用 Stream 的就用 Stream ,真香!排序可以这么写: List<People> peoples = new Arr ...
- 「雕爷学编程」Arduino动手做(19)—震动报警模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...
- Vue element-ui date-picker 结束时间大于开始时间且开始时间小于此刻(转)
转载自:https://blog.csdn.net/wintersweetGirl/article/details/82461412 <el-form ref="form" ...
- mysql运维入门5:MySQL+kepalived高可用架构
keepalive 类似3/4/7层交换机制的软件,也就是平时说的第三层.第四层.第七层交换 作用是检测web服务器的状态,如果有一台web服务器.mysql服务器宕机.或工作出现故障,keepali ...
- Gym101142G Gangsters in Central City
题目链接:https://cn.vjudge.net/problem/Gym-101142G 知识点: DFS序.LCA 题目大意: 给定一棵有根树(根为 \(1\)).每次修改叶子节点会被染成黑色( ...
- Fundamental ES6 Part-I
Exercise-01 with Solution Write a JavaScript program to compare two objects to determine if the firs ...