jquery 设置根据name 或者 class 进行css样式隐藏展示

原创

mob649e81540090 2023-10-24 06:42:13 ©著作权

文章标签 jQuery HTML CSS 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e81540090的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery设置根据name或class进行CSS样式隐藏展示

介绍

在Web开发中，动态地隐藏或展示元素是非常常见的需求。jQuery是一个非常流行的JavaScript库，它简化了对HTML文档的操作，包括元素的显示和隐藏。

本文将探讨如何使用jQuery根据元素的name或class属性来设置CSS样式，实现元素的隐藏和展示。

什么是jQuery

jQuery是一个快速、简洁的JavaScript库，它使得HTML文档的操作、事件处理、动画效果和AJAX更加简单。通过使用jQuery，我们可以用更少的代码来完成相同的任务。

引入jQuery库

在使用jQuery之前，首先需要引入jQuery库。可以通过下载jQuery库文件，然后在HTML文档中引入它。也可以使用CDN（内容分发网络）来引入它，如下所示：

<script src="

根据name设置CSS样式

根据元素的name属性来设置CSS样式，可以使用[name="value"]选择器。该选择器会选择所有name属性等于"value"的元素。

下面是一个例子，我们有一个包含三个div元素的HTML文档，它们的name属性分别为"div1"、"div2"和"div3"。我们将使用jQuery根据name属性设置这些元素的CSS样式。

<div name="div1">Div 1</div>
<div name="div2">Div 2</div>
<div name="div3">Div 3</div>

$("[name='div1']").css("display", "none");

上面的代码将选择name属性等于"div1"的元素，然后将其CSS的display属性设置为"none"，从而隐藏该元素。

根据class设置CSS样式

根据元素的class属性来设置CSS样式，可以使用".class"选择器。该选择器会选择所有class属性包含"class"的元素。

下面是一个例子，我们有一个包含三个div元素的HTML文档，它们的class属性分别为"box"、"box"和"box hidden"。我们将使用jQuery根据class属性设置这些元素的CSS样式。

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box hidden">Box 3</div>

$(".box").css("display", "none");

上面的代码将选择class属性为"box"的元素，然后将其CSS的display属性设置为"none"，从而隐藏这些元素。

序列图

下面是一个展示了根据name或class设置CSS样式的序列图。

sequenceDiagram
    participant HTML as HTML
    participant jQuery as jQuery
    participant CSS as CSS

    HTML->>jQuery: 页面加载完成
    jQuery-->>HTML: 加载jQuery库
    HTML-->>jQuery: 引入jQuery库
    jQuery->>CSS: 根据name属性选择元素
    CSS-->>jQuery: 返回匹配的元素集合
    jQuery->>HTML: 设置CSS样式

类图

下面是一个展示了相关jQuery方法的类图。

classDiagram
    class jQuery {
        +css(property: string, value: string): jQuery
    }
    class HTML {
        +querySelectorAll(selector: string): NodeList
    }
    class CSS {
        +selectElements(selector: string): NodeList
        +setStyle(elements: NodeList, property: string, value: string): void
    }

    HTML --|> jQuery
    CSS --|> jQuery