用JQ方法写显示隐藏方块

最新推荐文章于 2022-05-17 14:43:18 发布
最新推荐文章于 2022-05-17 14:43:18 发布
阅读量1.2k 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunflower_knight/article/details/124469116
版权

  • 代码

首先我们先创建好显示，隐藏的button按钮还有需要隐藏和显示的元素div

其次为我们的div元素添加上自己喜欢的样式

然后我们需要引入外部样式jquery，再写一个页面加载事件，然后绑定显示按钮然后获取到div并为其添加show()显示属性并在里面写上需要执行的时间和回调函数，绑定隐藏按钮和绑定显示按钮的方法一样只是显示的是show（）隐藏的是hide（）

总结；

这次的案例是以JQ的方法来写显示和隐藏方块这种方法相比之前的要更加简单，这次的重点在于掌握hide()和show()的使用方式,show和hide的方式是有参数的：参数1：时间以毫秒为单位计算1000毫秒==1秒 参数2：回调函数--动画执行完毕后才会执行

 

Sunflower_knight
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery和js实现对div的隐藏和显示方法
12-01
jQuery对div的显示和隐藏： 显示： 代码如下: $(“#id”).show() 隐藏： 代码如下: $(“#id”).show() js对div的显示和隐藏： div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 代码如下: style...
前端杂记（二）jquery实现元素隐藏的四个方法(附测试代码)
bkk854762363的博客
01-29 465
页面结构 div> h2>titleh2> input type="button" value="click"/> div> 四种方法 $('h2').hide()与$('h2').show() – 常用方法 $('h2').attr('hidden','')与$('h2').removeAttr('hidden') $('h2').css('display','
jQ效果 - 隐藏和显示
xiaoxing1213的博客
05-17 4586
1.首先写三个按钮标签，给它们命名id名。 2.然后在写你要隐藏的标签。 3.把id为box1写上css样式 4.然后再写JS标签，把JQ插件放进去。 5.给上面按钮获取点击事件第一个是隐藏按钮 id是btn1，然后获取你要隐藏的标签id,(隐藏单词 hide),hide后面的（）是写时间的单位是毫秒。 6.显示的格式跟上面的隐藏是一样的就是显示单词和按钮id不一样。（显示单词 show） 7.还有一个切换写法一样，切换的单词是 toggle，记住 hide，show，.
jquery控制元素的隐藏和显示的几种方法
热门推荐
杨明金的博客
11-07 1万+
使用jquery控制div的显示与隐藏，一句话就能搞定，例如： 方法一 显示： $("#id").show()表示为display：block， 隐藏： $("#id").hide()表示为display:none; 方法二 $("#id").toggle(); 切换元素的可见状态。如果元素是可见的，切换为隐藏的； 如果元素是隐藏的，则切换为可见的。 方法三 显示： $("#id").css('display','block');//显示 隐藏： ...
jQ实现轮转方块
Alicesa的博客
08-28 187
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮动方块</title> </head> <style> body { text-align: center } .box { margin: 0 auto; } .box2 { bo
jquery实现div模块的隐藏和显示
信徒博客
04-04 1920
1、点击按钮 <button id="fat-btn" class="btn btn-primary" type="button" onclick="show();">请选择种类</button> 2、div模块是隐藏的状态还是显示的状态 <ul style="list-style:none;" id="uli"> <li>五谷杂粮&...
JQuery DIV 动态隐藏和显示的方法
10-22
主要介绍了JQuery DIV 动态隐藏和显示的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
JQ 内容的显示与隐藏
06-10
NULL 博文链接：https://onestopweb.iteye.com/blog/2339062
jQuery实现切换隐藏与显示同时切换图标功能
10-19
主要介绍了jQuery实现切换隐藏与显示同时切换图标功能,需要的朋友可以参考下
jQuery效果（显示与隐藏，滑动效果，动画队列和停止排队，淡入和淡出，自定义动画）
laisy334514的博客
09-02 1940
1.显示与隐藏 显示 show([speed,[easing],[fn]]) （中括号表示可以省略） speed : （速度） "slow" , "normal" , "fast" , 或者毫秒数（1000 | 2000......) easing : （切换效果） "swing"（先慢后快再慢） , "linear" （匀速） fn : （回调函数），动画完成时执行，每个元素执行一次 隐藏 hide([speed,[easing],[fn]]) 参数含义与显示相同 准备一个盒子，...
使用jq来让盒子消失
gghhm的博客
05-22 1346
使用jq来让盒子消失 写代码之前，先说一下jq; jq:一般是指jQuery。JQuery是一个优秀的javascript类库，jQuery以其简洁、快速等优点征服了众多javascript开发者。jQuery使用户能更方便地处理DOM、events、实现动画效果，并且方便地为网站提供Ajax交互。 我发一个jq的文件，你先把这个文件放到和你写HTML的文件相同的文件夹下： 链接：https://...
jq中三种显示及隐藏方法
Mrzhaoplus的博客
11-12 2892
div{     width: 450px;     height: 200px;     background: red;     display: none;    }                /*     *整个方法最主要的就是fadein(),fadeout()显示及隐藏的方法，     * */    $(function(){     //点击显示时让
javascript和jquery实现页面元素显示/隐藏切换的方法
liaomingwu的专栏
01-06 4543
javascript和jquery实现页面元素显示/隐藏切换的方法
jQuery方法---隐藏与显示
weixin_50652993的博客
08-11 1662
jQuery方法---隐藏与显示一、隐藏方法二、显示方法三、隐藏/显示方法切换 一、隐藏方法 直接隐藏 //当点击按钮时，盒子被隐藏 $("button").click(function(){ $("div").hide(); }); 过渡隐藏 //当点击按钮时，盒子被隐藏,隐藏过程的速度为1s $("button").click(function(){ $("div").hide(1000); }); 二、显示方法 直接显示 //当点击按钮时，显示盒子（初始时盒子被隐藏） $("button").
基于Jquery的内容显示模块
weixin_30802273的博客
04-23 66
最近在学习Jquery，看到好多网站的内容切换模块，也想用Jquery做一个。很简单。代码如下： <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlx...
jQuery 实现显示与隐藏效果
ivenqin的博客
07-23 1279
本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效。 hide()方法 hide() 方法用于隐藏指定的元素，与 CSS 中的 display:none 效果类似。 语法如下所示： $(selector).hide(speed,easing,callback) speed：可选，规定隐藏效果的速度。可选值为 slow、fast、毫秒。 easing：可选，规定在动画的不同点上元素的速度，可选值为 swing、linear。 callback：可选，hide() 方法执行完之后，要执行
显示隐藏模块实现的几种方式
慕白博客
08-01 2416
显示隐藏模块实现的几种方式 网页结构： &lt;style&gt; body { width: 400px; margin: 0 auto; } .btn { width:50%; height: 30px; } #box { width: 200px; height：100px; background-color: red; ...
使用JQ实现显示以及隐藏功能
qq_57754812的博客
07-28 3677
使用JQ实现显示隐藏功能 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： JQ 撰写时间：2021/7/28 注意红色箭头指向内容，本文将分为4张图片，并按从上到下顺序操作 1.我们先简单看看效果。 2.浏览器打开，点击隐藏或者显示按钮就能看到隐藏或者显示的效果。 3.开始，我们要通过script标签引入jquery-1.11.1.mi...
jq 控制div显示隐藏
最新发布
06-11
可以使用 jQuery 的 toggle() 方法来实现 div 的显示和隐藏。toggle() 方法可以在显示和隐藏之间进行切换。 例如，你可以在 HTML 中创建一个按钮和一个 div 元素： ``` 点击切换 这是要显示和隐藏的内容 ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值