获取与设置样式
获取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中有以下两条规定。
- 如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。
- 如果有不同的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()方法来完成这个功能的.该方法等价于如下代码:
相关推荐
本文将深入探讨如何使用jQuery来实现样式设置、追加、移除和切换的方法,以便于更好地理解和应用到实际项目中。 首先,我们可以使用`attr()`方法来获取和设置元素的样式,特别是class属性。例如,要获取页面中所有`...
54:单个属性 55:多个属性 56:删除属性 57:添加样式 58:追加样式 59:样式覆盖 60:移除样式 61:样式切换 62:样式判断 63:获取html 64:设置html 65:设置value 66:搜索提示1 67:搜索提示2 68:取得子元素 69:获取紧邻元素...
4. 切换样式表:使用 jQuery 选择器(如 `'link[media='screen']'`)找到指定媒体类型的链接(例如屏幕样式表),然后通过 `.attr('href', 'alternative.css')` 修改其 href 属性,实现样式表的切换。 5. 优化选择...
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
jQuery的核心特性是其选择器,它允许开发者通过CSS样式的语法轻松选取HTML元素。 1. **元素引用**: jQuery通过`$()`函数来选取元素,支持多种方式,包括id、class、元素名以及层级关系和DOM或XPath条件。返回的...
三、jQuery方法与操作 1. 添加/删除类:$.addClass("class")和$.removeClass("class"),用于增加或删除元素的类样式。 2. 隐藏/显示元素:$.hide()和$.show(),隐藏或显示元素。可传入时间参数实现过渡效果,例如:$...
在网页开发中,jQuery 提供了丰富的API来处理页面元素的样式,包括获取、设置、追加、删除和判断等操作。下面将详细阐述这些知识点。 1. **获取样式** 使用 `attr()` 方法可以获取元素的CSS属性值。例如,`$("p")....
7. **切换样式**: - `$("元素名称").toggleClass(class)` - **描述**:如果元素已经有了`class`这个CSS类,则将其移除;如果没有,则添加之。 8. **获取input元素的值**: - `$("input元素名称").val();` - **...
8. **切换样式** - 使用 `.toggleClass()` 可以根据当前状态添加或移除样式。例如:`$("p").toggleClass("highlight")`。 #### 四、元素操作 1. **添加内容** - 使用 `.append()` 将内容追加到匹配元素的末尾。...
3. **效果和样式**:`.toggleClass()`, `.addClass()`, `.removeClass()`用于切换、添加和移除类,`.css()`用于获取或设置样式。 4. **事件代理**:`$(parent).on('event', 'selector', function() {...})`允许在父...
5. **样式操作(Style Manipulation)**:`css('property', 'value')`用于设置或获取元素的CSS样式,`addClass('class')`、`removeClass('class')`和`toggleClass('class')`分别用于添加、移除和切换类名。...
2. **DOM操作(DOM Manipulation)**:jQuery提供了一系列方便的DOM操作方法,如`.append()`用于在元素内部追加内容,`.prepend()`在元素内部前置内容,`.remove()`删除匹配的元素,`.clone()`复制元素等。...
- **toggleClass()**:如果存在(不存在)就切换一个类。 - **removeClass()**:移除元素的一个或多个类。 ### DOM操作方法 - **after()**:在选定元素之后插入内容。 - **append()**:将内容添加到选定元素的末尾...
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
在深入探讨jQuery选择器及其应用之前,我们先简要回顾一下jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它的设计宗旨是“写得更少,做得更多”。它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互,...
3. **DOM操作**:jQuery提供了丰富的DOM操作方法,如`.html()`用于设置或获取元素内容,`.append()`在元素内部追加内容,`.prepend()`在元素内部前置内容,`.remove()`移除元素。 4. **事件处理**:使用`.on()`方法...
#### 一、Attribute操作:元素属性与样式的增删改查 1. **添加样式** - `$("p").addClass("样式类名")`:给`<p>`标签下的所有元素添加在CSS中定义的样式类。 2. **修改属性** - `$("img").attr({"属性名": ...
#### 四、如何使用 jQuery 来切换样式表 **知识点:** - **`$.attr()` 方法:** 设置或获取 HTML 元素的属性值。 **示例代码分析:** ```javascript $('link[media="screen"]').attr('href', 'Alternative.css'); `...