JavaScript學習筆記4之 ByClass&json

一、通過class獲取標簽

var out=document.getElementsByClassName(‘out’);
IE 6 7 8 不支持 getElementsName

是否有辦法既能通過class獲取標簽
又沒有相容問題 ？

首先獲取全部的標簽，

用for迴圈遍歷到所有類名相同的標簽，

遍歷的順序放到數組裡，

最後獲得一個有相同類名的數組。

兩種遍歷方法：

一種是全局遍歷的方法：只要類名相同的都放進數組

另一種是局部遍歷的方法，在局部遍歷相同的類。

實例如下：

頁面佈局：

 1 <div id="box1">
 2     <div class="con">
 3         <span>我是span標簽111</span>
 4     </div>
 5     <div class="con">
 6         <span>我是span標簽222</span>
 7     </div>
 8     <div class="con">
 9         <span>我是span標簽333</span>
10     </div>
11 </div>
12 <div id="box2">
13     <div class="con">
14         <span>我是span標簽444</span>
15     </div>
16     <div class="con">
17         <span>我是span標簽555</span>
18     </div>
19 </div>

全局獲取：

/*全局獲取*/
    function byClass1(oClass){//對於全局獲取封裝成函數
        var tags=document.all?document.all:document.getElementsByTagName('*');//獲取全部的標簽
        var arr=[];//創建數組
        for (var i = 0; i < tags.length; i++) {//for迴圈遍歷
            if (tags[i].className==oClass) {
                arr.push(tags[i]);//把類名相同的放在一個數組裡
            };
        };
        return arr;
    }
    var cons=byClass1('con');//調用全局函數，傳入參數（所要遍歷的類名）
    alert(cons.length);//測試
    alert(cons[3].innerHTML);//測試

局部獲取：

 1 /*局部獲取*/
 2     function byClass2(parentID,oClass){//對於局部獲取封裝成函數
 3         var parent=document.getElementById(parentID);//獲得局部的ID
 4         var tags=parent.all?parent.all:parent.getElementsByTagName('*');//不同處：獲取特定ID下的所有標簽
 5         var arr=[];
 6         for (var i = 0; i < tags.length; i++) {
 7             if (tags[i].className==oClass) {
 8                 arr.push(tags[i]);
 9             };
10         };
11         return arr;
12     }
13     var cons=byClass2('box1','con');//調用局部函數，傳入參數（特定的ID名，所要遍歷的類名）
14     alert(cons.length);//測試
15     alert(cons[2].innerHTML);//測試

二、json

json是一種輕量級的數據交換格式，是 JavaScript 原生格式，是理想的數據交換格式。

1、json對象
json對象以“{”開始 ， 以“}”結束，每個“名稱”後跟一個“:”（冒號），‘名：值' 對 之間運用 “,”（逗號）分隔。
var json1={ 'name' : '小麗' , 'sex' : '女' , 'age' : '22' } ;

2、json字元串
所謂json字元串，是指該字元串變數的值與json的格式相同，但是不是json對象。
var json2="{ 'name' : '小麗' , 'sex' : '女' , 'age' : '22' }" ;
3、json使用
var json1={ 'name' : '小麗' , 'sex' : '女' , 'age' : '22' } ;
alert( json1.name ); // 彈出 '小麗'
4、json字元串轉換為json對象
var json2="{ 'name' : '小麗' , 'sex' : '女' , 'age' : '22' }";
運用 eval( )函數轉換
例如：
var json3=eval( '('+json2+')' ) ;
alert( json3.name ); // 彈出 '小麗'
5、json迴圈
普通for迴圈
var arr=[2,4,6];
for (var i=0; i<arr.length; i++){
alert(arr[i]); //2 4 6
}
json迴圈只能用 for in
var jsn={‘a’:8,‘b’:8,‘c’:28};
for (var i in jsn){
alert(jsn[i]); //8 18 28
}
i → json的key , jsn[i] → 對應key的值