javaweb基础打卡13

DOM文档对象模型（续）

4.HTML DOM：
	1.标签体的设置和获取：innerHTML
		1.动态表格案例：
			//使用innerHTML添加
			document.getElementById("btn_add").onclick = function () {
				//2.获取文本框的内容
				var id = document.getElementById("id").value;
				var name = document.getElementById("name").value;
				var gender = document.getElementById("gender").value;
				//获取table
				var table = document.getElementsByTagName("table")[0];
				//追加一行
				table.innerHTML += "<tr>\n" +
					"        <td>"+id+"</td>\n" +
					"        <td>"+name+"</td>\n" +
					"        <td>"+gender+"</td>\n" +
					"        <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" +
					"    </tr>";
			}
	2.使用html元素对象的属性
	3.控制元素样式：
		1.使用元素的style属性来设置
			//修改样式方式1
			div1.style.border = "1px solid red";
			div1.style.width = "200px";
			//font-size--> fontSize
			div1.style.fontSize = "20px";
		2.提前定义好类选择器的样式，通过元素的className属性来设置其class属性值
			<style>
				.d1{
					border: 1px solid red;
					width: 100px;
					height: 100px;
				}
			</style>
			div2.className = "d1";

事件监听机制

1.概念：某些组件被执行了某些操作后，触发某些代码的执行
	1.事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
	2.事件源：组件。如：按钮，文本输入框...
	3.监听器：代码
	4.注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码
2.常见的事件：
	1.点击事件：
		1.onclick：单击事件
		2.ondblclick：双击事件
	2.焦点事件：
		1.onblur：失去焦点
			- 一般用于表单校验
			//1.失去焦点事件
			 document.getElementById("username").onblur = function (){
                 alert("失去焦点了...");
             }
		2.onfocus：元素获得焦点
	3.加载事件：
		1.onload：一张页面或一副图像完成加载
			//2.加载完成事件 onload
			window.onload = function () {...}
	4.鼠标事件：
		1.onmousedown：鼠标按钮被按下
			- 定义方法时，定义一个形参，接收event对象
            - event对象的button属性可以获取鼠标哪个按钮键被点击了
				//4.绑定鼠标点击事件
				document.getElementById("username").onmousedown = function(event){
					 // alert("鼠标点击了...");
					 alert(event.button);
				}
		2.onmouseup：鼠标按键被松开
		3.onmousemove：鼠标被移动
		4.onmouseover：鼠标移到某元素之上
			//3.绑定鼠标移动到元素之上事件
            document.getElementById("username").onmouseover = function(){
                alert("鼠标来了...");
            }
		5.onmouseout：鼠标从某元素移开		
	5.键盘事件：
		1.onkeydown：某个键盘按键被按下
			document.getElementById("username").onkeydown = function(event){
                if(event.keyCode == 13){
                    alert("提交表单");
                }
            }
		2.onkeyup：某个键盘按键被松开
		3.onkeypress：某个键盘按键被按下并松开
	6.选择和改变：
		1.onchange：域的内容被改变
			document.getElementById("username").onchange = function(){
                alert("改变了");
            }
		2.onselect：文本被选中
	7.表单事件：
		1.onsubmit：确认按钮被点击
			- 可以阻止表单的提交：方法返回false则表单被阻止提交
				- 方法1：
					<form action="#" method="post" id="form">
						<input id="username" name="username">
						<input type="submit" value="提交">
					</form>
					<script>
						document.getElementById("form").onsubmit = function(){
							//校验用户名格式是否正确
							var flag = false;
							return flag;
						}
					</script>	
				- 方法2：
					/*onclick中""的内容相当于：
						function fun(){
						   return checkForm();
						}*/
					 
					<form action="#" method="post" id="form" onclick="return checkForm();">
						<input id="username" name="username">
						<input type="submit" value="提交">
					</form>
					<script>
						function checkForm(){
							return false;
						}
					</script>	
		2.onreset：重置按钮被点击
3.表格全选案例：
	<style>
		.out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>
	<script>        
        /*分析：
            1.全选：
                1.获取所有的checkbox
                2.遍历cb，设置每一个cb的状态为选中  checked */       
        //1.在页面加载完后绑定事件
        window.onload = function (){
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function (){
                //全选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为选中 checked
                    cbs[i].checked = true;
                }
            }
            document.getElementById("unSelectAll").onclick = function (){
                //全不选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为未选中 checked
                    cbs[i].checked = false;
                }
            }
            document.getElementById("selectRev").onclick = function (){
                //反选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为相反
                    cbs[i].checked = !cbs[i].checked;
                }
            }
            document.getElementById("firstCb").onclick = function (){
                //第一个cb点击
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 1; i < cbs.length; i++) {
                    //3.设置每一个cb的状态和第一个cb的状态一样
                    cbs[i].checked = this.checked;
                }
            }
            //给所有tr绑定鼠标移到元素之上和移出元素事件
            var trs = document.getElementsByTagName("tr");
            //2.遍历
            for (var i = 0; i < trs.length; i++) {
                //移到元素之上
                trs[i].onmouseover = function (){
                    this.className = "over";
                }
                //移出元素
                trs[i].onmouseout = function (){
                    this.className = "out";
                }
            }
        }
    </script>
	<th><input type="checkbox" name="cb" id="firstCb"></th>
	<td><input type="checkbox" name="cb"></td>
4.表单校验案例：
	<style>
		.error{
            color: red;
        }
        #td_sub{
            padding-left: 150px;
        }
    </style>
	<script>       
        /*分析：
            1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
                如果都为true，则监听器方法返回true
                如果有一个为false，则监听器方法返回false
            2.定义一些方法分别校验各个表单项
            3.给各个表单项绑定onblur事件*/    
        window.onload = function (){
            //1.给表单绑定onsubmit事件
            document.getElementById("form").onsubmit = function (){
                //调用用户名校验方法 checkUsername();
                //调用密码校验方法 checkPassword();
                // return checkUsername() && checkPassword();
                return checkUsername() && checkPassword();
            }
            //给用户名和密码框分别绑定离焦事件
            document.getElementById("username").blur = checkUsername;
            document.getElementById("password").blur = checkPassword;
        }
        //校验用户名
        function checkUsername(){
            //1.获取用户名的值
            var username = document.getElementById("username").value;
            //2.定义正则表达式
            var reg_username = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var flag = reg_username.test(username);
            //4.提示信息
            var s_username = document.getElementById("s_username");
            if(flag){
                //提示绿色对勾
                s_username.innerHTML ="<img width='35px' height='25px' src='img/gou.png'>";
            }else{
                //提示红色用户名有误
                s_username.innerHTML = "用户名格式有误";
            }
            return flag;
        }
        //校验密码
        function checkPassword(){
            //1.获取密码的值
            var password = document.getElementById("password").value;
            //2.定义正则表达式
            var reg_password = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var flag = reg_password.test(password);
            //4.提示信息
            var s_password = document.getElementById("s_password");
            if(flag){
                //提示绿色对勾
                s_password.innerHTML ="<img width='35px' height='25px' src='img/gou.png'>";
            }else{
                //提示红色密码有误
                s_password.innerHTML = "密码格式有误";
            }
            return flag;
        }
    </script>
	<span id="s_username" class="error"></span>