day02 JS交互
1.回顾
基于对象和事件驱动的解释性脚本语言 js的组成 ECMAscript js的标准和核心 DOM 文档对象模型 BOM 浏览器对象模型 js的特性 基于对象 事件驱动 解释性 跨平台 js的引入方式 行间引入 在开始标签上加js 结构和行为不分离 内部引入 把js脚本写在script标签中 script可以写任意多个 也可以放在任意位置 建议放在body的末尾 外部引入 在外部创建js文件 用script标签的src引入 是不允许在这个script里面再写js代码 变量的命名规则 包含数字 字母 下划线 $ 但是不能以数字开头 见名知意 使用驼峰命名 不要重名 重名会覆盖 不能使用关键字和保留字 获取标签的三种方式 id document.getElementById("id名")---获取的是具体的某个标签 class document.getElementsByClassName("class名")----获取到的是集合 集合名[下标] 父元素.getElementsByClassName 只获取父元素下的对应标签 标签名 document.getElementsByTagName("标签名")----获取到的也是集合 父元素.getElementsByTagName 只获取父元素下的对应标签 绑定事件 标签.事件类型 = function(){ 要执行的代码 } onclick ondblclick onmouseover/onmouseenter onmouseout/onmouseleave onmousemove onmousedown onmouseup oncontextmenu a is not defined
2. 操作标签
2.1操作标签内容
操作标签内容分为两种
-
操作闭合标签内容
-
操作表单标签内容
2.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>
2.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识别标签
2.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>
2.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>
-
cssText语法
// 1.获取元素 var oDiv = document.getElementsByTagName("div")[0]; var btn = document.getElementsByTagName("button")[0]; // 2.添加点击事件 btn.onclick = function(){ // 添加宽高背景色 oDiv.style.width = "200px"; oDiv.style.height = "200px"; oDiv.style.backgroundColor = "teal"; //cssText会重写style行间样式 // oDiv.style.cssText = "width:200px;height:200px;background-color:pink" ; }
3.数据类型
数据类型:根据数据的特征,功能分为不同的数据类型 不同的数据类型有不同的操作
3.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(){}
3.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>
3.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'
3.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>
3.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>
3.6 null与undefined
3.6.1 undefined
undefined未定义 去拿快递 但是没有你的快递包裹 var b = undefined; console.log(b,typeof(b));// undefined "undefined"
3.6.2 null
null 空对象 快递员给了你一份空包裹 var a = null; console.log(a,typeof(a));// null "object"
-
==null和undefined有什么区别==
undefined 未定义 声明变量但没有赋值,没有存储空间 null 空对象,有存储空间(值为空)
4.面试题
1-innerHTML和innerText的区别? 相同点:都可以获取标签内容 都可以设置标签内容,设置时,两者会重写 不同点:innerText不识别标签 innerHTML识别标签 2-typeof检测不同数据类型的返回值分别是什么 number number string string boolean true/false undefined undefined null object 3-null和undefined的区别 undefined 声明变量但是没有赋值,没有储存空间 null 空对象 有储存空间(值为空) 4-NaN是什么意思,什么时候出现NaN 不是一个数,无法计算时返回NaN 5-js的数据类型有哪些 number 数字类型 string 字符串类型 boolean 布尔类型 undefined 未定义 null 空对象 object 对象类型 array 数组 function 函数 6-如何获取和设置标签样式 获取:标签.style.样式名 设置:标签.style.样式名 = 值 7-如何获取和设置标签属性 获取:标签.属性名 设置:标签.属性名 = 值 特殊:需要把class写为className 8-如何操作表单标签内容 获取:标签.value 设置:标签.value = 值