`
starbhhc
  • 浏览: 654087 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

JQuery 样式设置、追加、移除与切换

 
阅读更多

获取与设置样式

获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下:

var p_class = $("p").attr("class"); //获取p元素的class

使用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");

JQuery提供了更简单的方法。可以以空格的方式删除多个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 })

toggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,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()方法来完成这个功能的.该方法等价于如下代码:

1 $("p").is(".another");  //is("."+class);

 

分享到:
评论

相关推荐

    JQuery实现样式设置、追加、移除与切换的方法

    本文将深入探讨如何使用jQuery来实现样式设置、追加、移除和切换的方法,以便于更好地理解和应用到实际项目中。 首先,我们可以使用`attr()`方法来获取和设置元素的样式,特别是class属性。例如,要获取页面中所有`...

    【推荐】高清jquery视频教程下载

    54:单个属性 55:多个属性 56:删除属性 57:添加样式 58:追加样式 59:样式覆盖 60:移除样式 61:样式切换 62:样式判断 63:获取html 64:设置html 65:设置value 66:搜索提示1 67:搜索提示2 68:取得子元素 69:获取紧邻元素...

    50个常见的JQUery代码

    4. 切换样式表:使用 jQuery 选择器(如 `'link[media='screen']'`)找到指定媒体类型的链接(例如屏幕样式表),然后通过 `.attr('href', 'alternative.css')` 修改其 href 属性,实现样式表的切换。 5. 优化选择...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    JQuery学习笔记(日常积累)

    jQuery的核心特性是其选择器,它允许开发者通过CSS样式的语法轻松选取HTML元素。 1. **元素引用**: jQuery通过`$()`函数来选取元素,支持多种方式,包括id、class、元素名以及层级关系和DOM或XPath条件。返回的...

    我的JQuery笔记.doc

    三、jQuery方法与操作 1. 添加/删除类:$.addClass("class")和$.removeClass("class"),用于增加或删除元素的类样式。 2. 隐藏/显示元素:$.hide()和$.show(),隐藏或显示元素。可传入时间参数实现过渡效果,例如:$...

    jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)

    在网页开发中,jQuery 提供了丰富的API来处理页面元素的样式,包括获取、设置、追加、删除和判断等操作。下面将详细阐述这些知识点。 1. **获取样式** 使用 `attr()` 方法可以获取元素的CSS属性值。例如,`$("p")....

    Jquery常用方法.txt

    7. **切换样式**: - `$("元素名称").toggleClass(class)` - **描述**:如果元素已经有了`class`这个CSS类,则将其移除;如果没有,则添加之。 8. **获取input元素的值**: - `$("input元素名称").val();` - **...

    jquery基础知识总结

    8. **切换样式** - 使用 `.toggleClass()` 可以根据当前状态添加或移除样式。例如:`$("p").toggleClass("highlight")`。 #### 四、元素操作 1. **添加内容** - 使用 `.append()` 将内容追加到匹配元素的末尾。...

    jQuery1.4.1 API 中文参考手册

    3. **效果和样式**:`.toggleClass()`, `.addClass()`, `.removeClass()`用于切换、添加和移除类,`.css()`用于获取或设置样式。 4. **事件代理**:`$(parent).on('event', 'selector', function() {...})`允许在父...

    java资料jqueryAPI

    5. **样式操作(Style Manipulation)**:`css('property', 'value')`用于设置或获取元素的CSS样式,`addClass('class')`、`removeClass('class')`和`toggleClass('class')`分别用于添加、移除和切换类名。...

    jquery1.8及API

    2. **DOM操作(DOM Manipulation)**:jQuery提供了一系列方便的DOM操作方法,如`.append()`用于在元素内部追加内容,`.prepend()`在元素内部前置内容,`.remove()`删除匹配的元素,`.clone()`复制元素等。...

    jquery方法大全

    - **toggleClass()**:如果存在(不存在)就切换一个类。 - **removeClass()**:移除元素的一个或多个类。 ### DOM操作方法 - **after()**:在选定元素之后插入内容。 - **append()**:将内容添加到选定元素的末尾...

    jQuery详细教程

    提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...

    jquery 选择器 描述

    在深入探讨jQuery选择器及其应用之前,我们先简要回顾一下jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它的设计宗旨是“写得更少,做得更多”。它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互,...

    jQuery经典入门教程

    3. **DOM操作**:jQuery提供了丰富的DOM操作方法,如`.html()`用于设置或获取元素内容,`.append()`在元素内部追加内容,`.prepend()`在元素内部前置内容,`.remove()`移除元素。 4. **事件处理**:使用`.on()`方法...

    jquery用法大全

    #### 一、Attribute操作:元素属性与样式的增删改查 1. **添加样式** - `$("p").addClass("样式类名")`:给`<p>`标签下的所有元素添加在CSS中定义的样式类。 2. **修改属性** - `$("img").attr({"属性名": ...

    常用的jquery案例

    #### 四、如何使用 jQuery 来切换样式表 **知识点:** - **`$.attr()` 方法:** 设置或获取 HTML 元素的属性值。 **示例代码分析:** ```javascript $('link[media="screen"]').attr('href', 'Alternative.css'); `...

Global site tag (gtag.js) - Google Analytics