.addClass()
添加相关的class到匹配的元素。
.addClass(className)
.addClass(function(index,currentClass))
className
类型是字符串。
一个或多个有空格隔开的class会被添加到每一个匹配元素的class属性上。
function(index,currentClass)
类型是函数。
一个函数返回的一个或多个有空格隔开class的名字会被添加到存在的class名字上。接收在集合中的元素的索引的位置和存在的class名字作为参数。在这个函数中,this被指向集合中当前的元素。
这个很重要需要注意,这个方法不是替换class。它只简单的添加class,追加到或许已经添加了该class的元素上。
这个方法被使用和.removeClass()一起使用来替换原来的class,如:
$("p").removeClass("myClass noClass").addClass("yourClass");
这里myClass和noClass被从段落中移除,yourClass被添加。
<script>
$("p:last").addClass("selected");//给元素添加一个class
</script>
<script>
$("p:last").addClass("selected highlight");//给元素添加多个class
</script>
<script>
$("div").addClass(function(index, currentClass) { //通过函数返回class
var addedClass;
if ( currentClass === "red" ) {
addedClass = "green";
$("p").text("There is one green div");
}
return addedClass;
});
</script>
.hashClass()
判断匹配的元素是否被指定了给定的class
.hasClass(className)
类型是字符串。
用于查找的class的名字。
元素也许会有多个class.在HTMl中,这个是通过空格将class的名字隔开的:
<div id="mydiv" class="foo bar"></div>
<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>
.toggleClass()
从匹配的元素中添加或者移除一个或多个class,并且依赖于class是否存在或转换的条件来交替使用添加和移除。
.toggleClass(className)
.toggleClass(className,switch)
.toggleClass([switch])
.toggleClass(function(index,class,switch)[,switch])
className
类型是字符串。
一个或多个被空格隔开的class名字来为每一个匹配的元素做切换。
switch
类型是布尔值。
一个布尔值(不仅仅是true和false)来决定class是否应该被添加或移除。
function(index,class,switch)
类型是函数。
一个函数返回在匹配元素中的class属性中做切换的class的名字。接收在集合中的元素索引的位置,原来的class的值和switch做为参数。
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
<script>
var count = 0;
$("p").each(function() {
var $thisParagraph = $(this);
var count = 0;
$thisParagraph.click(function() {
count++;
$thisParagraph.find("span").text('clicks: ' + count);
$thisParagraph.toggleClass("highlight", count % 3 == 0);//使用count%3作为交替的判断条件
});
});
</script>
<script>
var cls = ['', 'a', 'a b', 'a b c'];
var divs = $('div.wrap').children();
var appendClass = function() {
divs.append(function() {
return '<div>' + (this.className || 'none') + '</div>';
});
};
appendClass();
$('button').bind('click', function() {
var tc = this.className || undefined;
divs.toggleClass(tc);
appendClass();
});
$('a').bind('click', function(event) {
event.preventDefault();
divs.empty().each(function(i) {
this.className = cls[i];
});
appendClass();
});
</script>
.removeClass()
从匹配的元素中移除一个,多个或者所有的class。
.removeClass([className])
.removeClass(function(index,class))
className
类型是字符串。
一个或多个被空格隔开的class名字来为每一个匹配的元素做切换。
function(index,class)类型是函数。
一个函数返回一个或多个有空格隔开的class的名字会被移除。接收在集合中元素的索引位置和原来的class值做为参数。
我们可以使用.attr('class', 'newClass')方法来用另一个class替换现在存在的所有class(也就是设置class的属性)
<script>$("p:even").removeClass("blue");</script>//移除class blue
<script>$("p:odd").removeClass("blue under");</script>//移除class blue under
<script>$("p:eq(1)").removeClass();</script>//移除所有class