开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当点击按钮时，在jquery中动态显示附加到类别的所有div

在jQuery中，可以通过使用.click()方法来为按钮添加点击事件。当按钮被点击时，可以使用.show()方法来显示附加到特定类别的所有div元素。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>动态显示附加到类别的所有div</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .category {
      display: none;
    }
  </style>
</head>
<body>
  <button id="showDivsBtn">点击显示div</button>

  <div class="category1">
    <div>这是类别1的div 1</div>
    <div>这是类别1的div 2</div>
    <div>这是类别1的div 3</div>
  </div>

  <div class="category2">
    <div>这是类别2的div 1</div>
    <div>这是类别2的div 2</div>
    <div>这是类别2的div 3</div>
  </div>

  <div class="category3">
    <div>这是类别3的div 1</div>
    <div>这是类别3的div 2</div>
    <div>这是类别3的div 3</div>
  </div>

  <script>
    $(document).ready(function() {
      $('#showDivsBtn').click(function() {
        $('.category').show();
      });
    });
  </script>
</body>
</html>

在上述示例中，我们首先使用CSS将所有类别的div元素隐藏起来（.category { display: none; }）。然后，通过jQuery选择器$('.category')选择所有类别的div元素，并使用.show()方法将它们显示出来。

当点击按钮（id为showDivsBtn）时，会触发点击事件处理程序。在事件处理程序中，我们使用.click()方法为按钮添加了一个点击事件。在点击事件处理程序中，我们使用选择器$('.category')选择所有类别的div元素，并使用.show()方法将它们显示出来。

这样，当点击按钮时，附加到类别的所有div元素将会动态显示出来。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery Mobile的学习时间botton按钮的事件学习

事件描述 hashchange 启用可标记 #hash 历史，哈希值会在一次独立的点击时发生时变化，比如一个用户点击后退按钮，会通过 hashchange事件进行处理。...pagechangefailed 在页面切换失败时，触发的事件。...pageload 在页面完全加载成功后触发。 pageloadfailed 如果页面请求失败触发。 pageremove 在窗口视图从 DOM 中移除外部页面之前触发。...tap 当用户敲击某元素时触发。 taphold 当元素敲击某元素并保持一秒时触发。...throttledresize 启用可标记 #hash 历史记录 updatelayout 由动态显示/隐藏内容的 jQuery Mobile 组件触发。

1.6K2 0

前端之jQuery

，在3.x版本的jQuery中则没有这个问题。...3.6.4阻止后续事件执行使用场景：当一个标签绑定了多个事件而我们只希望指定的事件被触发时使用。...目的：我们已经创建好的事件如果想被动态创建的标签使用就需要用到事件委托，比如已经创建好了按钮点击的事件如果我们要将这个事件绑定给动态创建的一个按钮就通过事件委托，将事件绑定给按钮的父标签，这样当子标签...（按钮标签）触发时就会出发父标签的事件。...终止each循环 return false； 3.9.2.data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

4.9K2 1

02-老马jQuery教程-jQuery事件处理

keydown([[data],fn]) $('p').keydown(fn); 当键盘或按钮被按下时，发生 keydown 事件。...keyup([[data],fn]) $('p').keyup(fn); 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。...当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。...实例： // 当所有段落被第一次点击的时候，显示所有其文本。...IE678：window.event 标准浏览器直接从事件处理程序的参数中获得事件对象e e = e || window.event; 在jQuery的事件处理程序中，可以直接获取事件对象，所有浏览器都兼容

6.4K0 0

jQuery，和嵌入其中的Ajax

事件处理程序指的是当 HTML中发生某些事件时所调用的方法。实例：在元素上移动鼠标。...选取单选按钮点击元素在事件中经常使用术语"触发"（或"激发"）例如："当您按下按键时触发 keypress 事件"。 ?...事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标。...选取单选按钮点击元素 jQuery 事件方法语法在 jQuery 中，大多数 DOM 事件都有一个等效的jQuery 方法。... 下面的例子会把文件 "demo_test.txt" 的内容加载到指定的元素中：实例 $("#div1").load("demo_test.txt"); 也可以把 jQuery 选择器添加到

3.1K2 0

＜SpringMVC实践项目：【简易对话留言板（数据存在数据库中）】＞

/mapper创建所有表的xml⽂件 # classpath对应resources这个目录，接下来说明在mapper这个文件夹下面，以Mapper.xml结束的都可以被加载一、前端代码注：当数据在内存中存储的...重新加载url时，如果数据存在submit函数中，刷新的时候，不会去执行，只有在点击提交的时候才会执行这个函数。因此我们还需要在submit外面，里面写一段代码。：这是一个描述文本，带有 grey 类，提示用户在输入后点击“提交”按钮，会将信息显示在下方空白处。...GET 请求，从服务器端获取留言数据，并将每条留言动态添加到页面的 .container 元素中。...success 回调函数：当 AJAX 请求成功完成时执行该函数。 messages：代表从服务器返回的数据。假设它是一个数组，每个元素代表一条留言。

651 0

＜SpringMVC实践项目：【简易对话留言板（数据存在内存中）】＞

当服务器重新加载的时候，数据就消失了，下一个版本，是将数据存入数据库。一、前端代码注：当数据在内存中存储的，服务器刷新，数据就没有了。...重新加载url时，如果数据存在submit函数中，刷新的时候，不会去执行，只有在点击提交的时候才会执行这个函数。因此我们还需要在submit外面，里面写一段代码。：这是一个描述文本，带有 grey 类，提示用户在输入后点击“提交”按钮，会将信息显示在下方空白处。...GET 请求，从服务器端获取留言数据，并将每条留言动态添加到页面的 .container 元素中。...也就是集合List messageInfos = new ArrayList();中当服务器一直运行时，数据就一直在。当然如果重启了，数据就没了。

1171 0

前端实时更新后端处理进度之进度条实现

情景需求在做图形提交界面时，点击提交按钮后，系统需要较长时间做处理，前端需要动态显示处理进度，并在完成后显示处理结果实现逻辑 1. 点击按钮后向后台发送数据处理请求2. 后台处理数据3....前端：html + Jquery + bootstrap2....> JS 在$(document).ready设定form提交时的函数,函数中我们使用setInterval函数完成持续向后端请求进度操作...当全局变量不被识别的时候使用global关键字。...测试过程中 ? 测试完成 ? 第一次使用CSS的时候

11.1K3 0

JQuery的学习

JQuery对象和JS对象区别与转换： 1.JQuery对象在操作时，更加方便； 2.JQuery对象和JS对象方法不通用； 3.两者相互转换： * JQuery --> JS : JQuery...* 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾 2.prepend():父元素将子元素追加到开头 * 对象1.prepend(对象2)：将对象2添加到对象...1元素内部，并且在开头 3.appendTo():父元素将子元素追加到末尾 * 对象1.appendTo(对象2)：将对象1添加到对象2元素内部，并且在末尾 4.prependTo():父元素将子元素追加到开头...* 对象1.prependTo(对象2)：将对象1添加到对象2元素内部，并且在开头 5.after():添加元素到元素后边 * 对象1.after(对象2)：将对象2添加到对象1后边。...) * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....

16.6K2 0

在 jQuery Mobile 中使用 UI 组件

第二个选项是在对话框中的超链接上使用 data-rel 属性，并将其值设置为 back，如以下代码所示。当在对话框中包括一个 Cancel 按钮时，这是一个不错的选项。...在 jQuery Mobile 中，页眉的默认用法是作为固定在 Web 页面顶部的页面标题；在大部分情况下，页脚是 Web 页面中的最后一个元素，并且包括版权信息、其他超链接等内容。... navbar 用于在一个页眉或页脚内显示多达五个按钮或导航项。...ui-block-b"> Right column 从一组 HTML 元素创建网格时默认使用的 CSS 类是 ui-grid-* 类。...点击它时，将显示完整的内容，并且 + 图标将变成一个 - 图标，表示按钮可以被再次点击以关闭完整的内容，并回到默认的按钮状态。创建简单的列表列表是在移动网站上能看到的一个常用元素。

8.1K2 0

jquery jQuery快速入门

h1标签的div标签 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has...empty()// 删除匹配的元素集合中所有的子节点。例子：点击按钮在表格添加一行数据。点击每一行的删除按钮删除当前行数据。...").click(function () { alert("div"); }) 页面载入当DOM载入就绪可以查询及操纵时绑定一个要执行的函数...示例：表格中每一行的编辑和删除按钮都能触发相应的事件。...当这种情况发生时，它通常不需要显式地循环的 .each()方法：也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了： $("li").addClass("c1"); // 对所有标签做统一操作

16.2K5 0

「jQuery」基础 - 03

案例：发布微博案例点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。点击的删除按钮，可以删除当前的微博留言。 <!...因为ul中的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。...可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...点击待办事项复选框，就可以把当前数据添加到已完成事项里面。点击已完成事项复选框，就可以把当前数据添加到待办事项里面。但是本页面内容刷新页面不会丢失。

2.8K3 0

jQuery

$("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签　　　　　　练习（先看一个jQuery的click...$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签...//但是这里注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签，这个记住昂 // 删除按钮绑定的事件 }) 页面载入　　　　当DOM载入就绪可以查询及操纵时绑定一个要执行的函数...(function () { // 点击新增按钮要做的事儿 showModal(); }); // 点击modal中的cancel按钮 $("#cancel...多用于插件开发者向 jQuery 中添加新函数时使用。

8.9K2 0

前端(四)-jQuery

选取多种元素(里面可以是标签名，类名，id名) 全局选择器 * 选取所有元素 2.2 层次选择器语法说明 ancestor desscendant 后代选择器 A B partn>child 子选择器...() 遍历例子 //遍历所有的li元素 //隐式迭代:自动遍历集合中的所有元素 $("li").each(function(index,elm){ alert(index); alert...($(elm).html()); }); $("li").each(function(){ //注意:elm时dom元素对象,不可以直接使用jQuery方法,必须是转化为jQuery节点 alert...toggleClass(类名) 相当于addClas("类名")，removeClass() 4.4 jQuery 动画效果 4.4.1 控制元素的显示及隐藏方法说明 show() 立刻显示 show...> $(function(){ // 需求1：当点击全选按钮的时候，下面的四个按钮也被选中 $("#min_check").click(function(){

8.5K3 0

一个小时学会jQuery

在jQuery中，可以获取同一类名的多个HTML元素，编写方式同CSS，即在类名的前面加上点号。.../所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文件域 4.5、筛选与查找 $("p").eq(0) //当前操作中第N个jQuery对象,类似索引 $...,触发 blur事件 $("button").mousedown()//当按下鼠标时触发事件 $("button").mouseup() //节点上放松鼠标按钮时触发事件 $("p").mousemove...$(window).keydown() //当键盘或按钮被按下时触发事件 $(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次 $("input").keyup...() //当按钮被松开时触发事件 $(window).scroll() //当用户滚动时触发事件 $(window).resize() //当调整浏览器窗口的大小时触发事件 $("input[type=

18.5K7 1

02-老马jQuery教程-jQuery事件处理

keydown([[data],fn]) $('p').keydown(fn); 当键盘或按钮被按下时，发生 keydown 事件。...实例： // 当所有段落被第一次点击的时候，显示所有其文本。... 请点击这里 // jQuery 代码: $("div").delegate("button","click",function(){ $...IE678：window.event 标准浏览器直接从事件处理程序的参数中获得事件对象e e = e || window.event; 在jQuery的事件处理程序中，可以直接获取�事件对象，所有浏览器都兼容...$(function () { // 给按钮绑定多个jQuery的事件 // 给按钮绑定点击事件，后面的.和demo就是命名空间 $('#btn').on('click.demo', function

2.7K8 0

JQuery快速入门

在使用jQuery时，需要注意jQuery对象和DOM对象的区别，通常对于jQuery对象，会在变量前加$，如var $variable=jQuery对象;。可以通过如下方式对两者进行转化。...获取所有单选框/多选框 :submit,:reset,:button 选取单选按钮、多选按钮、任意按钮 :image, :file 选取所有图像按钮，所有上传域 Tip：html元素的id包含#，（，...之前就介绍的$(document).ready()相信大家都不会陌生，其与window.onload实际上有一些区别的，前者是当DOM加载完成后触发，而后者则是页面中的所有元素(包括所有关联元素)加载完成后执行...事件冒泡就是当页面上有个元素时，其中一个嵌套在另一个中，如果均绑定了click事件，那么触发内层元素的click事件时，会同时触发外部的click事件。...这样的机制在有时是需要的，但有时却不是期望的，那么就绪要通过event.stopPropagation()方法来禁止事件的冒泡了，此外，在jQuery中，可以通过event.preventDefault

2.6K10 0

SSM整合案例

例如点击一个按钮，向一个div追加5条记录，那么下一次点击按钮，又会调用一次ajax请求，向里面追击五条与先前重复的记录，因此每一次在追加之前，需要先将之前追加的记录或者追加的标签属性清除 jquery...--分页参数合理化，当小于0时，查询第一页，当大于总页数时，查询最后一页--> ...例如点击一个按钮，向一个div追加5条记录，那么下一次点击按钮，又会调用一次ajax请求，向里面追击五条与先前重复的记录，因此每一次在追加之前，需要先将之前追加的记录或者追加的标签属性清除 ---- jquery...$("#emp_save").attr("ajax-va","error"); } } }); }); //当保存按钮点击以后...id,方便一会通过在按钮点击事件中获取到id值，从而通过ajax返回给服务器端，进行删除逻辑操作使用ajax时,在获取到服务器端发送来的数据后，可以在成功的回调函数中，获取数据，然后通过append等方式

4.1K2 1

一文玩转jQuery+Ajax

基础选择器选择器写法举例说明 ID选择器 $("#mydiv") 选择id为mydiv的元素元素选择器 $("div") 选择所有的div元素类选择器 $(".blue") 选择所有class...-- 第二个大DIV包含一个div --> 选择器2 选择器2中的div <!...$(":radio") 查找所有的单选按钮复选框选择器 $(":checkbox") 查找所有的复选框提交按钮选择器 $(":submit") 查找所有的提交按钮图像域选择器 $(":image...") 查找所有的图像域重置按钮选择器 $(":reset") 查找所有的重置按钮按钮选择器 $(":button") 查找所有的按钮文件域选择器 $(":file") 查找所有的文件域 <!...4被点击了"); }).mouseout(function () { console.log("按钮4离开了"); }) jQuery Ajax $

4K2 1

Web阶段：第五章：JQuery库

点击：API文档下载 Jquery介绍 1.什么是JQuery ? jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。...3.JQuery流行程度 jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...1、使用jquery一定要引入jquery库吗？答案：是2、jquery中的到底是什么？答案：核心函数3、怎么为按钮添加点击响应函数的？...jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果练习：CSS_动画品牌展示需求： 1.点击按钮的时候，隐藏和显示卡西欧之后的品牌...2.当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。 3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。

26.3K2 0

jQuery

//DOM加载完成的入口 }) jQuery的顶级对象：$ `是jQuery 别称，在代码中`和jQuery和等价，为了方便都是$。...//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。...//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次 hide([speed,[easing],[fn]]);//中括号表示可以省略此参数，无动画直接显示 3.切换显示和隐藏 toggle...（3）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。...可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

21.1K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭