|
|
@@ -0,0 +1,62 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <input type="text" id="inp1">
|
|
|
+ <button id="btn">按钮</button>
|
|
|
+ <select id="school">
|
|
|
+ <option value="heida">黑龙江大学</option>
|
|
|
+ <option value="jiada">佳木斯大学</option>
|
|
|
+ <option value="hgc">黑工程</option>
|
|
|
+ </select>
|
|
|
+
|
|
|
+ <input type="checkbox" id="ck1">
|
|
|
+ <!-- label 标签 用于绑定表单元素 for属性用于绑定表单元素的id -->
|
|
|
+ <label for="ck1">同意</label>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var oInp = document.getElementById("inp1");
|
|
|
+ var oBtn = document.getElementById("btn");
|
|
|
+ var oSchool = document.getElementById("school");
|
|
|
+ var oCk1 = document.getElementById("ck1");
|
|
|
+
|
|
|
+ oBtn.onclick = function(){
|
|
|
+ // 获取文本框中的内容
|
|
|
+ // var val = oInp.value;
|
|
|
+ // console.log(val);
|
|
|
+ // 给文本框赋值
|
|
|
+ // oInp.value = "123";
|
|
|
+ }
|
|
|
+
|
|
|
+ // 表单事件
|
|
|
+ // 表单输入事件
|
|
|
+ oInp.oninput = function(){
|
|
|
+ console.log(this.value);
|
|
|
+ }
|
|
|
+ // 表单失去焦点事件
|
|
|
+ oInp.onblur = function(){
|
|
|
+ console.log("失去焦点");
|
|
|
+ }
|
|
|
+ // 表单获得焦点事件
|
|
|
+ oInp.onfocus = function(){
|
|
|
+ console.log("获得焦点");
|
|
|
+ }
|
|
|
+
|
|
|
+ // 下拉列表事件
|
|
|
+ // 下拉列表改变事件
|
|
|
+ oSchool.onchange = function(){
|
|
|
+ console.log(this.value);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 复选框事件
|
|
|
+ // 复选框改变事件
|
|
|
+ oCk1.onchange = function(){
|
|
|
+ console.log(this.checked);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
