1.操作标签

本文介绍了如何在JavaScript中操作HTML标签,包括获取和设置闭合标签、表单标签的值以及属性。同时讲解了如何操作标签样式,如通过事件改变样式。此外,详细阐述了JavaScript的数据类型,包括基本数据类型(如number、string、boolean、null、undefined)和复合数据类型(如array、function、object),并讨论了数据类型的转换方法。
摘要由CSDN通过智能技术生成

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()转换,对结果判断是否为数字

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值