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的值