概述
1. 操作标签
1.1操作标签内容
操作标签内容分为两种
-
操作闭合标签内容
-
操作表单标签内容
1.1.1操作表单标签内容
-
获取：标签.value
-
设置 ：标签.value = 值
<script>
var oInput = document.getElementsByTagName("input")[0]
//1.获取表单元素的value值 标签.value
console.log(oInput);
console.log(oInput.value)
//2.设置表单元素的value值 标签.value = 值
// oInput.value = "456"
// 2.点击设置按钮 给表单元素设置value为456
// 给button添加点击事件 标签.onclick = fucntion(){ 要做的事}
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
oInput.value = "456"
}
</script>
1.1.2操作闭合标签内容
-
获取： 标签.innerText 标签.innerHTML
// 1.获取闭合标签的内容 标签.innerHTML 标签.innerText
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv);
console.log(oDiv.innerHTML);//今天周二了
console.log(oDiv.innerText);//今天周二了-
设置：标签.innerText = 值 标签.innerHTML = 值
// 2.设置闭合标签的内容 标签.innerHTML = 值 标签.innerText = 值
//先将原先的内容拿出来(标签.innerHTML) 和 赵四链接在一起
oDiv.innerHTML = oDiv.innerHTML + "赵四"
oDiv.innerText = "123"
//3.给p标签设置内容 innerHTML和innerText的区别
var oP = document.getElementsByTagName("p")[0];
console.log(oP)
// oP.innerHTML = "<b>主人下马客在船</b>"
oP.innerText = "<b>蒋前进</b>"-
innerText和innerHTML的区别
相同点:都可以获取标签内容 都可以设置标签内容，设置的时候 两者都会重写
不同点：innerText不识别标签 innerHTML识别标签
1.2 操作标签属性
属性:属性是在开始标签上 属性名="属性值"
-
获取：标签.属性名
-
设置：标签.属性名 = 值
-
特殊：class需要写成className设置
<script>
var oDiv = document.getElementById("wrap");
// 1.获取属性 标签.属性名 特殊：class需要用className获取
console.log(oDiv.id);//wrap
console.log(oDiv.className);//box
var oA = document.getElementsByTagName("a")[0];
console.log(oA.href);//https://www.baidu.com
// 2.设置属性 标签.属性名 = 值 特殊：class需要className设置
oDiv.id = "wrap1";
oDiv.className = "box1";
oA.href = "https://wwww.jd.com";
</script>1.3 操作标签样式
==注意：操作的都是行间样式==
-
获取：标签.style.样式名
-
设置：标签.style.样式名 = 值
-
特殊：如果样式带连字符- 需要改写成驼峰名 例如background-color改为backgroundColor
<script>
// 以下操作的都是行间样式
var oDiv = document.getElementsByTagName("div")[0];
// 1.获取样式 标签.style.样式名 注意：如果是-链接的样式 需要改成小驼峰命名 例如background-color改为backgroundColor
console.log(oDiv.style.width);//200px
console.log(oDiv.style.height);//200px
console.log(oDiv.style.color);//
console.log(oDiv.style.backgroundColor);//red
var btn = document.getElementsByTagName("button")[0];
// 2.设置样式 标签.style.样式名 = 值 注意：如果是-链接的样式 需要改成小驼峰命名 例如background-color改为backgroundColor
btn.onmouseover = function () {
oDiv.style.width = "500px";
oDiv.style.backgroundColor = "teal";
}
</script>2.数据类型
数据类型:根据数据的特征，功能分为不同的数据类型 不同的数据类型有不同的操作
2.1 数据类型的分类
六大数据类型：五种基本数据类型和一个特殊类型
五种基本数据类型
number 数值类型 10 40 60
string 字符串类型 "123" "1000" '123'
boolean 布尔类型 true|false
undefined 未定义
null 空对象
一种特殊类型(复合类型 对象类型 引用类型)
object 对象类型 {'name':'李四',age:20}
array 数组 [10,20,30,40]
function 函数 function(){}
2.2 typeof
-
作用：检测数据类型
-
语法：typeof(检测的数据) typeof 检测的数据
<script>
// 检测number类型
var a = 10;
// 1.typeof(检测的数据) 返回检测结果
console.log( typeof(a) );//number
// 2.typeof 检测数据
console.log( typeof a );//number
var s1 = "ertyuiopdfghjkl";
console.log( typeof s1 );//string
console.log(typeof(123),1);//number 1
console.log(typeof("123"),"检测数据");//string "检测数据"
</script>2.3 number数值
-
number数值类型 整数 小数 负数 8进制 16进制 NaN
<script>
// number数值类型:整数 小数 负数 8进制 16进制 NaN
// 1.整数
var a = 10;
console.log(a, typeof (a));//10 'number'
// 2.小数
var n1 = 3.1415926;
console.log(n1, typeof (n1));//3.1415926 'number'
var n2 = .5;
console.log(n2, typeof (n2));//0.5 'number'
var n3 = 5;
console.log(n3, typeof (n3));// 'number'
// 3.NaN not a number 不是一个数 运算得不到正确的结果的时候
var n7 = 10 / "你好";
console.log(n7, typeof (n7));//NaN 'number'
// 在js中 == 意思是左边的是否和右边的相等 如果相等返回true 否则返回false
console.log(1 == 2);//false
// 任意两个NaN都不相等
console.log(NaN == NaN);//false
/*------------------------------了解-----------------------------*/
// 浏览器是显示10进制的数
//4. 8进制:以0开头 范围在0-7之间
var n4 = 070;
console.log(n4, typeof (n4));//56
var n5 = 0771;
console.log(n5, typeof (n5));//505
// 5. 16进制 以0x开头 范围0-9 a-10 b-11 c-12 d-13 e-14 f-15
var n6 = 0xff;
console.log(n6, typeof (n6))
// 6.小数在运算的时候会精度缺失
//是因为计算机在计算的时候 是先将数转换为二进制进行计算，在转换过程中出现精度缺失
var n8 = 0.1 + 0.2
console.log(n8);//0.30000000000000004
console.log(n8 == 0.3);//false 不要把小数运算作为判断条件 是不会影响代码的执行的
</script>-
NaN not a number 不是一个数
// 3.NaN not a number 不是一个数 运算得不到正确的结果的时候
var n7 = 10 / "你好"; // / 除 *乘
console.log(n7, typeof (n7));//NaN 'number'2.4 string字符串
string字符串:引号引起来的都是字符串 ("" '')，==所有从页面中获取的聂荣都是字符串类型==
-
字符串.length ：获取字符串的长度
-
字符串[下标] ：获取对应下标的字符 下标都是从0开始
-
字符串.charAt(下标) 获取对应下标的字符
-
字符串遇到+ 会拼接
<script>
// 1.string类型 用引号引起来的都是string类型
var s1 = "123";
console.log(s1,typeof(s1));// "123" "string"
var s2 = "0711web";
console.log(s2,typeof(s2));// "0711web" "string"
var s3 = "中公教育软件学员2022年0711web";
// 2.字符串.length 获取字符串的长度
console.log( s1.length );//3
console.log( s2.length);//7
//3.字符串[下标] 获取对应下标的字符 下标都是从0开始
var res = s1[1];
console.log(res);//2
var res1 = s2[4];
console.log(res1)//w
console.log( s3[3]);//育
//4.字符串.charAt(下标) 获取对应下标的字符
var res2 = s3.charAt(0);
console.log(res2);//中
console.log(s3.charAt(7));//员
//5.字符串遇到+ 会拼接
console.log(1 + 1);//2
console.log(1 + '1');//"11" 是字符串的类型11
console.log(10 + 5 + '30');//"1530"
console.log( "30"+ 10 + 5);// "3010" + 5 = "30105"
console.log(10 + "30" + 5);// "10305"
</script>2.5 boolean布尔类型
<script>
// boolean类型 true和false
var b1 = true;
console.log(b1,typeof(b1));// true "boolean"
var b2 = false;
console.log(b2,typeof(b2));// false "boolean"
</script>2.6 null与undefined
2.6.1 undefined
undefined未定义 去拿快递 但是没有你的快递包裹
var a = null;
console.log(a,typeof(a));// null "object"2.6.2 null
null 空对象 快递员给了你一份空包裹
var b = undefined;
console.log(b,typeof(b));// undefined "undefined"null和undefined有什么区别
undefined 未定义 声明变量但没有赋值，没有存储空间
null 空对象，有存储空间(值为空)
最后
以上就是伶俐饼干为你收集整理的JavaScript（二）的全部内容，希望文章能够帮你解决JavaScript（二）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复