现在的位置: 首页 > 综合 > 正文

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

2013年08月21日 ⁄ 综合 ⁄ 共 860字 ⁄ 字号 评论关闭

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))在线测试

抱歉!评论已关闭.