首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery显示一个div 4秒,然后将其隐藏并显示另一个div 1.4秒,最后在循环中显示第一个包含一些文本的div

要实现这个需求,可以使用JQuery的动画效果和定时器来控制div的显示和隐藏。

首先,需要在HTML文件中引入JQuery库:

代码语言:txt
复制
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

然后,在HTML文件中添加三个div,分别是要显示的div、要隐藏的div和包含文本的div:

代码语言:txt
复制
<div id="showDiv">显示的div</div>
<div id="hideDiv" style="display: none;">隐藏的div</div>
<div id="textDiv">包含文本的div</div>

接下来,在JavaScript代码中使用JQuery来实现动画效果和定时器:

代码语言:txt
复制
$(document).ready(function() {
  // 显示showDiv并延迟4秒后隐藏并显示hideDiv
  $("#showDiv").show().delay(4000).hide(0, function() {
    $("#hideDiv").show();
  });

  // 循环显示textDiv
  setInterval(function() {
    $("#textDiv").toggle();
  }, 1400);
});

解释一下代码的逻辑:

  1. $(document).ready(function() { ... }); 表示当页面加载完成后执行其中的代码。
  2. $("#showDiv").show().delay(4000).hide(0, function() { ... }); 表示先显示showDiv,然后延迟4秒后隐藏showDiv,并在隐藏完成后执行回调函数,其中回调函数中的代码用于显示hideDiv。
  3. setInterval(function() { ... }, 1400); 表示每隔1.4秒执行其中的代码,其中代码用于切换textDiv的显示和隐藏状态。

这样,就实现了JQuery显示一个div 4秒,然后将其隐藏并显示另一个div 1.4秒,最后在循环中显示第一个包含一些文本的div的效果。

关于腾讯云相关产品和产品介绍链接地址,可以根据具体需求选择适合的产品,例如:

  • CDN加速服务:用于加速网站内容分发,提高访问速度。详情请参考:CDN加速服务 -云服务器CVM:提供弹性计算能力,满足不同规模业务的需求。详情请参考:云服务器CVM
  • 云数据库MySQL版:提供高性能、高可靠性的MySQL数据库服务。详情请参考:云数据库MySQL版
  • 人工智能服务:提供多种人工智能能力,如图像识别、语音识别等。详情请参考:人工智能服务
  • 物联网套件:提供物联网设备接入、数据采集、设备管理等功能。详情请参考:物联网套件
  • 移动推送服务:用于向移动设备推送消息和通知。详情请参考:移动推送服务
  • 对象存储COS:提供海量、安全、低成本的云端存储服务。详情请参考:对象存储COS
  • 区块链服务:提供区块链应用开发和部署的一站式解决方案。详情请参考:区块链服务

以上是一些腾讯云的产品示例,具体选择和推荐的产品应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移除jQuery好像也没那么难

我最近从我博客中移除了 jQuery,并发现自己不断地谷歌上搜索一些模式。...为了节省大家时间,我编写了这个实用参考指南,列出了一些最常见 jQuery 模式及其 JavaScript 中等价物。我们将涵盖如何从这些概念和函数迁移到纯 JavaScript。...(".box").forEach(box => { box.style.display = "none" }); 一个元素内找到另一个元素 一个常见 jQuery 模式是使用 .find() 选择一个元素内另一个元素...".button").textContent = "新文本"; document.querySelector(".button").textContent; // 返回 "新文本" 要创建一个新元素并将其添加到另一个元素中...(element); 综合起来,下面是如何创建一个 div 元素,更新其文本和类名,并将其添加到 DOM 中示例: // 创建一个 div 元素 var element = document.createElement

9810

JavaWeb(八)JQuery

jquery 里面只有一个对象 jQuery == $) 7:出色浏览器兼容性 8:链式操作方式($("#ddd").addClass().removeClass()) 9:隐式迭代 (显示迭代...:完善文档 JQuery加载 从  http://jquery.com/  下载后,复制到项目(路径:WebContent/js)中,然后页面生命: 1 <script type="text/javascript...,<em>然后</em>调用attr()) 3:<em>文本</em>节点 (先找到元素节点<em>然后</em>调用text()) 节点<em>的</em>创建: 元素节点<em>的</em>创建,属性节点,<em>文本</em>节点 <em>jQuery</em> 当中<em>的</em>事件 通常会把 <em>jQuery</em> 代码放到 ...event.result <em>包含</em>由被指定事件触发<em>的</em>事件处理器返回<em>的</em><em>最后</em><em>一个</em>值。 event.target 触发该事件<em>的</em> DOM 元素。...() 逐渐改变被选元素<em>的</em>不透明度,从可见到<em>隐藏</em> fadeTo() 把被选元素逐渐改变至给定<em>的</em>不透明度 hide() <em>隐藏</em>被选<em>的</em>元素 queue() <em>显示</em>被选元素<em>的</em>排队函数 show() <em>显示</em>被选<em>的</em>元素

1.8K40

jQuery中常用函数和属性详细解析

例子 $("#div1").find("p").hide().end().hide() 第一个hide()是对于p标签 然后用end()结束对p标签引用而返回到#div1标签 所以第二个hide(...show( speed, [callback] ) 以优雅动画显示所有匹配元素,并在显示完成后可选地触发一个回调函数。 hide( ) 隐藏所有的匹配元素。...slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配元素,显示完成后可选地触发一个回调函数。...标签元素所有的属于同一个父元素div标签 基本过滤选择器 $("tr:first") 匹配第一个选择元素 $("tr:last") 匹配最后一个选择元素 $("input:not(:checked...匹配所有不为空元素(含有文本元素也算) $("div:hidden") 匹配所有隐藏元素,也包括表单隐藏域 $("div:visible") 匹配所有可见元素 属性过滤选择器 $("div[

2.6K10

jQuery Cheat—Sheet(jQuery学习笔记)

函数接受CSS选择符作为参数,充当一个工厂,返回包含页面中对应元素jQuery对象。...jQuery 事件方法语法 jQuery 中,大多数 DOM 事件都有一个等效 jQuery 方法。 页面中指定一个点击事件: $("p").click(); 下一步是定义什么时间触发事件。...当鼠标移动到元素上时,会触发指定第一个函数(mouseenter,); 当鼠标移出这个元素时,会触发指定第二个函数(mouseleave)。...显示隐藏元素,隐藏显示元素: //点击button隐藏p标签,再次点击显示 $("button").click(function(){ $("p").toggle(); }); 淡入和淡出...这意味着如果您在彼此之后编写多个 animate() 调用, jQuery 会创建包含这些方法调用"内部"队列。然后逐一运行这些 animate 调用。

16.2K30

JQuery最全常用方法指南

show(speed, [callback]) 以优雅动画显示所有匹配元素,并在显示完成后可选地触发一个回调函数。 hide() 隐藏所有的匹配元素。...slideUp(speed, [callback]) 通过高度变化(向上减小)来动态地隐藏所有匹配元素,隐藏完成后可选地 触发一个回调函数。...(”#prev ~div”) 同胞选择器,选择prev所有同胞节点 基本过滤选择器 $(”tr: first”) 匹配第一个选择元素 $(”tr: last”) 匹配最后一个选择元素 $(”input...selector所有元素 $(”td: parent”) 匹配所有不为空元素(含有文本元素也算) $(”div: hidden”) 匹配所有隐藏元素,也包括表单隐藏域 $(”div: visible...可以有多个参数(合并多项返回) $.map(array, fn):数组映射。把一个数组中项目(处理转换后)保存到到另一个新数组中,返回生成新数组。

11K31

jQuery 教程

“h1,div,p”) 所有 、 和 元素 :first $(“p:first”) 第一个 元素 :last $(“p:last”) 最后一个 元素 :even...:first-of-type选择同一元素名称兄弟中第一个元素。 :last-child选择同父代最后一个子代元素。 :last-of-type选择同一元素名称兄弟中最后一个元素。...() 移除下一个排队函数,然后执行函数 fadeIn() 逐渐改变被选元素不透明度,从隐藏到可见 fadeOut() 逐渐改变被选元素不透明度,从可见到隐藏 fadeTo() 把被选元素逐渐改变至给定不透明度...fadeToggle() fadeIn() 和 fadeOut() 方法之间进行切换 finish() 对被选元素停止、移除完成所有排队动画 hide() 隐藏被选元素 queue() 显示被选元素排队函数... 这是段落一些文本

17K20

jQuery

元素,返回包含所有的 DOM 元素 jQuery 对象param 是 DOM 元素:将 DOM 元素对象包装成 jQuery 对象返回(this)param 是标签字符串: 创建标签 DOM 元素对象包装为..., value) 设置一个样式 css(多个样式对) 设置多个样式 代码示例: 取得第一个段落 color 样式属性值。...jQuery 对象内部元素中找出部分匹配元素, 封装成新 jQuery 对象返回 方法 描述 first() 获取第一个元素 last() 获取最后个元素 eq(index) 获取第 N 个元素...方法 描述 children(selector) 取得一个包含匹配元素集合中每一个元素所有子元素元素集合。...1.基本动画 方法 描述 show() 将隐藏元素显示 hide() 将可见元素隐藏 toggle() 可见就隐藏,不可见就显示 以上动画都可以添加参数: ① 第一个参数就是显示 执行时间,以毫秒为单位

10.8K20

与Ajax同样重要jQuery(1)

③:基本过滤选择器 :first 选取第一个元素 $("tr:first") :last 选取最后一个元素 $("tr:last") :not(selector) 去除所有与给定选择器匹配元素 $("...动画完成时执行函数 ④:内容过滤选择器 内容选择器是对子元素和文本内容操作 :contains(text) 选取包含text文本内容元素 $("div:contains...² 设置含有文本内容 ”传智播客” div 字体颜色为红色 ² 设置没有子元素div元素 文本内容 ”这是一个DIV“ ² 设置包含p元素 div 背景色为黄色 ² 设置所有含有子元素...: ² 为表单中所有隐藏域 添加 class属性,值为itcast ² 设置table所有 可见 tr 背景色 黄色 ² 设置table所有 隐藏tr 字体颜色为红色,显示出来 ,输出tr中文本值 <...区别 eq :first-child 选取第一个子元素 :last-child 选取最后一个子元素 :only-child 选取唯一子元素,它父元素只有它这一个子元素 练习7: ² 选择id属性mytable

10K60

学习jQuery这一篇就够了

IE8 及以下版本不支持 文件较小,执行效率更高 3.x 完全不再支持 IE8 及以下版本 提供了一些 API 提供不包含 AJAX / 动画 API 版本 # 1.4 jQuery 引入方式...jQuery 核心对象:即执行 jQuery 核心函数返回对象,jQuery 对象内部包含是 dom 元素对象伪数组 (可能只有一个元素),jQuery 对象拥有很多有用属性和方法,让程序员能方便操作...注意:如果存在(不存在)就删除(添加)一个样式类 需求描述:当单击按钮时候,隐藏 div,再次单击按钮时候,显示 div .hide { width: 100px; height...需求描述:创建一个显示 div然后隐藏该元素 .box { width: 200px; height: 200px; background: coral; display...需求描述:创建一个隐藏 div然后显示该元素 .box { width: 200px; height: 200px; background: coral; display

84250

Web前端基础(06)

DOM相关内容jQuery框架中基本实现了全覆盖,所以只需要掌握jQuery框架使用方式即可 ###jQuery框架 这是一个通过js语言所写框架,对原生js语言进行封装,作用:提高开发效率...匹配第一个div $(“div:last”) 匹配最后一个div $(“div:eq(n)”) 匹配下标为ndiv 从0开始 $(“div:lt(n)”) 匹配下标小于ndiv $(“div:gt...contains(‘xxx’)”) 匹配包含xxx文本div 可见选择器 $(“div:visible”) 匹配所有显示div $(“div:hidden”) 匹配所有隐藏div 显示隐藏相关方法...() 所有兄弟 .siblings() 父元素 .parent() 子元素们 .children() 过滤选择器 第一个 div:first 最后一个 div:last 第n个 div:eq(n) 小于...empty 非空元素 div:parent 包含文本元素 div:contains(xxx) 可见选择器 所有可见元素 div:visible 所有不可见 div:hidden 相关方法: 显示.show

2.7K20

BootStrap应用开发学习入门

HTML5 元素和 CSS 属性满足一些新特性: BS设计目标是移动设备优先然后才是桌面设备; BS全局显示、排版和链接 响应式布局以及图像响应式 BS支持跨浏览器一致性:使用了 Normalize.css...这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。 WeiyiGeek. 列表BS中支持有序列表、无序列表和定义列表。....form-control-static #一个水平表单内表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...嵌套: 您可以一个按钮组内嵌套另一个按钮组,即,一个 .btn-group 内嵌套另一个 .btn-group 。....text-danger #"#text-danger" 类文本样式 .text-hide #将页面元素所包含文本内容替换为背景图(文本隐藏) #背景颜色,文本是个链接鼠标移动到文本上会变暗

17.5K20

杨老师课堂之Jquery筛选,事件,效果,Ajax,javascript跨域)

•-index:一个整数,指示元素位置,从集合中最后一个元素开始倒数。...(1算起) first(),获取第一个元素 last(),获取最后个元素 hasClass(class),检查当前元素是否含有某个特定类,如果有,则返回true。...,然后把这些元素放进一个临时集合中,再用给定选择器表达式去过滤; 3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。...件对象一些属性程序中使用事件对象非常简单,只需要为函数添加一个参 数....跨域:一个服务器上,去访问另一个服务器 jQuery如何实现跨域请求?使用JSONP形式实现跨域。 javascript如果调用另一个域程序,不能执行当前域js函数。

8.2K20

BootStrap应用开发学习入门

HTML5 元素和 CSS 属性满足一些新特性: BS设计目标是移动设备优先然后才是桌面设备; BS全局显示、排版和链接 响应式布局以及图像响应式 BS支持跨浏览器一致性:使用了 Normalize.css...这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。 WeiyiGeek. 列表BS中支持有序列表、无序列表和定义列表。....form-control-static #一个水平表单内表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...嵌套: 您可以一个按钮组内嵌套另一个按钮组,即,一个 .btn-group 内嵌套另一个 .btn-group 。....text-danger #"#text-danger" 类文本样式 .text-hide #将页面元素所包含文本内容替换为背景图(文本隐藏) #背景颜色,文本是个链接鼠标移动到文本上会变暗

14.5K30

jQuery基础图文系列

:disabled 选择每个禁用input元素 :checked 选择每个选中input元素 :first-child 选择某个元素第一个元素 :last-child 选择某个元素最后一个子元素...类型 :nth-last-of-type() 和 nth-last-child() 类似,从最后一个子元素开始算 :first-of-type 选择一个上级元素第一个同类子元素 :last-of-type...find() 获取当前匹配元素集合中每个元素后代,由选择器进行筛选 .first() 将匹配元素集合缩减为集合中 第一个元素 .has() 将匹配元素集合缩减为包含特定元素后代集合 .is()...() 把所有匹配元素用指定内容或元素包裹起来 wrapinner() 将每一个匹配元素子内容用指定内容或元素包裹起来 jQuery hide() 和 show()隐藏显示 HTML 元素...$("p").remove();//删除所有p标签 查找元素 $("p").find("span")//查找p标签下span标签 显示隐藏匹配元素 $("p").show();//显示p标签 隐藏显示元素

4.5K10

jQuery(一)

栗子 找到所有拥有details类p元素,将其高亮显示, $('p.datails').css('background-color', 'yellow') jQuery()函数 Jquery中为最终要为...通过这种方法调用,$()会返回当前文档中匹配该选择器元素集。 第二种 传递一个Element,Document或Window对象给$()方法,$()将会将其封装成对象返回。...即 $(document) 或 $(this) 使用这种方法可以完成对节点操作 第三种 传递字符串文本给$()方法,jQuery将会根据传入文本创建好HTML元素,然后将其封装为jQuery对象返回...div中 $('a').clone().appendTo('#linklist'); // clone不会复制事件处理程序 // 一个链接后插入元素,使其能独立显示 $("#linklist...').wrap(''); // 将所有的其他段落包装在另一个div里 $('body > p:not(:first

2.1K40
领券