2.js交互
-
交互步骤:找对应的标签,添加事件,事件反馈
2.1获取标签
2.2.1通过id名获取
-
document.getElementById("id名");
-
适合:适合单个标签获取
<body> <!-- 标签就是元素 --> <div class="box" id="wrap">这是div标签</div> <script> // 1.通过id名获取 document.getElementById("id名"); var oDiv = document.getElementById("wrap"); console.log(oDiv); </script> </body>
2.2.2通过类名获取
-
document.getElementsByClassName("class名字") 获取整个文档下的对应标签
-
父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签
==注意:通过类名获取的是元素集合 获取元素集合中具体某一个元素需要加下标 元素集合[下标]==
==注意:元素集合只有一个元素,也要通过下标的形式获取==
<script> //2.通过类名获取 //2.1 document.getElementsByClassName("class名字") 获取整个文档下的对应标签 var oDiv = document.getElementsByClassName("box"); console.log(oDiv);//HTMLCollection(3) 元素集合 //获取元素集合中的具体某一个标签 语法 元素集合[下标] console.log(oDiv[0]); console.log(oDiv[2]); // 2.2 父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签 //先获取父元素 通过class类名 var oUl = document.getElementsByClassName("list"); console.log(oUl[0]);//元素集合中哪怕只有一个 也有通过下标的形式获取 // 获取ul下的box var list = oUl[0].getElementsByClassName("box"); console.log(list); </script>
2.2.3通过标签名获取
-
document.getElementsByTagName("标签名") 获取整个文档下的对应标签
-
父元素.getElementsByTagName("标签名") 获取父元素下对应的标签
==注意:通过标签名获取的是元素集合 获取元素集合中具体某一个元素需要加下标 元素集合[下标]==
==注意:元素集合只有一个元素,也要通过下标的形式获取==
<script> // 3.通过标签名获取 // 3.1 document.getElementsByTagName("标签名") 获取整个文档下的对应标签 var oDiv = document.getElementsByTagName("div"); console.log(oDiv);//HTMLCollection(4) 元素集合 获取元素集合中具体的标签 元素集合[下标] console.log(oDiv[1]); //3.2 父元素.getElementsByTagName("标签名") 获取父元素下对应的标签 var oUl = document.getElementsByTagName("ul")[0]; console.log(oUl); var xDiv = oUl.getElementsByTagName("div"); console.log(xDiv);//HTMLCollection [div] </script>
2.2鼠标事件
-
添加事件
元素.事件类型 = function(){ 要做什么事 }
-
鼠标事件类型
onclick 鼠标左键单击 ondblclick 鼠标双击 onmouseover/onmouseenter 鼠标移入 onmouseout/onmouseleave 鼠标移出 onmousemove 鼠标移动 onmousedown 鼠标按下 onmouseup 鼠标抬起 oncontextmenu 鼠标右键显示菜单
// 1.获取元素 var oDiv = document.getElementsByTagName("div")[0]; console.log(oDiv); // 2.鼠标单击 onclick oDiv.onclick = function () { console.log("单击"); } // 3.鼠标双击 ondblclick oDiv.ondblclick = function () { console.log("双击"); } // 4.鼠标移入 onmouseover oDiv.onmouseover = function () { console.log("移入"); } // 5.鼠标移动 onmousemove oDiv.onmousemove = function () { console.log("移动"); } // 6.鼠标移出 onmouseout oDiv.onmouseout = function () { console.log("移出"); } // 7.鼠标按下 onmousedown oDiv.onmousedown = function () { console.log("按下"); } // 8.鼠标抬起 onmouseup oDiv.onmouseup = function () { console.log("抬起"); } // 9.鼠标右键显示菜单 oDiv.oncontextmenu = function () { console.log("右击显示菜单项"); } // 10.onmouseenter onmouseleavae 移入移出 oDiv.onmouseenter = function () { console.log("移入1"); } oDiv.onmouseleave = function () { console.log("移出1"); }
3.操作内容
-
标签分为:闭合标签和表单元素两种
3.1闭合标签
-
获取:元素.innerHTML 元素.innerText
-
设置:元素.innerHTML = 值 元素.innerText = 值
<script> var oDiv = document.getElementsByTagName("div")[0]; // 1.闭合标签的内容 获取及设置 // 1-1获取 元素.innerHTML 元素.innerText console.log(oDiv.innerHTML);//这是一个div标签 console.log(oDiv.innerText);//这是一个div标签 // 1-2设置 元素.innerHTML = 值 元素.innerText = 值 重写之前的内容 oDiv.innerHTML = "这是一个新的文本内容"; oDiv.innerText = 123; /* innerHTML和innerText的区别? 相同点:都是重写覆盖闭合标签上的原有内容 不同点:innerHTML可以识别标签 innerText不识别标签 */ // 1-3 区别 oDiv.innerHTML = "<b>456</b>";//innerHTML可以识别标签 oDiv.innerText = "<i>098765</i>";//innerText不识别标签 // 1-4 在原有的文本内容上追加内容 字符串数据类型遇到+ 是拼接 // 原有的内容 + 新的值 oDiv.innerHTML = oDiv.innerText + "123"; </script>
==面试题: innerHTML和innerText的区别?==
相同点:都是重写覆盖闭合标签上的原有内容 不同点:innerHTML可以识别标签 innerText不识别标签
3.2表单元素
-
获取 元素.value
-
设置 元素.value = 值
body> <form action=""> <input type="text" placeholder="请输入文本内容" value="张三"> </form> <script> var oInp = document.getElementsByTagName("input")[0]; // 表单元素的设置和获取 // 1-1获取 元素.value console.log(oInp.value); // 1-2设置 元素.value = 值 oInp.value = "李四"; </script> </body>
4.操作样式
-
获取 元素.style.样式名
-
设置 元素.style.样式名 = 值
==注意事项==
-
注意1:如果样式名是连字符 在js中需要改写成小驼峰命名 将连字符去掉 连字符后的首字母换成大写 例如:background-color需要改为backgroundColor
-
注意2 只能获取行内样式 内部样式和外部样式无法获取
<body> <!-- 行内引入 --> <div style="width: 200px;height:200px;background-color: red;"></div> <script> // 注意1 如果样式名是连字符 在js中需要改写成小驼峰命名 将连字符去掉 连字符后的首字母换成大写 // 注意2 只能获取行内样式 内部样式和外部样式无法获取 var oDiv = document.getElementsByTagName("div")[0]; // 1.获取样式 元素.style.样式名 console.log(oDiv.style.width);//200px console.log(oDiv.style.height);//200px console.log(oDiv.style.backgroundColor);// red // 2.设置样式 元素.style.样式名 = 值 oDiv.style.width = "500px"; oDiv.style.height = "600px"; oDiv.style.borderRadius = "50%"; </script> </body>
5.操作属性
-
属性:存在开始标签上 例如class id style src alt
-
获取:元素.属性名
-
设置:元素.属性名 = 值
==注意:class需要写成className==
<body> <div class="box" id="wrap"></div> <img src="./img/1.jpg" alt="表情包"> <input type="text"> <script> var oDiv = document.getElementsByTagName("div")[0]; var oImg = document.getElementsByTagName("img")[0]; var oInput = document.getElementsByTagName("input")[0]; // 获取 元素.属性名 特殊:class需要写成className console.log(oDiv.id);//wrap console.log(oDiv.className);//box console.log(oImg.src);// console.log(oInput.type);//text // 设置 元素.属性名 = 值 oDiv.className = "box1"; oInput.type = "password"; </script> </body>
6.数据类型
-
数据类型:根据数据的特征及功能分为不同的数据类型,不同的数据类型有不同的操作
6.1数据类型的分类
-
六大数据类型:五种基本数据类型和一种特殊数据类型
-
五种基本数据类型
-
number 数值类型 1234
-
string 字符串类型 "文字" '文字'
-
boolean 布尔类型 true false
-
undefined 未定义
-
null 空对象
-
-
特殊数据类型(复杂数据类型 引用数据类型 对象数据类型)
-
object 对象类型 { "name":"张三" }
-
array 数组类型 [1,2,3,4]
-
function 函数 function(){}
-
6.2检测数据类型typeof
-
语法1 typeof(要检测的数据)
-
语法2 typeof 要检测的数据类型
/* typeof检测结果 面试题 number类型的数据 number string类型的数据 string boolean类型的数据 boolean undefined undefined null object object类型的数据 object array类型的数据 object function函数 function */ var a = 10; // 1.语法1 typeof(要检测的数据) console.log(typeof (a));//number // 2.语法2 typeof 要检测的数据类型 console.log(typeof a);//number console.log("结果", typeof a); console.log(1, typeof a);//1 'number' console.log(typeof "文字");//string console.log(typeof true);//boolean console.log(typeof undefined);//undefined console.log(typeof null);//object console.log(typeof {});//object console.log(typeof [1, 2, 3]);//object console.log(typeof function () { });//function