和Javascript有关的BOM与DOM及事件监听。
以下是今天的内容
点击查看代码
-- BOM
-- Browser Object Model 浏览器对象模型
-- JavaScript 将浏览器的各个组成部分封装为对象
-- 组成:
-- Window:浏览器窗口对象
-- Navigator:浏览器对象
-- Screen:屏幕对象
-- History:历史记录对象
-- Location:地址栏对象
--
-- Window:浏览器窗口对象
-- ·获取:直接使用 window，其中window.可以省略
-- window.alert("abc");
-- ·属性:获取其他 BOM对象
-- history 对 History 对象的只读引用。请参数 History 对象
-- Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象
-- Screen 对 Screen 对象的只读引用。请参数 Screen 对象
-- location 用于窗口或框架的 Location 对象。请参阅 Location 对象
-- ·方法
-- alert() 显示带有一段消息和一个确认按钮的警告框
-- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
-- setInterval() 按照指定的周期(以亳秒计)来调用函数或计算表达式
-- setTimeout() 在指定的毫秒数后调用函数或计算表达式
--
-- -- 例：
-- // alert
--
-- // window.alert("abc");
-- // alert("bbb");
--
-- // confirm，点击确定按钮，返回true，点击取消按钮，返回false
--
-- /*var flag = confirm("确认删除？");
--
-- //alert(flag);
--
-- if(flag){
-- //删除逻辑
-- }*/
--
--
-- // 定时器
--
-- /*
-- setTimeout(function,毫秒值): 在一定的时间间隔后执行一个function，只执行一次
--
-- setInterval(function,毫秒值):在一定的时间间隔后执行一个function，循环执行
-- */
--
-- /*setTimeout(function (){
-- alert("hehe");
-- },3000);*/
--
-- setInterval(function (){
-- alert("hehe");
-- },2000);
--
-- History
-- History:历史记录
-- 获取:使用 window.history获取，其中window.可以省略
-- window.history.方法();history.方法();
-- 方法
-- back()
-- forward()
-- 加载 history 列表中的前一个 URL.
-- 加载 history 列表中的下一个 URL。
--
-- Location.
-- Location:地址栏对象
-- 获取:使用 window.location获取，其中window.可以省略
-- window.location.方法();
-- location.方法();
-- 属性
-- href 设置或返回完整的 URL
--
-- DOM
--
-- Document Object Model 文档对象模型
-- · 将标记语言的各个组成部分封装为对象
-- ·Document:整个文档对象
-- ·Element:元素对象
-- ·Attribute:属性对象
-- ·Text:文本对象
-- ·Comment:注释对象
--
-- JavaScript 通过 DOM，就能够对 HTML进行操作了
-- 改变 HTML 元素的内容
-- 改变 HTML元素的样式(CSS)
-- 对 HTML DOM 事件作出反应添加和删除 HTML元素
-- · DOM 是W3C(万维网联盟)的标准
-- · DOM 定义了访问 HTML和 XML 文档的标准
-- · W3C DOM 标准被分为3个不同的部分
-- 1.核心 DOM:针对任何结构化文档的标准模型
-- · Document:整个文档对象
-- · Element:元素对象
-- · Attribute:属性对象
-- · Text:文本对象
-- · Comment:注释对象
-- 2.XMLDOM:针对XML文档的标准模型
-- 3.HTMLDOM:针对 HTML文档的标准模型
-- ·lmage:<img>
-- ·Button :<input type='button'>
--
-- 获取Element对象
-- 获取:使用Document对象的方法来获取
-- 1.getElementByld:根据id属性值获取，返回一个lement对象
-- 2.getElementsByTagName:根据标签名称获取，返回Element对象数组
-- 3.getElementsByName:根据name属性值获取，返回Element对象数组
-- 4.getElementsByClassName:根据class属性值获取，返回Element对象数组
--
-- -- 例：
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
-- <meta charset="UTF-8">
-- <title>DOM</title>
-- </head>
-- <body>
-- <img id="light" src="../imgs/off.gif"> <br>
--
-- <div class="cls">传智教育</div> <br>
-- <div class="cls">黑马程序员</div> <br>
--
-- <input type="checkbox" name="hobby"> 电影
-- <input type="checkbox" name="hobby"> 旅游
-- <input type="checkbox" name="hobby"> 游戏
-- <br>
--
-- <script>
-- /*
-- 获取：使用Document对象的方法来获取
-- * getElementById：根据id属性值获取，返回一个Element对象
-- * getElementsByTagName：根据标签名称获取，返回Element对象数组
-- * getElementsByName：根据name属性值获取，返回Element对象数组
-- * getElementsByClassName：根据class属性值获取，返回Element对象数组
--
-- */
-- //1. getElementById：根据id属性值获取，返回一个Element对象
-- var img = document.getElementById("light");
-- // alert(img);
--
-- //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
--
-- var divs = document.getElementsByTagName("div");
-- // alert(divs.length);
-- /* for (let i = 0; i < divs.length; i++) {
-- alert(divs[i]);
-- }*/
--
-- //3. getElementsByName：根据name属性值获取，返回Element对象数组
-- var hobbys = document.getElementsByName("hobby");
-- /* for (let i = 0; i < hobbys.length; i++) {
-- alert(hobbys[i]);
--
-- }*/
--
-- //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
--
-- var clss = document.getElementsByClassName("cls");
-- for (let i = 0; i < clss.length; i++) {
-- alert(clss[i]);
--
-- }
--
--
--
-- </script>
-- </body>
-- </html>
--
-- 常见HTML Element对象的使用
--
-- 例:
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
-- <meta charset="UTF-8">
-- <title>Title</title>
-- </head>
-- <body>
-- <img id="light" src="../imgs/off.gif"> <br>
--
-- <div class="cls">传智教育</div> <br>
-- <div class="cls">黑马程序员</div> <br>
--
-- <input type="checkbox" name="hobby"> 电影
-- <input type="checkbox" name="hobby"> 旅游
-- <input type="checkbox" name="hobby"> 游戏
-- <br>
--
-- <script>
-- //1. getElementById：根据id属性值获取，返回一个Element对象
-- var img = document.getElementById("light");
-- // alert(img);
-- img.src = "../imgs/on.gif";
--
-- //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
-- var divs = document.getElementsByTagName("div");
-- /*
-- style:设置元素css样式
-- innerHTML：设置元素内容
-- */
--
-- for (let i = 0; i < divs.length; i++) {
-- //divs[i].style.color = 'red';
-- divs[i].innerHTML = "呵呵";
-- }
--
-- //3. getElementsByName：根据name属性值获取，返回Element对象数组
-- var hobbys = document.getElementsByName("hobby");
-- for (let i = 0; i < hobbys.length; i++) {
-- //alert(hobbys[i]);
-- hobbys[i].checked = true;
-- }
--
-- //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
--
-- var clss = document.getElementsByClassName("cls");
-- /*for (let i = 0; i < clss.length; i++) {
-- alert(clss[i]);
--
-- }*/
--
--
--
-- </script>
-- </body>
-- </html>
--
-- 查阅文档使用
--
--
-- 事件监听
--
-- ·事件:HTML事件是发生在 HTML元素上的“事情”。比如:
-- ·按钮被点击
-- ·鼠标移动到元素之上
-- ·按下键盘按键
-- ·事件监听:JavaScript 可以在事件被侦测到时执行代码
-- ·事件绑定有两种方式
-- · 方式一:通过 HTML标签中的事件属性进行绑定
-- <input type="button" onclick='on()'>
-- function on(){alert("我被点了");}
-- 方式二:通过 DOM 元素属性绑定
-- <input type="button" id="btn">
-- document.getElementByld("btn").onclick = function (){alert("我被点了")};
--
-- 常见事件
-- 事件名 说明
-- onclick 鼠标单击事件
-- onblur 元素失去焦点
-- onfocus 元素获得焦点
-- onl oad 某个页面或图像被完成加载
-- onsubmit 当表单提交时触发该事件
-- onkeydown 某个键盘的键被按下
-- onm ouseover 鼠标被移到某元素之上
-- onm ouseout 鼠标从某元素移开
-- ·Event代表事件对象
-- 案例：表单验证
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
-- <meta charset="UTF-8">
-- <title>欢迎注册</title>
-- <link href="../css/register.css" rel="stylesheet">
-- </head>
-- <body>
--
-- <div class="form-div">
-- <div class="reg-content">
-- <h1>欢迎注册</h1>
-- <span>已有帐号？</span> <a href="#">登录</a>
-- </div>
-- <form id="reg-form" action="#" method="get">
--
-- <table>
--
-- <tr>
-- <td>用户名</td>
-- <td class="inputs">
-- <input name="username" type="text" id="username">
-- <br>
-- <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
-- </td>
--
-- </tr>
--
-- <tr>
-- <td>密码</td>
-- <td class="inputs">
-- <input name="password" type="password" id="password">
-- <br>
-- <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
-- </td>
-- </tr>
--
--
-- <tr>
-- <td>手机号</td>
-- <td class="inputs"><input name="tel" type="text" id="tel">
-- <br>
-- <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
-- </td>
-- </tr>
--
-- </table>
--
-- <div class="buttons">
-- <input value="注 册" type="submit" id="reg_btn">
-- </div>
-- <br class="clear">
-- </form>
--
-- </div>
--
--
-- <script>
--
-- //1. 验证用户名是否符合规则
-- //1.1 获取用户名的输入框
-- var usernameInput = document.getElementById("username");
--
-- //1.2 绑定onblur事件 失去焦点
-- usernameInput.onblur = checkUsername;
--
-- function checkUsername() {
-- //1.3 获取用户输入的用户名
-- var username = usernameInput.value.trim();
--
-- //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
-- var reg = /^\w{6,12}$/;
-- var flag = reg.test(username);
--
-- //var flag = username.length >= 6 && username.length <= 12;
-- if (flag) {
-- //符合规则
-- document.getElementById("username_err").style.display = 'none';
-- } else {
-- //不合符规则
-- document.getElementById("username_err").style.display = '';
-- }
--
-- return flag;
-- }
--
--
-- //1. 验证密码是否符合规则
-- //1.1 获取密码的输入框
-- var passwordInput = document.getElementById("password");
--
-- //1.2 绑定onblur事件 失去焦点
-- passwordInput.onblur = checkPassword;
--
-- function checkPassword() {
-- //1.3 获取用户输入的密码
-- var password = passwordInput.value.trim();
--
-- //1.4 判断密码是否符合规则：长度 6~12
-- var reg = /^\w{6,12}$/;
-- var flag = reg.test(password);
--
-- //var flag = password.length >= 6 && password.length <= 12;
-- if (flag) {
-- //符合规则
-- document.getElementById("password_err").style.display = 'none';
-- } else {
-- //不合符规则
-- document.getElementById("password_err").style.display = '';
-- }
--
-- return flag;
-- }
--
--
-- //1. 验证手机号是否符合规则
-- //1.1 获取手机号的输入框
-- var telInput = document.getElementById("tel");
--
-- //1.2 绑定onblur事件 失去焦点
-- telInput.onblur = checkTel;
--
-- function checkTel() {
-- //1.3 获取用户输入的手机号
-- var tel = telInput.value.trim();
--
-- //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
--
-- //var flag = tel.length == 11;
-- var reg = /^[1]\d{10}$/;
-- var flag = reg.test(tel);
-- if (flag) {
-- //符合规则
-- document.getElementById("tel_err").style.display = 'none';
-- } else {
-- //不合符规则
-- document.getElementById("tel_err").style.display = '';
-- }
--
-- return flag;
-- }
--
--
-- //1. 获取表单对象
-- var regForm = document.getElementById("reg-form");
--
-- //2. 绑定onsubmit 事件
-- regForm.onsubmit = function () {
-- //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
--
-- var flag = checkUsername() && checkPassword() && checkTel();
--
-- return flag;
-- }
--
-- </script>
-- </body>
-- </html>
--