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'