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

news/2024/7/10 23:10:25 标签: jquery, class, function, css
class="baidu_pl">
class="article_content clearfix">
class="htmledit_views">

获取与设置样式

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

class="keyword">var class="plain">p_class = $(class="string">"p"class="plain">).attr(class="string">"class"class="plain">); class="comments">//获取p元素的class

class="syntaxhighlighter ">  

使用attr()方法来设置p元素的class,JQuery代码如下:

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number" style="text-align:left">1class="content">class="plain">$(class="string">"p"class="plain">).attr(class="string">"'class"class="plain">, class="string">"high"class="plain">);  class="comments">//设置p元素的class为 "high"

在大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class

追加样式

什么是追加class呢?假如p元素原本的class为myClass,那么追加一个名叫high的class后,class属性变为 “myClass high”,即myClass和high两种样式的叠加。JQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解,首先在 style标签里添加另一组样式:

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">.high{ color:red; }
class="line alt2">
class="number">2class="content">class="plain">.another{ font-style:italic; color:blue; }

然后在网页中添加一个“追加class类”的按钮,按钮的事件代码如下:

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">$(class="string">"#btn_3"class="plain">).click(class="keyword">functionclass="plain">(){
class="line alt2">
class="number">2class="content">class="spaces">    class="plain">$(class="string">"#nm_p"class="plain">).addClass(class="string">"another"class="plain">); class="comments">// 追加样式
class="line alt1">
class="number">3class="content">class="plain">});

最后当单击“追加class类”按钮时,p元素样式就会变为斜体,而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值,即"high"和"another"。在CSS中有以下两条规定。

  1. 如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。
  2. 如果有不同的class设定了同一样式属性,则后者覆盖前者。

在上例中,相当于给p元素添加了如下样式:

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">color : red;        class="comments">/* 字体颜色设置红色*/ 
class="line alt2">
class="number">2class="content">class="plain">font-style:italic;  
class="line alt1">
class="number">3class="content">class="plain">color:blue;

在以上的样式中,存在两个“color”属性,而后面的“color”属性会覆盖前面的“color”属性,因此最终的“color”属性的值为“blue”,而不是“red”。

移除样式

如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的 作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">$(class="string">"p"class="plain">).removeClass(class="string">"high"class="plain">);  class="comments">//移除p元素中值为"high"的class

如果要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下:

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">$(class="string">"p"class="plain">).removeClass(class="string">"high"class="plain">).removeClass(class="string">"another"class="plain">);

JQuery提供了更简单的方法。可以以空格的方式删除多个class名,代码如下:

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">$(class="string">"p"class="plain">).removeClass(class="string">"high another"class="plain">);

另外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下:

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">$(class="string">"p"class="plain">).removeClass();  class="comments">//移除p元素的所有class

切换样式

JQuery中有一个方法toggle(),JQuery代码如下:

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">toggleBtn.toggle(class="keyword">functionclass="plain">(){      
class="line alt2">
class="number">2class="content">class="spaces">      class="comments">//元素显示    代码③      
class="line alt1">
class="number">3class="content">class="plain">}, class="keyword">functionclass="plain">(){      
class="line alt2">
class="number">4class="content">class="spaces">      class="comments">//元素隐藏    代码④      
class="line alt1">
class="number">5class="content">class="plain">})

toggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。

另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">$(class="string">"p"class="plain">).toggleClass(class="string">"another"class="plain">);  class="comments">//重复切换类名“another”

当不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。

判断是否含有某个样式

hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class

class="syntaxhighlighter ">
class="lines">
class="line alt1">
class="number">1class="content">class="plain">$(class="string">"p"class="plain">).hasClass(class="string">"another"class="plain">);

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

class="bar show">
class="toolbar"> view source print ?
class="number">1class="content">class="plain">$(class="string">"p"class="plain">).is(class="string">".another"class="plain">);  class="comments">//is("."+class);

http://www.niftyadmin.cn/n/1732388.html

相关文章

关于CSS3实现响应式布局的一些概念和术语

响应式布局也被应用到网站前端开发中,在国内这一词想必是非常火吧,那网站为什么要使用响应式布局呢?原因和其他创意性的生活用品基本上是一样的,处于对人力物力财力的节省和对生活富有诗意的一种追求。在人力物力和财力有限的情况…

jquery显示和隐藏层的代码

toggle() 切换元素的可见状态。 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 ----------&#xff0d…

ajax中常用状态码

在web中最头疼的就是看到这些状态码了,下面是收集了一些码,供参考使用。 if (http_request.status 200) { // 页面正常,可以开始处理信息 } else { // 页面有问题 } 1**:请求收到,继续处理 2**:操作成功收…

CSS实现固定底部footer的代码

当文章内容没填满时&#xff0c;网站底部footer上移&#xff0c;这是很多客户不能接受的。使用css解决办法如下&#xff1a; <html> <head> 12345678910111213141516171819202122<style type"text/css">html, body, #wrap {height: 100%;}body &…

CSS强制文字不换行的实现方式

当一行文字超过DIV或者Table的宽度的时候&#xff0c;浏览器中默认是让它换行显示的&#xff0c;如果我们不想让他换行显示那要怎么办呢&#xff1f;看到这个标题很容易就会想到截断文字加“...”的做法。 一般的文字截断(适用于内联与块)&#xff1a;CSS .text-overflow{disp…

JS 中面向对象的5种写法

http://www.iteye.com/topic/434462 //定义Circle类&#xff0c;拥有成员变量r&#xff0c;常量PI和计算面积的成员函数area() Java代码 //第1种写法 function Circle(r) { this.r r; } Circle.PI 3.14159; Circle.prototype.area function…

条件CSS的高级用法

介绍条件CSS(Conditional-CSS)的开发源于在多数浏览器上修正 CSS 渲染 bug 的需求&#xff0c;以确保尽量多的用户看到正确的网站设计。核心思想建立在 Internet Explorer 上发现的条件注释方法&#xff0c;并扩展到包含其他的浏览器&#xff0c;而且将条件声明内联到 CSS 定义…

web开发设计人员10个常用的在线web工具和应用

在今天的这篇文章中&#xff0c;我们将继续推荐给大家一组我们精挑细选的web开发设计必备的在线工具应用。相信会在web开发和设计的过程中给你带来方便和快捷&#xff01; 前端开发相关jsfiddlejsfiddle是老牌的在线调试和分享代码的网站&#xff0c;它可以帮助你在线调试javas…