JavaScript学习笔记4之 ByClass&json
来源:互联网 发布:域名更换备案主体 编辑:程序博客网 时间:2024/05/21 07:13
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的值
- JavaScript学习笔记4之 ByClass&json
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
- JavaScript学习笔记之JSON&Ajax
- JavaScript学习笔记3之 数组 & arguments(参数对象)& 数字和字符串转换 & innerText/innerHTML & 鼠标事件
- JavaScript JSON 学习笔记
- Javascript学习笔记(JSON对象)
- JSON详细学习之JSON in JavaScript
- 学习笔记之JavaScript
- Json学习笔记之Json语法
- Json学习笔记之Json的使用
- android学习笔记之JSON
- android学习笔记之JSON .
- Android学习笔记之JSON
- JavaScript学习笔记一AJAX和JSON
- JavaScript学习笔记(2)---遍历json
- JSON-JavaScript对象表示法--学习笔记
- H5的学习笔记之HTML5Canvas画图标签&amp;画线,圆,渐变色
- OOAD&UML学习笔记
- JavaScript学习笔记2之Tab切换
- 深入浅出Block的方方面面
- 对于不可屏蔽中断NMI,CPU响应中断的条件有哪些
- JavaScript学习笔记3之 数组 & arguments(参数对象)& 数字和字符串转换 & innerText/innerHTML & 鼠标事件
- Http协议网络请求
- JavaScript学习笔记4之 ByClass&json
- 20161013 晨报
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
- 【php】phpstorm配置-window上
- error: Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCom
- JavaScript学习笔记6 之经典神坑题整理
- JavaScript学习笔记7 之DOM文档对象模型
- JS学习笔记8之 BOM-浏览器对象模型
- JS学习笔记9之event事件及其他事件