`

jquery 如何动态添加、删除class样式方法介绍

 
阅读更多
获取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class值与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,jquery代码如下:
复制代码 代码如下:

var p_class = $("p").attr("class"); //获取p元素的class
[html]
使用attr()方法来设置p元素的class,JQuery代码如下:

1 $("p").attr("'class", "high"); //设置p元素的class为 "high"

大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class。
追加样式 什么是追加class呢?假如p元素原本的class为myClass,那么追加一个名叫high的class后,class属性变为 “myClass high”,即myClass和high两种样式的叠加。JQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解,首先在 style标签里添加另一组样式:
复制代码 代码如下:

1 .high{ color:red; }
2 .another{ font-style:italic; color:blue; }
后在网页中添加一个“追加class类”的按钮,按钮的事件代码如下:
1 $("#btn_3").click(function(){
2 $("#nm_p").addClass("another"); // 追加样式
3 });

后当单击“追加class类”按钮时,p元素样式就会变为斜体,而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值,即"high"和"another"。在CSS中有以下两条规定。
1.如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。 2.如果有不同的class设定了同一样式属性,则后者覆盖前者。 在上例中,相当于给p元素添加了如下样式:
复制代码 代码如下:

1 color : red; /* 字体颜色设置红色*/
2 font-style:italic;
3 color:blue;

以上的样式中,存在两个“color”属性,而后面的“color”属性会覆盖前面的“color”属性,因此最终的“color”属性的值为“blue”,而不是“red”。
移除样式 如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的 作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:
复制代码 代码如下:

1 $("p").removeClass("high"); //移除p元素中值为"high"的class
果要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下:
1 $("p").removeClass("high").removeClass("another");
Query提供了更简单的方法。可以以空格的方式删除多个class名,代码如下:
1 $("p").removeClass("high another");
外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下:
1 $("p").removeClass(); //移除p元素的所有class
换样式 JQuery中有一个方法toggle(),JQuery代码如下:
1 toggleBtn.toggle(function(){
2 //元素显示 代码③
3 }, function(){
4 //元素隐藏 代码④
5 })

oggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。
另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。
复制代码 代码如下:

1 $("p").toggleClass("another"); //重复切换类名“another”

不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。
判断是否含有某个样式 hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class:
复制代码 代码如下:

1 $("p").hasClass("another");

个方法是为了增强代码可读性面产生的。在JQuery内部实际上是调用了is()方法来完成这个功能的.该方法等价于如下代码:
复制代码 代码如下:

view sourceprint? 1 $("p").is(".another"); //is("."+class);
分享到:
评论

相关推荐

    jQuery动态添加删除移动列表插件

    总结来说,jQuery动态添加删除移动列表插件通过结合HTML、CSS和JavaScript,提供了用户友好的交互体验,使得用户能够动态地管理列表中的数据。这个插件对于构建数据展示、任务管理或者任何需要动态操作列表的应用...

    jQuery使用removeClass方法删除元素指定Class的方法

    它是一种非常实用的方法,特别是在动态地添加和删除样式时非常有用。 首先,我们来理解什么是样式类(Class)。在HTML中,我们通过class属性为元素指定一个或多个类名,类名可以用来应用CSS样式,也可以被...

    jQuery使用toggleClass方法动态添加删除Class样式的方法

    在jQuery库中,`toggleClass()`方法是一个非常实用的功能,它允许开发者在元素上动态地添加或删除CSS类,实现元素样式的切换。这个方法的主要作用是根据元素当前是否具有指定的Class来决定是添加还是移除该Class。...

    jQuery动态添加删除编辑标签代码.zip

    本项目“jQuery动态添加删除编辑标签代码”聚焦于利用jQuery实现动态的标签管理功能,包括添加、删除和编辑标签,这对于创建交互性强的用户界面尤其有用。以下是对这个项目的详细解析: 1. **jQuery基础**:jQuery...

    JQUERY 动态添加层、拖动层、移除层实例

    本实例将深入探讨如何使用jQuery来实现动态添加层、拖动层以及移除层的功能,这对于创建交互式的Web应用程序至关重要。 ### 1. 动态添加层 动态添加层是指在网页运行时根据用户操作或特定条件创建新的HTML元素。...

    jQuery添加删除标签代码

    // 为新标签添加删除事件 tagElement.click(function() { $(this).remove(); }); // 清空输入框 $('#tagName').val(''); } }); // 删除标签 $('#tagPanel').on('click', '.remove', function() { $(this...

    jQuery添加删除表单元素代码.zip

    本资源“jQuery添加删除表单元素代码.zip”提供了一种利用jQuery动态添加和删除表单行的解决方案,主要依赖于名为"jquery.dynamic-rows"的插件。这个插件是针对那些需要在用户交互时动态管理表单元素的应用场景设计...

    jquery bootstrap自定义添加删除选项卡代码

    至此,我们已经成功地实现了基于jQuery和Bootstrap的自定义添加删除选项卡功能。用户可以通过点击“添加选项卡”按钮创建新的选项卡,同时可以随时删除不需要的选项卡。这个功能在需要灵活管理多段内容展示的场景中...

    jQuery ui实现添加删除动画

    总结起来,利用jQuery UI实现添加删除动画的关键在于理解jQuery的选择器、事件处理和动画方法。通过结合使用这些工具,我们可以创建出更生动、更具互动性的用户界面。在实际项目中,你可以根据需要自定义动画速度、...

    jQuery添加删除标签代码.zip

    在这个"jQuery添加删除标签代码.zip"压缩包中,我们可以找到一个实现标签功能的实例,它包含了添加、删除、初始化、修改以及禁用和启用标签的各种操作。下面我们将详细探讨这些功能的实现及其相关知识点。 首先,...

    js实现class样式的修改、添加及删除的方法

    ### class样式的修改、添加及删除方法 #### 1. 直接通过className属性修改class 每个HTML元素都有一个`className`属性,该属性代表了元素的class值。通过修改这个属性值,我们可以添加、删除或替换元素的class。 ...

    jquery动态添加带有样式的HTML标签元素方法

    在本文中,我们将深入探讨如何使用jQuery来动态添加和移除带有样式的HTML标签元素,这对于构建交互式网页和处理用户界面动态变化至关重要。在给定的示例中,我们看到一个功能,允许用户添加和删除文件上传表单,同时...

    JQuery为元素添加样式的实现方法

    本文将详细探讨如何使用 jQuery 为元素添加样式,包括直接设置 CSS 属性、添加预定义的 CSS 类以及相关的样式操作方法。 1. **直接设置 CSS 属性** 使用 jQuery 的 `.css()` 方法可以直接为元素设置或获取 CSS ...

    jquery入门之动态表格---动态添加删除一行

    为每一行生成时添加删除按钮: ```javascript function createRow(data1, data2) { var newRow = $("<tr><td>" + data1 + "</td><td>" + data2 + "</td><td><button class='deleteRow'>删除</button></td></tr>"); ...

    Jquery 样式和效果

    jQuery 可以方便地添加、删除和修改元素的CSS样式。例如: - `$("#element").css("color", "red");` 设置元素颜色为红色 - `$("#element").addClass("myClass");` 添加类名 - `$("#element").removeClass("myClass")...

    jquery动态生成文本框,含删除按钮

    本案例聚焦于使用jQuery动态生成文本框,并且每个文本框都配备有删除按钮。这个功能常见于需要用户输入多条类似信息的场景,如在线表单或任务管理器。 首先,`demo.html`和`demo_1.html`是两个不同的示例页面,展示...

    jQuery自定义添加或删除标签获取ID代码.zip

    `js`文件夹可能包含了所有JavaScript代码,尤其是实现了动态添加和删除标签功能的jQuery代码。在jQuery中,添加元素通常使用`$('<element>')`来创建新元素,然后使用`.append()`或`.prepend()`将其添加到指定的父...

Global site tag (gtag.js) - Google Analytics