1.1 操作标签内容
1.1.1 闭合标签
获取
元素.innerHTML/元素.innerText
设置
元素.innerHTML/元素.innerText = 值
区别:
元素.innerHTML 可以识别标签,具有覆盖的特性
元素.innerText 不可以识别标签,具有覆盖的特性
1.1.2 表单标签
获取:表单元素.value
设置:表单元素.value=值
1.2 操作标签属性
获取:var 变量 =标签.属性名
设置:标签.属性名 = 值
特殊:class
标签.className
// 1.获取标签
varoDiv=document.getElementById('con');
// 2.获取属性
varid=oDiv.id;
console.log(id);
vartitle=oDiv.title;
console.log(title);
// 3.特殊:类名-className
varclassN=oDiv.className;
console.log(classN);
// 4.设置:标签.属性名 = 属性值
oDiv.id='acbd';
oDiv.title='今天你学习了吗';
oDiv.className='active';
1.3 操作标签样式
获取:标签.style.样式名(一般不进行获取,只能获取到行间样式)
设置:
标签.style.样式名 = 值
标签.style.cssText = "" 重写style属性的值
// 1.获取标签
varoDiv=document.getElementsByClassName('box')[0];
// 2.移入事件
oDiv.οnmοuseοver=function(){
// 3.更改样式
/* oDiv.style.background = 'green';
oDiv.style.color = 'yellow';
oDiv.style.width = '200px';
oDiv.style.fontSize = '80px'; */
// 标签.style.cssText = "" 重写style属性的值
oDiv.style.cssText='width: 100px; font-size: 40px'
}
// 获取
varh=oDiv.style.height;
console.log(h); // 没有获取到 非行间不行
console.log( oDiv.style.color ); // 只能获取行间样式
2.数据类型
2.1 数据类型分类
五大基本(简单)数据类型
number 数值
string 字符串
boolean 布尔
null 空
undefined 未定义
复合(引用)数据类型
array 数组
function 函数
object 对象
2.2 基本数据类型
number:整数 正数 负数 小数 进制数(八进制 十六进制) NaN Infinity
varn1=1.2324;
varn2=-11.11;
varn3=12;
console.log(typeofn1, n1);
console.log(typeofn2, n2);
console.log(typeofn3, n3);
// 1:进制数(八进制 十六进制) 了解
// 八进制(由0-7组成,以0开头)
varn4=070;
console.log(typeofn4, n4); // number 56
// 十六进制(由0-9 a-f组成,以0x开头)
varn5=0x12;
console.log(typeofn5, n5); // number 18
// 2.NaN: not a number 不是一个数值 不能得到正确的运算结果时出现
console.log('a'*5); // NaN
varn6=NaN;
console.log(n6, typeofn6); // NaN 'number'
console.log(5-'哈哈'); // NaN
// 3.Infinity 无穷大
varn7=Infinity;
console.log(n7, typeofn7); // Infinity number
console.log(10/0); // Infinity
// 4.小数精度确失(不能用小数进行比较)
console.log( 0.1+0.2 ); // 0.30000000000000004
string: 字符串 使用引号引起来的内容 '' ""
变量数字布尔值都不加引号
vars1='abcdef';
console.log(s1, typeofs1); // abcdef string
vars2="吃啥啊";
console.log(s2, typeofs2);
// 使用+做拼接
vars3=s1+s2;
console.log(s3);
varname='小明';
varage=18;
console.log('我叫'+name+',我今年'+age+'岁');
// length长度属性
vars1='abcdef';
console.log( s1.length ); // 6
// 通过下标取值:str[下标] 下标从0开始
console.log( s1[1] );
boolean
布尔:truefalse
比较或者判断时出现
vart1=true;
vart2=false;
console.log(t1, typeoft1);
console.log(t2, typeoft2);
console.log( 1>2 ); // 假false
console.log( 2<5 ); // 真true
null和undefined
/* 区别:
null:空 空对象 获取不存在的对象得到的结果 object类型
undefined: 未初始化,变量只声明不赋值,表示值的空缺 undefined类型
*/
// 1.null
varnu=null;
console.log(nu, typeofnu); // null 'object'
vardiv=document.getElementById('ab');
console.log(div); // null
// 2.undefined
vara;
console.log(a, typeofa); // undefined 'undefined'
3.数据类型的转换
number string boolean null undefined
3.1 强制类型转换
3.1 转number
Number(值):返回转换好的数值,只能转纯数字的字符串或空字符串
parseInt():从左到右尽可能的转换为数字,不识别小数点,取整
parseFloat():从左到右尽可能的转换为数字,识别小数点,保留小数
vars1='100';
vars2='200元';
vars3='';
console.log( Number(s1), s1 ); // 100
console.log( Number(s2), s2 ); // NaN
console.log( Number(s3), s3 ); // 0
// Number()只能转纯数字的字符串或空字符串
console.log( Number(true), true ); // 1
console.log( Number(false), false ); // 0
console.log( Number(null), null ); // 0
console.log( Number(undefined), undefined ); // NaN
// 2.parseInt():从左到右尽可能的转换为数字,不识别小数点,取整
// 3.parseFloat():从左到右尽可能的转换为数字,识别小数点,保留小数
varn1='10.12px';
varn2='9.88.12元';
console.log( parseInt(n1) ); // 10
console.log( parseFloat(n1) ); // 10.12
console.log( parseFloat(n2) ); // 9.88 只识别一个小数点
3.2 转string
String():万能转换
xx.toString():null和undefined不能使用,会报错
varn=100;
vart1=true, t2=false;
// 1.String(值): 万能转换
console.log( String(n), n ); // '100'
console.log( String(t1), t1 ); // 'true'
console.log( String(t2), t2 ); // 'false'
console.log( String(null), null ); // 'null'
console.log( String(undefined), undefined );
// 2.xx.toString()
console.log( n.toString(), n );
console.log( t1.toString(), t1 );
console.log( t2.toString(), t2 );
// 在js中,.可以理解为的 null和undefined上没有任何属性和方法
console.log( null.toString() ); 报错
console.log( undefined.toString() ); 报错
3.3 转boolean
Boolean(值)
真假值:
假值:0 NaN '' null undefined false
引用数据类型永远为真
console.log( Boolean(100) ); // true
console.log( Boolean(-100) ); // true
console.log( Boolean(0) ); // false
console.log( Boolean('abc') ); // true
console.log( Boolean('') ); // false
console.log( Boolean(null) ); // false
console.log( Boolean(undefined) ); // false
console.log( Boolean(NaN), NaN ); // false
console.log( Boolean(Infinity), Infinity ); // true
console.log( Boolean([]) ); // true
console.log( Boolean({}) ); // true
3.2 隐式类型转换
在运算过程中会自动把数据转换为对应类型,再参与运算
3.3 其他方法
xx.toFixed(n):保留n为小数,四舍五入 结果是个字符串
isNaN(): is not a number 是不是 不是一个数字 true-不是数字 false-是数字 判断时会先使用Number()转换,对结果判断是否为数字