.classjs的簡單介紹

本文目錄一覽：

• 1、js中如何定義class,如何擴展prototype?
• 2、js怎麼獲取元素的class名
• 3、js 如何控制class？
• 4、js 如何獲取class的元素
• 5、js怎麼通過class獲取元素

js中如何定義class,如何擴展prototype?

思路：

JS中定義class是通過function，有點類似C++語言中的struct概念。要定義class只需要定義function，並注意this的使用。

舉例：

script

function MyClass(){

  this.a = ‘2’;//可以通過this定義屬性

}

MyClass.prototype.say= function () { //擴充方法

   return ‘hello’; 

}

MyClass.prototype.mValue= ‘3’;//擴充屬性

var mc = new MyClass();

alert(mc.a);

alert(mc.say());

alert(mc.mValue);

/script

js怎麼獲取元素的class名

js獲取元素的class名：

var className=document.getElementsByClassName(‘names’)[0];

jquery獲取元素的class名：

var className = $(‘.names’).atrr(‘class’);

相關概念

getElementsByClassName() 方法返迴文檔中所有指定類名的元素集合，作為 NodeList 對象。

NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。

js 如何控制class？

script type=”text/javascript”

window.onload = function() {

var abcs = document.getElementsByClassName(“abc”);

for(var i = 0; i abcs.length; i++) {

abcs[i].style.width = “50%”;

}

};

/script

注意：上面的代碼不支持 IE 6/7，因為 IE 6/7 不支持 getElementsByClassName。

下面的代碼支持 IE 6/7，使用 getElementsByTagName 查找 div，再查找 abc

script type=”text/javascript”

window.onload = function() {

var divs = document.getElementsByTagName(“div”);

for(var i = 0; i divs.length; i++) {

var classes = divs[i].className.split(” “);

for(var a = 0; a classes.length; a++) {

if(classes[a] === “abc”) {

divs[i].style.width = “50%”;

break;

}

}

}

};

/script

js 如何獲取class的元素

使用document.getElementsByClassName（』class『）獲取標籤，使用innerText獲取元素內的數據內容。

1、設計一個HTML簡單頁面，代碼如下:

2、設計綁定的函數alertText()，代碼如下：

3、此時的頁面展示如下：

4、演示，點擊其中的div，執行如下：

（1）點擊第一個：

（2）點擊第二個：

擴展資料：

HTML DOM getElementsByClassName() 方法解析：

1、定義和使用。

getElementsByClassName() 方法返迴文檔中所有指定類名的元素集合，作為 NodeList 對象。NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。

提示： 使用 NodeList 對象的 length 屬性來確定指定類名的元素個數，並循環各個元素來獲取需要的那個元素。

2、語法。

document.getElementsByClassName(classname)。

3、參數。

String 類型的classname（需要獲取的元素類名），多個類名使用空格分隔，如 “test demo”。

js怎麼通過class獲取元素

根據你的需求，舉例如下：

document.querySelector：獲取首個（單個）符合條件元素

document.querySelector(‘.name’); //獲取頁面上首個class屬性中包含name的元素。

document.querySelectorAll：獲取全部符合條件元素

document.querySelectorAll(‘.name’); //獲取頁面上全部class屬性中包含name的元素。