JavaScript学习笔记4之 ByClass&json
一、通过class获取标签
var out=document.getElementsByClassName(‘out’);
IE 6 7 8 不支持 getElementsName
是否有办法既能通过class获取标签
又没有兼容问题 ?
首先获取全部的标签,
用for循环遍历到所有类名相同的标签,
遍历的顺序放到数组里,
最后获得一个有相同类名的数组。
两种遍历方法:
一种是全局遍历的方法:只要类名相同的都放进数组
另一种是局部遍历的方法,在局部遍历相同的类。
实例如下:
页面布局:
<div id="box1">
<div class="con">
<span>我是span标签111</span>
</div>
<div class="con">
<span>我是span标签222</span>
</div>
<div class="con">
<span>我是span标签333</span>
</div>
</div>
<div id="box2">
<div class="con">
<span>我是span标签444</span>
</div>
<div class="con">
<span>我是span标签555</span>
</div>
</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);//测试
局部获取:
/*局部获取*/
function byClass2(parentID,oClass){//对于局部获取封装成函数
var parent=document.getElementById(parentID);//获得局部的ID
var tags=parent.all?parent.all:parent.getElementsByTagName('*');//不同处:获取特定ID下的所有标签
var arr=[];
for (var i = 0; i < tags.length; i++) {
if (tags[i].className==oClass) {
arr.push(tags[i]);
};
};
return arr;
}
var cons=byClass2('box1','con');//调用局部函数,传入参数(特定的ID名,所要遍历的类名)
alert(cons.length);//测试
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的更多相关文章
- Spring MVC 学习笔记11 —— 后端返回json格式数据
Spring MVC 学习笔记11 -- 后端返回json格式数据 我们常常听说json数据,首先,什么是json数据,总结起来,有以下几点: 1. JSON的全称是"JavaScript ...
- JavaScript学习笔记[0]
JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记(3——this/call/apply)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(4——关闭/getter/setter)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
随机推荐
- OpenGL ES: Array Texture初体验
[TOC] Array Texture这个东西的意思是,一个纹理对象,可以存储不止一张图片信息,就是说是是一个数组,每个元素都是一张图片.这样免了频繁地去切换当前需要bind的纹理,而且可以节省系统资 ...
- charles工具抓包教程(http跟https)
1.下载charles 可以去charles官网下载,下载地址:http://www.charlesproxy.com/download/ 根据自己的操作系统下载对应的版本,然后进行安装,然后打 ...
- EMD分析 Matlab 精华总结 附开源工具箱(全)
前言: 本贴写于2016年12与15日,UK.最近在学习EMD(Empirical Mode Decomposition)和HHT(Hilbert-Huang Transform)多分辨信号处理,FQ ...
- Google软件构建工具Bazel原理及使用方法介绍
近期,Google开源了强大的自动化构建工具Bazel. 正好博主近期在使用china版的Bazel--腾讯自主开发的Blade,所以准备跟大家分享一下Google Bazel这个分布式构建系统的原理 ...
- ASP.NET MVC Model验证(三)
ASP.NET MVC Model验证(三) 前言 上篇中说到在MVC框架中默认的Model验证是在哪里验证的,还讲到DefaultModelBinder类型的内部执行的示意图,让大家可以看到默认的M ...
- Android-RecyclerView
众所周知,RecyclerView是Google公司推出的V7包中的一个重要的控件,非常方便,可以替代现有的ListView和Gridview等控件,它功能很强大,灵活性好,扩展性强,还自带VIewH ...
- EF Code First Migrations数据库迁移
1.EF Code First创建数据库 新建控制台应用程序Portal,通过程序包管理器控制台添加EntityFramework. 在程序包管理器控制台中执行以下语句,安装EntityFramewo ...
- Electron安装
1.安装nodejs和npm 官网下载地址:https://nodejs.org/en/download/ 安装包:下载.msi 安装完成后: nodejs.npm都会安装好,path环境变量也自动设 ...
- 初识AngularJS 之 HelloWorld和数据绑定
1.Hello World 我用的开发工具是 atom ,大家有需要的话可以找我要安装包嘻嘻 第一步: 写入以下代码: <!DOCTYPE html> <html ng-ap ...
- Node.js:DNS模块的使用
Nodejs的DNS模块包涵有关DNS查询和操作的方法,下面介绍该模块的基本用法以及实现一个DNS查询小工具. 1.获取DNS服务器地址 使用getServers方法,该方法返回一个IP地址组成的数组 ...