jQuery DOM 操做(1) --->>> Class Attribute , 類屬性操做

時間 2019-11-06

標籤 jquery dom class attribute 類屬欄目 JQuery 简体版

原文原文鏈接

Class Attributehtml

我又回來了，最近由於在搞一個很是NB的東西。因此沒有時間整理技術類的相關文檔了。明天端午無意工做，因此抽空來寫一些技術文檔了。文檔也沒有什麼特別的東西。可是做爲技術來講，寫出來老是好的有的時候能給須要的人一些啓發就夠了。jquery

之前發過關於 jQuery 對於 event 的封裝，可是那個時候之只是偶爾用到了一會兒 jQuery 當中對於 js 原生 DOM 的一些 manipulation 。如今準備系統的介紹一下，全部的資料都是能夠在官方網站得到。app

Class attribute 的這些方法是用來讓人更方便的來控制 CSS 相關 CLASSES 來控制元素的樣式的。字體

Class attribute 裏面總共有 4 個 method 。網站

.addClass()this

給全部指定選擇器的元素增長指定名稱的class(es)spa

.hasClass()code

判斷指定元素是否至少有一個元素有給定名稱的 class 的htm

.removeClass()ip

給全部指定選擇器的元素移除指定名稱的class(es)

.toggleClass()

給全部指定選擇器的元素增長或者移除(也就是開關的意思)指定名稱的 class(es)

.addClass(className)

說明：

給全部指定選擇器的元素增長指定名稱的class(es),即在指定元素的 class 屬性中添加指定名稱的 class(es)

使用代碼：

// 增長一個 class

$(「p」).addClass(「myClass」);

// 增長多個 classes 中間使用空格隔開 space-separated

$(「p」).addClass(「myClass yourClass」);

實例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$("p:last").addClass("selected highlight");
</script>

</body>
</html>

代碼說明：

使用 addClass 給指定元素增長: 字體顏色爲紅色，背景色爲黃色的 classes …

.hasClass()

說明：

判斷指定元素是否至少有一個元素有給定名稱的 class 。假若有的話則返回 true 假如沒有的話則返回 false 。

使用代碼：

Element 以下：

JS 代碼以下：

// return false

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

// return true

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

實例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>

<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </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>

</body>
</html>

代碼說明：

代碼中給出了兩段段落 P ，第一段沒有使用 selected 樣式，第二段使用了 selected 樣式讓 p 段落的顏色變成了紅色。

而後有三段 div 用來判斷 p 段落是否使用了 selected 樣式。用 script 算出結果 append 到對應的 result div 後面。

Result1 = ‘false’

Result2 = ‘true’

Result3 = ‘true’

.hasClass()常常用來作判斷使用。

.removeClass()

說明：

給全部指定選擇器的元素移除指定名稱的class(es),即在指定元素的 class 屬性中移除指定名稱的 class(es)，假如沒有參數中指定的 class 的話，就什麼也不發生。

使用代碼：

// 移除一個 class

$(「p」).removeClass (「myClass」);

// 移除多個 classes 中間使用空格隔開 space-separated

$(「p」). removeClass (「myClass yourClass」);

實例代碼：

<!DOCTYPE html>
<html>
<head>
<style>

p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>

<p class="blue under">Goodbye</p>
<script>$("p:even").removeClass("blue");</script>

</body>
</html>

代碼說明：

$("p:even").removeClass("blue");

:even 隔行選擇器，從第一個元素開始選擇起，一般用於進行隔行着色的時候。上述代碼就是把 p 段落隔行去除 blue class 。

.toggleClass( className )

說明：

給全部指定選擇器的元素增長或者移除(也就是開關的意思)指定名稱的 class(es)

使用代碼：

Element 以下：

第一次咱們使用以下 js 代碼時會有以下結果

JS 代碼以下：

$('div.tumble').toggleClass('bounce')

元素改變以下:

第二次咱們使用一樣的 js 代碼會有以下結果

JS 代碼以下：

$('div.tumble').toggleClass('bounce')

元素改變以下:

實例代碼：

<!DOCTYPE html>
<html>
<head>
<style>

p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>

</body>
</html>