jQuery中DOM 属性使用实例详解上篇

目录

• DOM属性(上)
• .addClass()
• .removeClass()
• .toggleClass()
• .hasClass()

DOM属性(上)

.addClass()

为每个匹配的元素添加指定的样式类名

值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上。

对所有匹配的元素可以一次添加多个用空格隔开的样式类名, 像这样：

$("p").addClass("myClass yourClass");

.addClass() 方法允许我们通过传递一个用来设置样式类名的函数。

$("ul li:last").addClass(function(index) {
  return "item-" + index;
});

addClass还可以接受第二个参数，下面是使用例子

  
  


 
This div should be white
 
This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.
 
This div should be white
 
There are zero green divs

.removeClass()

移除集合中每个匹配元素上一个，多个或全部样式。

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除。

从所有匹配的每个元素中同时移除多个用空格隔开的样式类 ，像这样:

$('p').removeClass('myClass yourClass')

这个方法通常和 .addClass() 一起使用用来切换元素的样式, 像这样：

$('p').removeClass('myClass noClass').addClass('yourClass');

这里从所有段落删除 myClass 和 noClass 样式类, 然后 yourClass 样式被添加。

removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式。

$('li:last').removeClass(function() {
  return $(this).prev().attr('class');
});

.toggleClass()

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

$('#foo').toggleClass(className, addOrRemove);

等价于

if (addOrRemove) {
    $('#foo').addClass(className);
}
else {
    $('#foo').removeClass(className);
}

.hasClass()

确定任何一个匹配元素是否有被分配给定的（样式）类。

如果匹配元素上有指定的样式，那么.hasClass() 方法将返回 true ， 即使元素上可能还有其他样式。 举个例子, 给上文的HTML加上下面的代码将返回 true：

$('#mydiv').hasClass('foo')

以上就是jQuery中DOM 属性使用实例详解上篇的详细内容，更多关于jQuery DOM 属性的资料请关注脚本之家其它相关文章！