一 事件
1.三要素
(1)、事件源
(2)、事件名称
(3)、处理函数
2.常用事件
(1)、点击事件 onclick
(2)、失焦事件 onBlur
(3)、聚焦事件 onfocus
(4)、改变域对象 onchange
(5)、鼠标悬停事件 onmouserover
(6)、鼠标移开事件 onmouseout
(7)、键盘按下事件 onkeydown
(8)、键盘弹起事件 onkeyup
3.事件处理程序
(1)DOM0 级事件处理程序
不能绑定同一个元素同一个事件多次
function test(){
alert("我又被点了");
}
// 得到按钮对象
var btn = document.getElementById("btn3"); //通过ID获取元素
console.log(btn);
// 给按钮绑定鼠标悬停事件
btn.onmouseover = function() {
alert("我再次被点击了");
}
btn.onmouseover = function() {
alert("我再次被点击了.....");
}
(2)DOM2级事件程序
可以绑定一个元素的内容多次
addEventListener()和 removeEventListener()。所有 DOM 节点都包含这两个方法，并且
他们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布
尔值参数如果是 true，则表示在捕获阶段调用事件处理程序；如果是 false 则表示在冒泡阶段
调用事件处理程序。
// 获取元素
var btn4 = document.getElementById("btn4");
// 绑定事件
btn4.addEventListener("click",function(){
console.log("这是第4个按钮...");
});
btn4.addEventListener("click",function(){
console.log("这是第4个按钮。。。。");
});
btn4.addEventListener("mouseout",function(){
console.log("离开第4个按钮...");
// 移除事件
btn4.removeEventListener("click",tt,true)
});
btn4.addEventListener("click",tt);
function tt() {
console.log("第三次被打印...");
}
二 BOM
1.window对象
(1)系统对话框
浏览器通过（实际是 window 对象的方法）alert()、confirm()、prompt()方法可以调用对话框向用户显示消息。
1）消息框:alert， 常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
2）输入框:prompt，返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。
3）确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
(2)打开窗口
window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口
_self、_parent、_top、_blank
function openPage () {
//window.open();// 打开新的空白页(新开的)
// window.open("http://www.baidu.com");
// window.open("http://www.baidu.com",'_self');
// window.open("index.html");
window.open("01-window对象.html","_self");
}
(3)关闭窗口
window.close()：关闭窗口。
只能关闭被open打开的窗口
2.时间函数
setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以cliearTimeout(id) 来清除指定函数的执行在 times 毫秒后执行 function 指定的方法，执行之前也可以取消
setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
function openBaidu(){
alert("3秒钟跳转到百度...");
setTimeout(function(){
// 打开到百度
window.open("http://www.baidu.com");
},3000);
}
//停止函数
function stopPrint() {
clearTimeout(id);
}
function getDate() {
// 通过id属性获取dom元素对象
var mydate = document.getElementById("mydate");
//console.log(mydate);
// 获取元素的值（非表单元素） innerHTML或innerText
//var value = mydate.innerHTML;
//console.log(value);
// 给元素赋值
//mydate.innerHTML = "你好";
// 得到系统当前时间
var currentDate = new Date();
var localDate = currentDate.toLocaleString();
console.log(localDate);
// 当秒数为0时，字体颜色变红
// 得到时间的秒数
var seconds = currentDate.getSeconds();
console.log(seconds);
if (seconds == 0) {
// 将时间赋值给h2标签
mydate.innerHTML = "当前时间：<span style='color:red'>" + localDate + "</span>";
} else {
// 将时间赋值给h2标签
mydate.innerHTML = "当前时间：" + localDate;
}
}
3.history对象
history 对象的属性：
length，返回浏览器历史列表中的 URL 数量。
history 对象的方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面
4.location对象
location 对象的属性
href：设置或返回完整的 URL
location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。
// 得到当前的url
var url = window.location.href;
console.log(url);
// 跳转到指定页面
//window.location.href = "03-history对象.html";
// window.location.href = "http://www.baidu.com";
function reload1() {
// 刷新页面
//window.location.reload();
// 用指定页面替换当前页面
window.location.replace("http://www.baidu.com");
5.document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通过 window.document 属性对其进行访问。document 对象的 body 属性，提供对<body>元素的直接访问，
cookie 属性，用来设置或返回与当前文档有关的所有 cookie，
write()方法，向文档写 HTML 表达式或 JavaScript 代码。还有其他属性和方法
// 向浏览器窗口写数据
document.write("Hello");
// 设置cookie
document.cookie = "zhangsan-123456";
var cook = document.cookie;
console.log(cook);
// 分隔字符串
var user = cook.split("-");
// 给表单元素赋值 value
document.getElementById("uname").value=user[0];
document.getElementById("upwd").value=user[1];
三 DOM
1.预加载事件
等文档中的元素及资源加载完毕后才执行的事件
(1)、window.οnlοad=function(){
}
(2)、在body标签上写onload事件
html代码从上往下执行，当获取的元素写在dom元素之前时，代码还未走到dom元素，此时无法找到dom对象，会返回null；
2.获取节点
方法 描述
getElementById() 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准
getElementsByTagName() 根据标签名获取 dom 对象数组
getElementsByClassName() 根据样式名获取 dom 对象数组
getElementsByName() 根据 name 属性值获取 dom 对象数组，常用于多选获取值
javascript: void(0); 伪协议，表示a标签不执行href属性的跳转行为，而去执行点击事件
javascript: 函数名(); 不执行跳转，执行函数
<body>
<button id="btn">按钮</button>
<div id="div1">
DOM对象
</div>
<br /><hr />
<p id="p1" class="para">这是一个段落<span>文本</span></p>
<p id="p1" class="para">这又是一个段落</p>
<input type="text" name="txt" class="para" />
<input type="checkbox" name="hobby" value="swimming" checked />游泳
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球
<hr />
<a href="javascript:testById();" >按照 id获取元素</a>
<a href="javascript:void(0);" οnclick="testByName();">按照 name获取元素</a>
<a href="javascript:void(0);" οnclick="testByTagName();">按照标签名获取元素</a>
<a href="javascript:void(0);" οnclick="testByClass();">按照class获取元素</a>
</body>
<script type="text/javascript">
// 按照 id获取元素 只会获取一个dom对象，如果出现多个同名Id，则以第一个id的元素为准
function testById (){
var p1 = document.getElementById("p1");
console.log(p1);
}
// 按照 name获取元素
function testByName() {
var hobbys = document.getElementsByName("hobby");
console.log(hobbys);
}
// 按照标签名获取元素
function testByTagName() {
var inputs = document.getElementsByTagName("input");
console.log(inputs.length);
// 定义变量，接收被选中的复选框的值
var cks = "";
// 获取元素的类型 （input中有text、button、radio、checkbox等）
for (var i = 0; i < inputs.length; i++) {
var ty = inputs[i].type;
console.log(ty);
if (ty == "text") { // 获取文本框
// 给文本赋值
inputs[i].value = "admin";
} else if (ty == "checkbox") { // 获取复选框
//console.log(inputs[i].checked);
// 判断复选框是否被选中
if (inputs[i].checked) {
cks += inputs[i].value + ",";
}
}
}
console.log(cks);
// 截取字符串
cks = cks.substring(0,cks.length -1);
console.log(cks);
}
// 按照class获取元素
function testByClass() {
var cls = document.getElementsByClassName("para");
console.log(cls);
}
</script>
3.创建节点,插入节点
创建节点
方法 描述
createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode() 创建一个文本节点，可以传入文本内容
innerHTML 给元素赋值,也能达到创建节点的效果，直接添加到指定位置了
插入节点
方法 描述
write() 将任意的字符串插入到文档中
document.write() 在加载文档时使用，会和当前文档使用同一个document对象，所以写入的内容会显示在原来的内容之后；
document.write() 在加载文档之后使用（点击按钮触发事件使用），此时document是一个新的对象，会将原来的document对象覆盖，所以原来页面中的内容也会被覆盖。
不要在使用document.write()方法之后去获取元素节点
appendChild() 向元素中添加新的子节点，作为最后一个子节点
insertBefore() 向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点
需要参考父节点
// 得到div元素 （获取容器）
var mydiv = document.getElementById("container");
/**
* 添加 段落
*/
function addPara() {
/* 方式一： */
// 创建p元素
var p = document.createElement("p");
// 创建文本节点
var ptxt = document.createTextNode("哈哈哈哈");
// 将文本节点追加到p元素节点里面的最后
p.appendChild(ptxt);
console.log(p);
// 将p元素节点追击到指定容器中
mydiv.appendChild(p);
/*方式二*/
// 创建p元素
var p2 = document.createElement("p");
// 给p标签赋值
p2.innerHTML = "嘻嘻嘻嘻嘻";
// 将p标签追击到指定容器中 appendChild(节点)
mydiv.appendChild(p2);
/*方式三*/
var p3 = "<p>嘿嘿嘿嘿</p>";
mydiv.innerHTML += p3;
}
4.间接查找节点
方法|属性 描述
children: 获取指定元素的所有子元素(不包含文本节点)
childNodes () 返回元素的一个子节点的数组 （包括文本节点）
firstChild() 返回元素的第一个子节点
lastChild() 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点
// nextSibling 返回元素的下一个兄弟节点
console.log(div1.nextElementSibling); // 下一个元素节点（元素）
console.log(div1.nextSibling); // 下一个节点（包含文本节点）
// previousSibling 返回元素的上一个兄弟节点
console.log(div1.previousElementSibling); // 上一个元素节点（元素）
console.log(div1.previousSibling); // 上一个节点（包含文本节点）
5.替换节点,克隆节点
替换节点
方法|属性 描述
replaceChild(newNode,oldNode) 用新的节点替换旧的节点
oldNode.parentNode.replaceChild(newNode,oldNode)
首先通过旧节点定位到父节点，然后用新的节点替换旧节点
克隆节点
方法|属性 描述
cloneNode() 复制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构
//替换元素
function replaceNode() {
// oldNode.parentNode.replaceChild(newNode,oldNode)
// 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
var cxy = document.getElementById("test");
// 创建新节点
var span = document.createElement("span");
span.innerHTML = "攻城狮";
cxy.parentNode.replaceChild(span,cxy);
}
//克隆节点
function cloneValue() {
// 得到被克隆的对象
var cloneValue = document.getElementById("music");
var newValue = cloneValue.cloneNode(false); // 浅度克隆，只克隆结构
console.log(newValue);
var deepValue = cloneValue.cloneNode(true); // 克隆结构及内容
console.log(deepValue);
// 将克隆好的结果追加到div中
document.getElementById("mydiv").appendChild(deepValue);
}
6.删除节点
方法|属性 描述
removeChild() 从元素中移除子节点
从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
function removeNode() {
// 得到被删除的节点的对象
var del = document.getElementById("test");
// 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
del.parentNode.removeChild(del);
}
四 表单操作
1.获取表单
(1)、document.表单名称
(2)、document.getElementById(表单 id);
(3)、document.forms[表单名称]
(4)、document.forms[索引]; //从 0 开始
// 1、document.表单名称
console.log(document.myform);
// 2、document.getElementById(表单 id);
console.log(document.getElementById("myform"));
// 获取文档做所有的表单集合
console.log(document.forms);
// 3、document.forms[表单名称]
console.log(document.forms["myform2"]);
// 4、document.forms[索引]; //从 0 开始
console.log(document.forms[1]);
2.获取input元素
如 text password hidden textarea 等，前两种常用。
(1)、通过 id 获取：document.getElementById(元素 id);
(2)、通过 form.名称形式获取: myform.元素名称; name 属性值
(3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
(4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
function getTxt() {
// 获取表单对象
var myform = document.myform; // document.表单的name属性值
// 获取表单元素
// 1)、通过 id 获取：document.getElementById(元素 id);
console.log(document.getElementById("uname"));
console.log(document.getElementById("uname").value);
// 2)、通过 form.名称形式获取: myform.元素名称; name 属性值
console.log(myform.upwd);
console.log(myform.upwd.value);
// 3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
console.log(document.getElementsByName("uno")[0]);
console.log(document.getElementsByName("uno")[0].value);
// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
console.log(document.getElementsByTagName("textarea")[0]);
console.log(document.getElementsByTagName("textarea")[0].value);
}
3.获取单选按钮
前提：将一组单选按钮设置相同的 name 属性值
(1)获取单选按钮组：
document.getElementsByName("name 属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性
若属性值为 true 表示被选中，否则未被选中
选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定： 没有 checked 属性 或 checked=’false’
// 获取一组单选按钮
var radios = document.getElementsByName("sex");
// 遍历数组，得到选中项的值
for (var i = 0; i < radios.length; i++) {
// 判断是否被选中
if (radios[i].checked) {
console.log("选中的值是：" + radios[i].value);
} else {
console.log("未选中的值是：" + radios[i].value);
}
}
4.获取多选按钮
前提：将一组多选按钮设置相同的 name 属性值
(1)获取多选按钮组：
document.getElementsByName("name 属性值");
(2)遍历每个多选按钮，并查看多选按钮元素的 checked 属性
若属性值为 true 表示被选中，否则未被选中
选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定： 没有 checked 属性 或 checked=’false’
// 获取一组多选按钮
var checkboxs = document.getElementsByName("hobby");
var cks = "";
// 遍历数组，得到选中项的值
for (var i = 0; i < checkboxs.length; i++) {
// 判断是否被选中
if (checkboxs[i].checked) {
console.log("选中的值是：" + checkboxs[i].value);
cks += checkboxs[i].value+ ",";
} else {
console.log("未选中的值是：" + checkboxs[i].value);
}
}
// 截取字符串
cks = cks.substring(0,cks.length - 1);
console.log("选中的值为：" + cks);
5.获取下拉框
（1）获取 select 对象：
var ufrom = document.getElementById("ufrom");
（2）获取选中项的索引：
var idx=ufrom.selectedIndex ;
（3）获取选中项 options 的 value 属性值：
var val = ufrom.options[idx].value;
注意：当通过 options 获取选中项的 value 属性值时，
若没有 value 属性，则取 option 标签的内容
若存在 value 属性，则取 value 属性的值
（4）获取选中项 options 的 text：
var txt = ufrom.options[idx].text;
选中状态设定：selected='selected'、selected=true、selected
未选中状态设定：不设 selected 属性
// （1）获取 select 对象
var sel = document.getElementById("ufrom");
// （2）获取选中项的索引
var selectIndex = sel.selectedIndex;
console.log("当前选中项的索引：" + selectIndex);
// （3）获取选中项 options 的 value 属性值
var value1 = sel.value;
var value2 = sel.options[selectIndex].value;
console.log("当前选中项的值：" + value1 + "," + value2);
// （4）获取选中项 options 的 text
var text1 = sel.options[selectIndex].innerHTML;
var text2 = sel.options[selectIndex].text;
console.log("当前选中项的文本：" + text1 + "," + text2);
6.提交表单
注：提交表单时，表单元素必须设置name属性值
提交类型：
get请求
参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，不会自动刷新缓存；每次访问时优先获取缓存中的数据，所以请求速度快。
post请求 （需要服务器的支持）
参数不会跟在地址栏后面显示，请求参数长度不限（其实是有长度限制，与服务器相关），相对而言安全，会自动刷新缓存；请求速度相对而言慢。
通常做查询操作，使用GET请求；增删改使用POST请求。
提交表单
（1）使用普通 button 按钮+onclick 事件+事件中编写代码:
获取表单.submit();
（2）使用 submit 按钮 + οnclick="return 函数()" +函数编写代码:
最后必须返回：return true|false;
（3）使用 submit 按钮/图片提交按钮 + 表单 οnsubmit="return 函数();" +函数编写代码:
最后必须返回：return true|false;
/*提交方式一：submit按钮 + onclick事件*/
// 给submit按钮绑定点击事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
//如果return true，则提交表单；return false不提交；若直接return也会提交表单
function checkForm1() {
//return true; // 提交表单
return false; // 不提交表单
//return; // 无效，不会阻止表单提交
}
/*提交方式二：submit按钮 + onsubmit事件*/
// 给表单对象绑定onsubmit事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
//如果return true，则提交表单；return false不提交；若直接return也会提交表单
function checkForm2() {
return true; // 提交表单
//return false; // 不提交表单
//return; // 无效，不会阻止表单提交
}
/*提交方式三：button按钮+点击事件*/
// 给button按钮绑定点击事件，调用时需要使用"函数名()"，如果满足要求则手动提交表单，否则return
function checkForm3() {
var uname = document.getElementsByName("uname1")[0].value;
if ( uname == null || uname.trim() == "") {
console.log("用户名不能为空！");
document.getElementById("msg").innerHTML = "用户名不能为空！";
return;
}
// 手动提交表单
document.forms[2].submit();
}
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
