2022.11.3

Day37：

load加载事件：

当页面加载完毕后执行的事件

onload：当页面或图像加载完后立即触发

onblur：元素失去焦点

onfocus：元素获得焦点

onclick：鼠标点击某个对象

onchange：用户改变域的内容

onmouseover：鼠标移动到某个元素上

onmouseout：鼠标从某个元素上离开

onkeyup：某个键盘的键被松开

onkeydown：某个键盘的键被按下

事件流：接收事件的顺序

事件流的顺序：事件冒泡和事件捕获

事件冒泡（从小到大）事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）

事件捕获（从大到小）事件开始时由document对象接受，然后逐级向下传播到具体的节点

响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头

addEventListener() 和 removeEventListener()

有三个参数：

参数1：事件名

参数2：处理事件的函数

参数3：事件冒泡（false）或捕获（true）

可以为同一个元素的同一个事件设定多个事件程序

document.getElementById("id属性值"); 通过id属性值获取元素对象

onload：当页面或图像加载完后立即触发

onblur：元素失去焦点

onfocus：元素获得焦点

onclick：鼠标点击某个对象

onchange：用户改变域的内容

onmouseover：鼠标移动到某个元素上

onmouseout：鼠标从某个元素上离开

onkeyup：某个键盘的键被松开

onkeydown：某个键盘的键被按下

alert， 常用。

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

prompt，返回提示框中的值。

prompt() 方法用于显示可提示用户进行输入的对话框。

参数（可选）：

第一个参数：要在对话框中显示的纯文本。

第二个参数：默认的输入文本。

// 2）输入框:prompt，返回提示框中的值 function testPrompt(){ var uname = window.prompt("请输入用户名：",""); console.log(uname); }

confirm，返回 true/false.

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

// 3）确认框:confirm，返回 true/false. function testConfirm() { var flag = confirm("您确认要删除该记录吗？"); if (flag) { alert("删除成功！"); } else { alert("没事别瞎点..."); } }

window.open()方法

既可以导航到一个特定的URL也可以用来打开一个新的窗口

document.getElementById("btn1").onclick = function(){ // 打开空白窗口 // window.open(); // 打开指定页面 // window.open("01-系统对话框.html"); // 打开百度 // window.open("http://www.baidu.com"); // 指定方式打开页面 // window.open("http://www.baidu.com","_self"); // 打开页面 window.open("03-关闭窗口.html"); }

关闭窗口window.close()：关闭窗口。

在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识

也可以通过返回的标识cliearTimeout(id)： 来清除指定函数的执行。

var id = setTimeout(function,times);

参数1：执行的函数

参数2：时间，单位毫秒

setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束

该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

var id = setInteval(function,times);

参数1：执行的函数

参数2：时间，单位毫秒

/* setTimeout(function(){ console.log("3秒钟后执行的程序..."); },3000); */

// 3秒钟后跳转到百度 function toBaidu(){ setTimeout(test,3000); } function test(){ // 打开百度 window.open("http://www.baidu.com"); }

console.log(new Date().toLocaleTimeString());

var id; function init() {

var time = new Date().toLocaleTimeString();

// 将时间赋值给h2标签 document.getElementById("time").innerHTML = time;

// 每一秒钟调用一下 id = setTimeout(init,1000); }

function stop(){ clearTimeout(id); }

// 定时执行 function hello() { setInterval(function(){ console.log("你好..."); },1000); }

length，返回浏览器历史列表中的 URL 数量。

back()：

加载 history 列表中的前一个 URL。

forward()：

加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。

go(number|URL):

URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面

href：设置或返回完整的 URL

reload()：重新加载当前文档。

replace()：用新的文档替换当前文档。(不能后退)

文档节点 文档本身整个文档 document

元素节点 所有的HTML元素 、、

属性节点 HTML元素内的属性 id、href、name、class

文本节点 元素内的文本 hello

注释节点 HTML中的注释

操作 dom 必须等节点初始化完毕后，才能执行。

处理方式两种:

（1）把 script 调用标签移到html末尾即可；

（2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

getElementById() 根据id获取dom对象，如果id重复，那么以第一个为准

getElementsByTagName() 根据标签名获取dom对象数组

getElementsByClassName() 根据样式名获取dom对象数组

getElementsByName() 根据name属性值获取dom对象数组，常用于多选获取值

说明：href="javascript:void(0)"：伪协议，表示不执行跳转，而执行指定的点击事件。

createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象

createTextNode() 创建一个文本节点，可以传入文本内容

innerHTML 也能达到创建节点的效果，直接添加到指定位置了

write() 将任意的字符串插入到文档中

appendChild() 向元素中添加新的子节点，作为最后一个子节点

insertBefore() 向指定的已有的节点之前插入新的节点

newItem：要插入的节点

exsitingItem：参考节点 需要参考父节点

// write() 将任意的字符串插入到文档中 document.write("你好"); document.write("Hello");

// insertBefore() 向指定的已有的节点之前插入新的节点 var li = document.createElement("li"); var txt = document.createTextNode("粉色"); li.appendChild(txt); document.getElementById("red").parentElement.insertBefore(li,document.getElementById("red"))

childNodes 返回元素的一个子节点的数组

children 返回元素的所有的子元素数组

firstChild 返回元素的第一个子节点

firstElementChild

lastChild 返回元素的最后一个子节点

lastElementChild

nextSibling 返回元素的下一个兄弟节点

nextElementSibling

previousSibling 返回元素的上一个兄弟节点

previousElementSibling

parentNode 返回元素的父节点

parentElement

removeChild()从元素中移除子节点

function delNode() { // 得到被删除的对象 var span = document.getElementById("programmer"); // 得到被删除的对象的父元素 var parent = span.parentElement; // 删除元素 parent.removeChild(span); }

1、document.表单名称

2、document.getElementById(表单 id);

3、document.forms[表单名称]

4、document.forms[索引]; //从 0 开始

// 1、document.表单名称 var form1 = document.form1; console.log(form1); // 2、document.getElementById(表单 id); var form2 = document.getElementById("form2"); console.log(form2);

// 得到当前文档中的表单集合 var forms = document.forms; console.log(forms);

// 3、document.forms[表单名称] var form3 = forms['form1']; console.log(form3);

// 4、document.forms[索引]; //从 0 开始 var form4 = forms[0]; console.log(form4);

function getTxt(){ // 1)、通过 id 获取：document.getElementById(元素 id); var uname = document.getElementById("uname").value; console.log(uname); // 2)、通过 form.名称形式获取: myform.元素名称; name属性值 var myform = document.getElementById("myform"); var upwd = myform.upwd.value; console.log(upwd);

// 3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始 var uno = document.getElementsByName("uno")[0].value; console.log(uno);

// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始 var intro = document.getElementsByTagName("textarea")[0].value; console.log(intro);

}

1.获取单选按钮组

document.getElementsByName("name属性值");

2.遍历每个单选按钮，并查看单选按钮元素的checked属性

选中状态： checked='checked' checked cheked=true

未选中状态： 未设置checked属性或checked=false

function getRadio(){ // (1)获取单选按钮组 var radios = document.getElementsByName("rad"); // (2)遍历每个单选按钮，并查看单选按钮元素的checked属性 for (var i = 0; i < radios.length; i++) { console.log(radios[i].checked); if (radios[i].checked) { // 获取值 console.log(radios[i].value); } }

}

1.获取多选按钮组

document.getElementsByName("name属性值");

2.遍历每个多选按钮，并查看多选按钮元素的checked属性

选中状态： checked='checked' checked cheked=true

未选中状态： 未设置checked属性或checked=false

function getCheckbox(){ // (1)获取多选按钮组 var checkboxs = document.getElementsByName("hobby"); var str = ''; // (2)遍历每个多选按钮，并查看多选按钮元素的checked属性 for(var i = 0; i < checkboxs.length; i++){ // 如果被选中，则获取对应的值 if (checkboxs[i].checked) { str += checkboxs[i].value + ","; } } // 通过截取，去除最后一个多余的问号 str = str.substring(0,str.length-1); console.log(str); }

选中状态设定：selected='selected'、selected=true、selected

未选中状态设定：不设selected属性

（1）使用普通button按钮+onclick事件+事件中编写代码:

获取表单.submit();

（2）使用submit按钮 + onclick="return 函数()" +函数编写代码:

最后必须返回：return true|false;

（3）使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码:

最后必须返回：return true|false;

trim()

去除字符串前后空格（不去除字符串中间的空格）

表单校验 姓名: 密码: 年龄:小屁孩 你懂得 爱好:篮球 爬床 代码 来自: 请选择 北京 上海 提交 重置

/** * 通过 id通过id参数，返回dom对象 * @param {Object} */ function $(id) { return document.getElementById(id); }

/** * 重置表单 */ function resetForm() { $("myform").reset(); }

/** 要求： 1、验证用户名 1)不能为空 2)长度为 6-12 位 2、验证密码 1)不能为空 * 2)长度为 6-12 位 3)不能包含用户名 3、年龄: 必须选择 你懂得 4、爱好: 必须选择一项 5、来自: 必须选择一项 满足以上条件 1、弹出所有的内容 2、提交表单 否则 1、说明错误原因 2、不能提交表单 */ function checkForm() { // 获取用户名 var uname = $("uname").value; if (isEmpty(uname)) { // 通过innerHTML赋值 $("validate").innerHTML = '用户名不能为空！'; return; } if (uname.length < 6 || uname.length > 12) { $("validate").innerHTML = '用户名长度在6-12位之间！'; return; }

// 获取密码 var upwd = $("upwd").value; if (isEmpty(upwd)) { // 通过innerHTML赋值 $("validate").innerHTML = '密码不能为空！'; return; } if (upwd.length < 6 || upwd.length > 12) { $("validate").innerHTML = '密码长度在6-12位之间！'; return; } if (upwd.indexOf(uname) > 0) { $("validate").innerHTML = '密码不能包含用户名！'; return; }

// 获取年龄 var ages = document.getElementsByName("uage"); // 获取第二个单选框是否被选中 var cked = ages[1].checked; if (!cked) { $("validate").innerHTML = '年龄必须选择你懂得！'; return; }

// 获取爱好 var ufavs = document.getElementsByName("ufav"); var favs = ''; // 遍历 for (var i = 0; i < ufavs.length; i++) { if (ufavs[i].checked){ favs += ufavs[i].value + ","; } } // 判断是否选中 if (isEmpty(favs)) { $("validate").innerHTML = '必须选择一项爱好！'; return; } favs = favs.substring(0,favs.length);

// 获取下拉框 var city = $("ufrom").value; if (city == -1){ $("validate").innerHTML = '请选择你的城市！'; return; }

$("validate").innerHTML = '';

// 设置表单提交的地址 $("myform").action = "http://www.baidu.com"; // 提交表单 $("myform").submit(); }

/** * 判断字符串是否为空 * 如果为空，返回true * 如果不为空，返回false * @param {Object} */ function isEmpty(str) { if (str == null || str.trim() == "") { return true; } return false; }