开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当点击按钮时，在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元素将会动态显示出来。

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

相关搜索:在Angular 8中选中单选按钮时将类添加到父div 当抽屉打开时，所有按钮在抽屉列表中重影点击当按钮具有类时，单击事件在JQuery中不起作用双十二威胁情报查询服务有活动吗双十二信誉查询服务有活动吗双十二专家服务有活动吗双十二安全专家服务有活动吗双十二企业安全解决方案有活动吗双十二安全咨询有活动吗双十二安全管理咨询有活动吗

相关搜索:

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

有帮助

没帮助

相关·内容

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

每天都在进步。最近在学习jquery mobile开发，使用的button，绑定事件，和大家一起学习，一起分享！

02

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

根据文章内容总结摘要。

00

移除jQuery好像也没那么难

jQuery 是一个非常实用且实用的库，但随着浏览器对 ES6 的广泛支持（截至撰写本文时超过 96%），现在可能是时候从 jQuery 过渡到原生 JavaScript 了。我最近从我的博客中移除了 jQuery，并发现自己不断地在谷歌上搜索一些模式。为了节省大家的时间，我编写了这个实用的参考指南，列出了一些最常见的 jQuery 模式及其在 JavaScript 中的等价物。我们将涵盖如何从这些概念和函数迁移到纯 JavaScript。

01

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

1. 绑简单事件在DOM中DOM0级绑定事件的方式是直接给事件属性赋值，但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件的方式，可以让我绑定多个事件处理程序跟D

08

基于SSM的校园二手交易平台的设计与实现「建议收藏」

喜欢就点一下star哟，谢谢亲的支持 https://github.com/wsk1103/Used-Trading-Platform

02

在 jQuery Mobile 中使用 UI 组件

jQuery Mobile JavaScript 库是一种强大的方式，允许用户通过 Web 浏览器直接连接到触摸友好的应用程序，从而让移动和平板设备可以访问移动应用程序。

02

jQuery

jQuery就是为了更方便快速操作DOM，里面封装了很多方法，后续用jQuery对象调用这些方法即可。

05

jQuery_T2_DOM操作

当我们点击文字的时候会添加一个【p_text】class，对应的style就会生效。

02

加点JavaScript魔法

在深入研究客户端之前，让我们先了解一下支持这些用户弹窗所需的服务器端的工作。用户弹窗的内容将由新路由返回，它是现有个人主页路由的简化版本。视图函数如下：

01

详细介绍 AngularJS 表单的各种特性、用法和最佳实践

AngularJS 是一款强大的 JavaScript 前端框架，提供了丰富的功能和工具，其中之一就是表单处理。表单是 Web 应用程序中常见的用户输入和数据交互方式，AngularJS 提供了便捷且强大的表单处理机制，使开发者能够轻松地构建、验证和处理表单数据。本文将详细介绍 AngularJS 表单的各种特性、用法和最佳实践。

03

vuejs中的组件以及父子组件间通信传值

您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式.以及什么是组件,如何定义和使用组件,父子组件之间如何进行简单的通信传值...

01

jQuery 事件注册、事件处理

其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

02

[jQuery学习系列四 ]4-Jquery学习四-事件操作

前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷青年中国说 SELF格致论道参考：http://www.365mini.com/page/tag/jquery-event-methods 1,ready ready()函数用于在当前文档结构载入完毕后立即执行指定的函数。该函数的作用相当于window.onload事件。 2,blind bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。举例：

09

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

用全局变量记录处理进度， return_result函数负责具体任务，同时更新后台进度值，return_width负责将当前进度值返回给前端。当全局变量不被识别的时候使用global关键字。

03

「jQuery」基础 - 03

请注意，本文编写于 2071 天前，最后修改于 173 天前，其中某些信息可能已经过时。

03

Vue常用指令 (三)--按钮显示控制-动态指令

前文学习了 Vue的自定义指令之基础篇, 先要打好基础. 及自定义指令-UI权限验证/ 点击按钮等元素显示水波纹效果. 今天来学习 Vue小知识-常用指令(三) 自定义指令绑定动态数据

01

04-老马jQuery教程-DOM节点操作及位置和大小

根据给定的文章内容，撰写摘要总结。

00

jQuery 事件注册与事件处理

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()，重点讲解如下：

04

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能，例如：漂亮的图片幻灯片、下拉菜单、弹出框等，都可以结合JavaScript和CSS实现。在这章，我们将讨论一些Bootstrap 3 提供的随时可用的JavaScript插件，很容易创建一些高级的网页功能。

04

JQuery的学习

JQuery基础： 1. 概念： * 一个JavaScript框架，简化JS开发。 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 * JavaScript

02

最常见的 20 个 jQuery 面试问题及答案

JavaScript 是客户端脚本的标准语言，而 jQuery 使得编写 JavaScript 更加简单。你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到的 JavaScript 库之一，并且现在已经很少有不用jQuery 而使用原生 JavaScript 的新项目了。这对于作为一个 Java web 开发者的你而言意味着你会在一场Java web开发面试中发现许多jQuery的面试问题.

03

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

D.closest()获得D所有父元素,含自己（D、B、A）与 D.parents() 对比

02

深入探讨 ElementUI 动态渲染 el-table

在前端开发中，表格是不可或缺的一部分。无论是数据展示、数据录入，还是数据分析，表格都扮演着重要的角色。而在 Vue.js 生态系统中，ElementUI 提供了一个强大且灵活的表格组件——el-table。本文将带你深入了解如何使用 ElementUI 动态渲染 el-table，并详细探讨其原理及实现过程。

00

Web前端基础（07）

引入了jquery-1.4.2.js文件可以从网上下,或者从我这里下,无需积分免费下载:jquery-1.4.2.js

02

JavaScript 学习-40.jQuery 绑定事件 on 和 bind

前言 jquery 有四种绑定事件的方式:on, bind, delegate,live。其中 live() 方法已被移除。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代。 $(selector).off(type)为元素解除绑定的事件 on 绑定事件基本语法 $(selector).on(event,childSelector,data,function) 参数描述 event 必需。事件的类型一个或多个，由空格分隔多个事件

02

Ajax与jQuery异步加载数据

一次性从服务器数据库中读取数据并传送到前端页面上是不现实的，一方面会加重服务器的压力，另一方面客户的带宽资源也会被占用。Ajax刚好可以解决数据异步加载的问题。Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

02

简单、通用的JQuery Tab实现

网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，可是直到今天，网页设计中仍然是以至少1024×768 像素的支持为主，也就是说，每一屏页面只有区区 955×600像素的安全尺寸可以用而已。于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。通过滑动门技术，可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。最近我在实际应用中，逐步完善出一种基于 jQuery，但是比 jQuery UI Tabs 插件更小巧也更通用的简单 Tabs 实现。最早的

05

SSM整合案例

解释jdbcUrl后面的参数useUnicode Mysql jdbc URL连接参数useSSL、serverTimezone 相关问题

02

前端成神之路-03_jQuery

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

02

jQuery Cheat—Sheet（jQuery学习笔记）

jQuery Cheat—Sheet（jQuery学习笔记） Web前端学习笔记之——jQuery学习笔记 ---- 什么是jQuery？ jQuery是一种JavaScript库，实现了常见任务的自动化和复杂任务简单化。 jQuery库为Web脚本编程提供了通用的抽象层，使之适合任何脚本编程情景。 jQuery能满足以下需求：取得文档中的元素、修改页面外观、改变文档内容、响应用户的交互操作、为页面添加动态效果、不刷新加载、简化常见的JavaScript任务。 ---- jQuery版本？

03

JQuery 入门学习(一)

写这个之前要先抱歉一下，由于我这段时间要做一个网站，而且比较重要，所以之前那个gh0st的文章先停一段时间，实在没有功夫写那个代码了，不过迟早是会继续写的。

01

一个小时学会jQuery

前一段时间录了一套关于jQuery的视频分享给大家，可以在下载区下载到，本来想配合文字一起的，后面发现视频+帮助文档也是非常好的学习方法。一、jQuery简介与第一个jQuery程序 1.1、jQu

07

JavaScript 事件委托以及jQuery对事件委托的支持

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://louluan.blog.csdn.net/article/details/24009177

06

前端(四)-jQuery

$(this)就是将这个dom对象转换成jquery对象，就可以对这个对象进行操作；

03

初学者必看Ajax的总结

image.png 整理 Ajax 的一些常用的基础知识，挺适合初学的朋友一、Ajax 简介、优劣势、应用场景以及技术 Ajax 简介 : Asynchronous Javascript And XML （异步的 JavaScript 和 XML）它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更

04

【Java 进阶篇】深入浅出：JQuery 事件绑定的奇妙世界

在前端的世界里，事件是不可或缺的一部分。用户的点击、输入、滚动等行为都触发着各种事件，而如何在代码中捕捉并处理这些事件是每位前端开发者必须掌握的技能之一。本文将带你深入浅出，探索 JQuery 中的事件绑定，为你揭开这个奇妙世界的面纱。

01

jQuery的 delegate问题

支持为动态生成的标签元素绑定事件也许就live和delegate了吧，不过新版本已经不支持live了，只有delegate

01

[Java面试九]脚本语言知识总结.

核心内容概述 1.JavaScript加强，涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2.Ajax传统编程。 3.jQuery框架，九种选择器为核心学习内容 4.JQuery UI插件 5.jQuery Ajax编程 6.jQuery第三方插件 7.反向Ajax编程(彗星) 一、JavaScript基础加强 JavaScript是在浏览器内容运行，无需编译、解释执行动态脚本语言，是一种弱类型语言，所有变量使用var定义。 JavaScript的3个组成部分分别为：核心(ECMAScr

纪念基于JavaScript 实现的后台桌面 UI 设计

2000年以前一直从事的是 C/S 应用程序的设计开发，UI自然也是重要的组成部分，曾痴迷于Mac OS 的界面，也曾被微软推出 Windows XP 时风格的变化所惊艳。记得开发的一个药品管理项目，因自己不满意 Windows NT 的风格，擅自做主使用 Windows 底层API 修改窗口系统风格为Mac，以致于后来严重影响了交付时间。现在感觉，设计再优秀的界面也有审美疲劳的一天，也有众口难调的一面，因为时代需要进步，保持新鲜感是我们不断改进的动力。

01

如何实现动态添加的元素添加点击事件

在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般需要给元素加上相关属性，然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢？

02

jquery面试题目_高并发面试题

() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入

01

Web阶段：第五章：JQuery库

点击：API文档下载 Jquery介绍 1.什么是JQuery ? jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。 2.JQue

02

jQuery.data() 的实现方式

jQuery.data() 的实现方式 jQuery.data() 的作用是为普通对象或 DOM Element 附加（及获取）数据。下面将分三个部分分析其实现方式： 1. 用name和value为对象附加数据；即传入三个参数，第一个参数为需要附加数据的对象，第二个参数为数据的名称，第三个参数为数据的值。当然，只是获取值的话，也可以不传入第三个参数。 2. 用另一个对象为对象附加数据；即传入两个参数，第一个参数为需要附加的数据对象（我们称之为“obj”），第

07

python测试开发django-188.Bootstrap折叠（Collapse）插件

前言折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠（Collapse）以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle=”collapse”都是必需的。单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容

05

Pbcms Ajax 无刷新加载内容

前段时间，群里有位同学问起 Ajax 加载的问题，这个不属于模板制作系列教程的内容，因此单独再出一个使用技巧系列的教程。

02

8 个 DOM 功能

你肯定用 addEventListener() 处理过将事件附加到 Web 文档中的元素。通常 addEventListener() 调用看起来像这样：

02

[Vue 牛刀小试]：第十一章 - Vue 中 ref 的使用

在之前的前端开发中，为了实现我们的需求，通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素，得益于 Jquery 对于 DOM 元素优异的操作能力，我们可以很轻易的对获取到的 DOM 元素进行操作。但是，当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后，对于 DOM 的操作我们就应当完全的交给框架，而我们只需要关注于数据。难道，在 Vue 中就不能手动获取到页面上的 DOM 元素了吗，答案当然是可以手动获取到 DOM 元素的，在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能，当然，这也只是 ref 其中一项的功能。本章，我们就来学习 Vue 中 ref 的相关使用。

03

【Java 进阶篇】HTML DOM 事件详解

当用户在网页上点击按钮、输入文本、鼠标移动到某个区域或执行其他互动操作时，这些动作都可以触发事件。HTML DOM（文档对象模型）允许我们使用JavaScript来捕获、处理和响应这些事件，以实现网页的交互和动态性。本篇博客将围绕HTML DOM事件展开详细的解释，包括事件的类型、事件处理程序、事件对象和示例代码。让我们一起来深入了解吧。

02

Wijmo 更优美的jQuery UI部件集：从wijwizard和wijpager开始

本文演示了如何使用Wijmo的其中两个部件，wijwizard 以及 wijpager。如果你期望看到Wijmo的其他文章，请参阅Wijmo 更优美的jQuery UI部件集：发现 Wijmo。在这个快速入门，你将学习如何向一个HTML工程添加众多Wijmo部件中的两个，wijwizard 以及 wijpager。你将从添加并且自定义一个wijwizard部件入手，可以了解到一些独特的功能，然后你将学习如何通过连接到wijpager部件对wijwizard添加分页导航支持。第一步是创建一个HTML页面，

07

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭