用JQ方式写显示隐藏方块

最新推荐文章于 2023-09-14 18:51:30 发布
最新推荐文章于 2023-09-14 18:51:30 发布
阅读量1.4k 收藏
点赞数
文章标签： mvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54668000/article/details/124477426
版权


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


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

weixin_54668000
关注
使用jQuery隐藏div元素
PixelLogic的博客
09-21 356
在网页开发中，有时我们需要根据特定条件来隐藏或显示某个div元素。在本文中，我将向您展示如何使用jQuery来隐藏div元素。这样，您就可以使用jQuery来隐藏div元素了。接下来，我们将为要隐藏的div元素添加一个唯一的标识符，以便我们可以通过jQuery选择器找到它。现在，我们可以使用jQuery来选择这个div元素并将其隐藏起来。如果您希望在某个事件发生时隐藏元素，可以将代码放在事件处理程序中。在这个例子中，我们为按钮元素添加了一个id属性，并将点击事件处理程序绑定到该按钮。让我解释一下这段代码。
jQuery 效果 – 隐藏和显示
weixin_44541143的博客
07-18 358
jQuery 效果 – 隐藏和显示 大家好，现在，我来大家讲一下jQuery中的两个效果，它们分别是隐藏和显示。我们想要隐藏和显示HTML元素，我们可以通过jQuery代码来实现隐藏和显示。 我们可以通过jQuery 代码中的hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。 现在我来给大家实践操作一下...
JQ显示或隐藏
博客
07-12 6880
$("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的...
JavaScript显示和隐藏某个div
dusea的博客
10-03 2651
JavaScript显示和隐藏某个div var target=document.getElementById('rightup'); if (target.style.display=="block"){ target.style.display="none"; } else { t
jQuery显示隐藏div的几种方法
ruoxuan25的博客
05-29 2万+
1、$("#demo").attr("style","display:none;");//隐藏div$("#demo").attr("style","display:block;");//显示div2、$("#demo").css("display","none");//隐藏div$("#demo").css(
JQuery隐藏和显示div元素的三种方法
最新发布
许三金的博客
09-14 3834
toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。hide() 方法隐藏被选元素。show() 方法显示隐藏的被选元素。该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种隐藏和显示状态切换的效果。;;
jQuery.each()循环及隐藏显示和淡入淡出特效
opo77_的博客
10-12 903
循环 利用循环方法遍历匹配结果集中的所有元素。 .each()方法 两种用法 1.获取结果集中每个元素的信息 2.在每个选中元素上执行一系列操作 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
jQuery中隐藏元素的hide方法
weixin_54664933的博客
09-08 2201
在我们想要隐藏页面中的某个元素时，我们会想到使用css样式中的hover伪类。通过给元素设置hover属性从而达到一个隐藏效果。但是这个方法只适用于隐藏少部分的元素，在后期我们还想要将其他元素进行隐藏的时候会很麻烦，需要一个一个的添加属性。接下来我们将学会如何使用jQuery隐藏元素hide。 首先先搭建好页面基础样式，放几个button标签作为按钮： 其次我们给标签设置css样式，button标签我们用作为点击事件的。div标签就作为我们需要隐藏的 元素。我们需要实现的效果是，当我们点击它们相对应的按钮
基于JQuery实现数据展示方面基本特效
07-15
同时，`.slideUp()`和`.slideDown()`可用来控制元素的滑动显示和隐藏，增加动态感。 结合SpringMVC框架，我们可以构建后端服务来提供动态数据。SpringMVC是Java Web开发中的一个强大组件，它负责接收HTTP请求，处理...
jquery之别踩白块游戏的简单实现
12-03
- 显示/隐藏元素：利用`.show()`和`.hide()`方法控制模态框和其他元素的可见性。 4. **JavaScript逻辑**： - 计分系统：每次点击黑色方块，分数加1，存储在`<span id="score">`中，可通过`$("#score").text()`...
jQuery点击空白处隐藏弹出层
无知的博客
06-22 1427
jQuery点击空白处隐藏弹出层 $(function () { $('#btnShow').click(function (event) { //取消事件冒泡 event.stopPropagation(); //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可
jQuery给div内所有子元素设置隐藏/禁用
ITCodeCraft
12-26 4734
前言 该功能的应用场景,同一个form中有多个同name的元素(多个CheckBox相同name,并非一个CheckBox内有多个同name的input,如下图:) 要求两个div同时显示,用hidden的话值还是会传到后台去,造成干扰,又不能直接给div设置disabled,所以需要禁用div内所有元素,该方式完美解决. 添加属性 $("div *").attr("disabled"...
JS jQuery显示隐藏div的几种方法
热门推荐
未曾远去
09-18 14万+
&lt;div id="demo"&gt;AAA&lt;/div&gt; JS隐藏和显示div的方式有两种： 方式1：隐藏后释放占用的页面空间 通过设置display属性可以使div隐藏后释放占用的页面空间. style="display: none;" document.getElementById("demo").style.display="none";//隐藏 document.ge
jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。
简单就是美
06-07 2万+
jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。 在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息，思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在。 event对象包含了一个重要属性：target(W3C)/srcElem
通过jQuery实现点击按钮，隐藏一个div，显示另一个div
刘亚男
03-23 3248
这种方式可以避免跳转页面，在一个页面中显示不同的结果。 <div id="div1" style="width:150px;height:50px;background-color:springgreen;"> 这是第一个div </div> <div id="div2" style="width:150px;height:5...
jQ效果 - 隐藏和显示
xiaoxing1213的博客
05-17 4651
1.首先写三个按钮标签，给它们命名id名。 2.然后在写你要隐藏的标签。 3.把id为box1写上css样式 4.然后再写JS标签，把JQ插件放进去。 5.给上面按钮获取点击事件第一个是隐藏按钮 id是btn1，然后获取你要隐藏的标签id,(隐藏单词 hide),hide后面的（）是写时间的单位是毫秒。 6.显示的格式跟上面的隐藏是一样的就是显示单词和按钮id不一样。（显示单词 show） 7.还有一个切换写法一样，切换的单词是 toggle，记住 hide，show，.
jQuery显示隐藏
chenqiuqian的博客
07-21 2169
点击显示，这个div盒子就会向下放知道恢复到我们给元素设置的高度，向上收隐藏可以使用slideUp（）方法，向下放显示可以使用slideDown（）方法。点击显示和隐藏按钮，div盒子的透明度就会从零到一或者一到零，中间有一秒的过度事件这个过度事件也可以自己设置，透明度从零到一可以使用fadeIn（）方法，透明度从一到零可以使用fadeOut（）方法。先给两个按钮，一个是显示一个隐藏，然后给它们做点击事件，然后给一个盒子做显示隐藏的时候可以看效果。有一种是用透明度的方法去显示隐藏盒子。...
jQuery---用jq实现控件的显示和隐藏
记忆、深处
12-28 2696
因为发现这个功能用的比较频繁，所以分享一下： 先说一下，隐藏控件有两种方式：style="visibility: hidden;"和style="display: none;"，个人比较喜欢使用style="display: none;"，因为style="visibility: hidden;"虽然隐藏了控件，但还是会保留隐藏元素的空间 1. //用jq给控件加一个css样式 $("#id")....
jq 控制div显示隐藏
06-11
可以使用 jQuery 的 toggle() 方法来实现 div 的显示和隐藏。toggle() 方法可以在显示和隐藏之间进行切换。 例如，你可以在 HTML 中创建一个按钮和一个 div 元素： ``` <button id="toggleBtn">点击切换</button> <div id="myDiv">这是要显示和隐藏的内容</div> ``` 然后在 JavaScript 中，使用 toggle() 方法来切换 div 元素的显示和隐藏： ``` $(document).ready(function(){ $("#toggleBtn").click(function(){ $("#myDiv").toggle(); }); }); ``` 当按钮被点击时，toggle() 方法会检查 div 元素的显示状态，并切换它的状态。如果 div 元素当前是隐藏的，则 toggle() 方法会将其显示出来。如果 div 元素当前是显示的，则 toggle() 方法会将其隐藏起来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值