jquery添加類名詳解

一、jquery添加類名的方法

在jquery中，可以使用addClass()方法來添加類名，該方法可以添加一個或多個類名。

//添加一個類名
$(selector).addClass(className);

//添加多個類名
$(selector).addClass(className1 className2 ...);

其中，selector是需要添加類名的元素，className是要添加的類名，可以是一個或多個，多個類名需要用空格隔開。

例如，下面的代碼將class為”demo”的元素添加上”active”和”important”兩個類名：

$(document).ready(function(){
  $(".demo").addClass("active important");
});

二、jquery移除類名的方法

和addClass()方法相對應，jquery中也提供了removeClass()方法來移除元素的類名。

//移除一個類名
$(selector).removeClass(className);

//移除多個類名
$(selector).removeClass(className1 className2 ...);

例如，下面的代碼將class為”demo”的元素移除”active”和”important”兩個類名：

$(document).ready(function(){
  $(".demo").removeClass("active important");
});

三、jquery添加標籤

jquery中的append()方法可以在指定元素的末尾添加一個新元素或一段HTML代碼。

//添加新元素
$(selector).append(content);

//添加HTML代碼
$(selector).append(function(index,html));

其中，content可以是HTML元素、文本或變數，function用來返回新添加的元素或HTML代碼。例如，下面的代碼會在class為”demo”的元素內部添加一個新的p標籤：

$(document).ready(function(){
  $(".demo").append("
新添加的段落
");
});

四、jquery移除類名

jquery中的remove()方法可以徹底移除指定元素和元素的事件和數據，如果只需要移除元素的類名，可以使用removeAttr()方法。

//移除一個屬性
$(selector).removeAttr(attribute);

//移除多個屬性
$(selector).removeAttr(attribute1 attribute2 ...);

其中，attribute是元素的屬性名稱。例如，下面的代碼將class為”demo”的元素中的class屬性全部移除：

$(document).ready(function(){
  $(".demo").removeAttr("class");
});

五、jquery添加屬性的方法

和addClass()方法類似，jquery中也提供了attr()方法來添加元素的屬性。

//添加一個屬性
$(selector).attr(attribute,value);

//添加多個屬性
$(selector).attr({attribute1:value1, attribute2:value2, ...});

其中，attribute是屬性名稱，value是屬性值。例如，下面的代碼將class為”demo”的元素的title屬性值設置為”這是一個鏈接”：

$(document).ready(function(){
  $(".demo").attr("title","這是一個鏈接");
});

六、jquery添加屬性

jquery中的attr()方法也可以用來獲取元素的屬性值，不過要在括弧中只傳入屬性名稱。

//獲取屬性值
$(selector).attr(attribute);

例如，在上面的例子中，我們可以用下面的代碼來獲取class為”demo”的元素的title屬性值：

$(document).ready(function(){
  var title = $(".demo").attr("title");
});

七、jquery添加html

在jquery中，html()方法可以獲取或設置指定元素的HTML內容。

//獲取內容
$(selector).html();

//設置內容
$(selector).html(content);

其中，content可以是HTML元素、文本或變數。例如，下面的代碼將class為”demo”的元素的HTML內容設置為一段新的文本：

$(document).ready(function(){
  $(".demo").html("
這是新的HTML內容
");
});

八、jquery類名選擇器

在jquery中，可以使用類名選擇器來選擇擁有指定類名的元素。

$(document).ready(function(){
  $(".demo").addClass("active");
});

上面的代碼會把所有class為”demo”的元素添加上”active”類名。

九、jquery添加多個類名

如前所述，jquery中的addClass()方法可以添加一個或多個類名，這裡再舉一個例子。

$(document).ready(function(){
  $(".demo").addClass("active important");
});

上面的代碼將class為”demo”的元素添加上”active”和”important”兩個類名。

十、在jquery中指定一個類選取

在jquery中，可以使用:first、:last、:even、:odd、:eq等偽類選擇器來指定一個類選取。

$(document).ready(function(){
  $(".demo:first").addClass("active");
});

上面的代碼將class為”demo”的第一個元素添加上”active”類名。