jQuery基础教程之DOM操作-样式操作

转载 2012年03月31日 15:26:54

jquery中提供了一系列的方法,让我们可以轻松地对DOM中的元素进行class的获取、设置、追加、移除、切换以及判断某个元素是否具有某个class。

  • 获取、设置样式
    这里就是利用attr()方法去设置和获取元素的的class属性,但是要注意这个通过attr()方法设置class属性和通过addClass()方法追加元素class属性的区别。
  • 追加样式:addClass()
    这个方法会为每个匹配的元素追加指定的样式。这个方法的用法有两个:

    1. .addClass( className )
      这里的className参数可以是一个样式也可以是两个或者多个。各个class名称之间用空格隔开。例如:

      1 $('p').addClass('myClass yourClass');
      jquery addClass(className)在线测试
    2. .addClass( function(index, className) )
      注意,这种用法是从1.4版本才开始加入的。
      function(index,className)返回的值做为追加的class。其中index的值为当前元素在元素组中的索引值,className指向的是当前元素的原始class。

      jquery addClass(function(index,className))在线测试
  • 移除样式:removeClass()
    这个方法会为每个匹配的元素移除指定的样式。这个方法的用法有两个:

    1. .removeClass( className )
      这里的className参数可以是一个样式也可以是两个或者多个。各个class名称之间用空格隔开。例如:

      1 $('p').removeClass();//不带参数的话,就是移除所有的样式
      2 $('p').removeClass('myClass');
      3 $('p').removeClass('myClass yourClass');
      jquery removeClass(className)在线测试
    2. .removeClass( function(index, className) )
      注意,这种用法是从1.4版本才开始加入的。
      function(index,className)返回的值做为要移除的class。其中index的值为当前元素在元素组中的索引值,className指向的是当前元素的原始class。

      jquery removeClass(function(index,className))在线测试
  • 切换样式:toggleClass()
    使用这个方法可以控制样式上的重复切换,它的用法到jquery1.4版本之后就有三种用法了。

    1. .toggleClass( className )
      如果类名存在则删除匹配元素中的该class,如果不存在则追加。

      jquery removeClass(className)在线测试
    2. .toggleClass( className, switch )
      这种用方法是根据switch这个表达式计算的值是否为真,如果为真的话,就进行追加class。为假则移除。
      可能这样说比较难以理解,大家还是看DEMO吧。

      jquery toggleClass(className)在线测试
    3. .toggleClass(function(index, className),[switch])
      关于这个方法里面的function(index, className)和前面addClass和removeClass的用法差不多。
      switch是可选的参数,然后再根据switch这个表达式计算的值是否为真,如果为真的话,就进行追加class(function(index, className)这个函数返回的值)。为假则移除。
      这种用法这样说,可能大家很难理解,其实我自己也不是很理解,也不知道能用到什么地方,呵呵·~1.4.4增加了好多方法哦~~,大家还是看DEMO吧。

      jquery toggleClass(function(index, className),[switch])在线测试
  • 判断是否含有某个样式:hasClass()
    这个方法可以用来判断元素中是否含有某个class,如果有则返回true,没有则返回false

jQuery基础教程之DOM操作-遍历节点-closest()方法

.closest() 此方法获取第一个相匹配的祖先元素,注意:起始点包括自身元素。 另外这个方法是必须要传入一个选择器表达式参数的,如果不传入参数的话,就会返回一个空的jquery对象。 要...

jQuery基础教程之DOM操作-遍历节点-parents()方法

在上一章jQuery教程基础篇之DOM操作-遍历节点-parent()方法,我们讲到了如何获取元素的父元素的集合,有时候我们的需求可能会要查找元素的所有的祖先元素,那么.parents()方法将会满足...

jQuery基础教程之DOM操作-遍历节点-prev()方法

.prev([selector]) 此方法取得每个匹配的元素的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。 下面来...

jQuery基础教程之DOM操作-遍历节点-parent()方法

上一章我们说了jQuery教程基础篇之DOM操作-遍历节点-children()方法,那接下来,正好说说parent()方法。 .parent([selector])方法返回的是每一个匹配的元素...

《jQuery基础教程》-- 操作DOM

1.操作属性 之前的css方法还有addClass、removeClass、toggleClass都是对DOM元素进行style属性的操作。而对于其他属性则可以使用attr和removeAttr来实...

jQuery基础教程之DOM操作-遍历节点-siblings()方法

在前面的两节教程中,我们分别知道了jquery如何取得当前元素的前一个同辈元素以及后一个同辈元素,他们分别是.prev()方法和.next()方法。 那么肯定的了,既然在jquery中能取得前一个和...

jQuery基础教程之DOM操作-节点操作函数(二)

这一篇文章是接着jQuery教程基础篇之DOM操作-节点操作函数(一)这篇文章的,如果您还没看过,请不妨先读读上一篇,然后再来看这篇文章吧。 废话不多说,我们接着上一篇来吧~ 插入节点...

jQuery基础教程之DOM操作-节点操作函数(一)

jQuery作为Javascript的一个强大的库,其对DOM对象的操作之简化,让开发人员甚至于小白们都为之赞叹不已。 接着上一个系列的jQuery选择器的教程,接下来教大家的是jQuery中的DO...

jQuery基础教程之DOM操作-HTML&文本&值的操作

今天主要讲解jquery中的三个方法的使用,他们分别是html()、text()、val()。 这三个jquery方法的使用方式一样都有三种,下面请看用法和DEMO。 html() ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery基础教程之DOM操作-样式操作
举报原因:
原因补充:

(最多只允许输入30个字)