02-BOM-01-window的对话框
<!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>
<button onclick="testAlert()">测试alert框:多用于警告</button>
<button onclick="testConfirm()">测试确认框：确认</button>
<button onclick="testPrompt()">测试输入框:</button>
</body>
<script>
function testAlert() {
window.alert("hello world"); //会阻塞后续的代码执行
alert("hello js");
var name = "惢";
alert(name);
console.log("我被阻塞了"); //将内容打印到调试界面的控制台上
}
function testConfirm() {
var f = window.confirm("你确定要提交吗？");
if (f) {
console.log("正在提交");
} else {
console.log("取消提交");
}
}
function testPrompt() {
//输入框：第一个参数是提示文字，第二个参数是默认值
var username = prompt("请输入你的名字","zhangsan");
//输入框有确认和取消按钮，确认表示提交输入框里的信息并返回，
//可能是具体值也可能是空字符串，取消按钮提交的是null
console.log(username);
}
</script>
</html>02-BOM-02-window的history和location
<!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>
<button onclick="f1()">history</button>
<button onclick="f2()">location</button>
</body>
<script>
// location是window的一个属性对象，用来表示当前页面的URL地址
function f2() {
console.log(window.location);
// 获取当前页面的URL地址
console.log(location.href);
console.log(location.hostname);
console.log(location.pathname);
console.log(location.protocol);
//修改href的值，跳转对应的网页地址
location.href = "https://www.baidu.com";
}
/*
history是window的一个属性对象，用来表示浏览器访问的历史记录
*/
function f1() {
var his = window.history;
console.log(his);
//向前
// his.forward(); //相当于浏览器的向右箭头
//向后
// his.back(); //相当于浏览器的向左箭头
his.go(-1); //-1表示后退一步 1表前进一步 0 表示刷新
}
</script>
</html>02-BOM-03-window的screen和navigator
<!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>
</body>
<script>
// 从window对象中获取screen的屏幕对象
console.log(window.screen.availHeight);
console.log(window.screen.availWidth);
console.log(window.screen.height);
console.log(window.screen.width);
console.log(window.screen.colorDepth); //色彩深度
console.log(window.screen.pixelDepth); //色彩分辨率
// 从navigator对象中获取ua信息
console.log(navigator.userAgent);
</script>
</html>02-BOM-04-window的计时时间方法
<!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>
<button onclick="testSetTimeOut()">一次性时钟，让代码延迟指定的毫秒数再执行</button>
<button onclick="testClearTimeOut()">在执行前取消一次性时钟</button>
<button onclick="testSetInterval()">周期性时钟，指定间隔的毫秒数，重复执行代码</button>
<button onclick="testClearInterval()">在执行前取消周期性时钟</button>
<p id="p1"></p>
</body>
<script>
var l;
function testSetTimeOut() {
/*
setTimeOut(timeHandler,delay)
第一个参数：timeHandler， 执行的代码逻辑，可以是一个函数
第二个参数：delay，延迟的毫秒数
*/
l = window.setTimeout(function () {
console.log("hello, world")
}, 3000)
}
function testClearTimeOut() {
//一次性时钟是可以再执行前进行取消操作的
window.clearTimeout(l);
}
var p = document.getElementById("p1");
var i;
function testSetInterval() {
/*
setInterval(timeHandler,period)
第一个参数：timeHandler， 执行的代码逻辑，可以是一个函数
第二个参数：delay，间隔的毫秒数
*/
i = setInterval(function () {
var d = new Date();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var time = hour + ":" + minute + ":" + second;
p.innerText = time;
}, 1000)
}
function testClearInterval() {
//周期性时钟不可以再执行前进行取消操作的
window.clearInterval(i);
}
</script>
</html>03-DOM-01-DOM-查找节点
<!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>
<div id="d1">
<div id="d2">
<p class="c1">段落</p>
</div>
<div id="d3">
<input id="in1" class="c1" type="text" value="我是输入框">
<p> 前有段落</p>
</div>
<div id="d4">
</div>
</div>
</body>
<script>
/*
document的简介
1. js将整个HTML文档封装到了一个window的属性document里面。在document里面维护了一个
树形的层次结构。在这个结构里面，保存了HTML的所有元素几期元素的属性和文本。
2. 可以使用document来查找想要的节点
- 通过id: geiElementById(id值)
- 通过标签名: getElenmentsByTagName("标签名")
- 通过class名: getElementsByClassName("class名")
- 通过层次结构:
--parentNode: 返回的是当前节点的父节点
--childNodes: 获取的子节点个数与换行有关系
--children: 获取子节点，但是不包含换行符
--firstChild: 获取第一个子节点
--lastChild: 获取最后一个子节点
--previousSibling: 获取上一个兄弟节点
--nextSibling: 获取下一个兄弟节点
*/
//注意： js里返回的都是对象
var input = document.getElementById("in1");
console.log(input); //整个元素信息，包括属性，文本，子元素
console.log(input.value);
input.value = "list";
// 通过标签名查找
var ps = document.getElementsByTagName("p");
console.log("长度：" + ps.length);
console.log(ps[0].innerText);
console.log(ps[1].innerText);
ps[0].innerText = "后的段落";
console.log(ps[0].nodeName);
console.log(ps[0].nodeType);
console.log(ps[0].nodeValue);
console.log(ps[0].innerHTML);
var d3 = document.getElementById("d3");
console.log(d3.innerText);
console.log(d3.innerHTML);
// 通过类名查找
var cs = document.getElementsByClassName("c1");
console.log("类名的长度：" + cs.length);
console.log(cs[0].nodeName);
console.log(cs[1].nodeName);
// 通过层次关系查找元素
var input1 = document.getElementById("in1");
var parent = input1.parentNode;
console.log(parent.nodeName);
// parent.innerHTML = "<button>按钮</button>"
//获取parent这个节点对象的所有孩子
var cs = parent.childNodes;
console.log(cs.length);
console.log(cs);
var cs2 = parent.children;
console.log(cs2.length);
console.log(cs2);
// var c3 = parent.firstChild;
var c3 = parent.firstElementChild;
console.log(c3.nodeName);
console.log(c3);
// var c4 = parent.lastChild;
var c4 = parent.lastElementChild;
console.log(c4.nodeName);
console.log(c4);
console.log("----------------------------------");
//查找兄弟
var d3 = document.getElementById("d3");
// var brother1 = div3.previousSibing;
var brother1 = d3.previousElementSibling;
console.log(brother1);
console.log(brother1.nodeName);
// var brother2 = d3.nextSibling;
var brother2 = d3.nextElementSibling;
console.log(brother2);
console.log(brother2.nodeName);
</script>
</html>03-DOM-02-DOM-创建节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1 {
border: 1px solid red;
width: 500px;
height: 500px;
}
#d2 {
width: 200px;
height: 200px;
background-color: aqua;
}
#d3 {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
//window的onload事件，可以绑定一个匿名函数。在函数里面写代码逻辑。
//执行时机：当整个HTML被浏览器加载完毕后，才会执行该onload事件
window.onload = function () {
var p = document.createElement("p");
p.setAttribute("id", "p1");
p.setAttribute("class", "c1");
var text = document.createTextNode("是段落，悲伤");
p.appendChild(text);
console.log(p);
//定位d2元素
var d2 = document.getElementById("d2");
d2.appendChild(p);
var p1 = document.createElement("p");
p1.setAttribute("name", "myP");
var txt = document.createTextNode("敬请期待");
p1.appendChild(txt);
//将p1插入到d3前面 //insertBefore(newNode, referenceNode)：
var d1 = document.getElementById("d1");
var d3 = document.getElementById("d3");
d1.insertBefore(p1, d3);
}
</script>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>03-DOM-03-DOM-替换和移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
//创建一个新的span节点
var span = document.createElement("span");
var txt = document.createTextNode("用户名已被占用");
span.appendChild(txt);
//获取父节点
var d2 = document.getElementById("d2");
var p1 = document.getElementById("p1");
//进行替换操作
d2.replaceChild(span, p1);
//移除d2这个节点
var d1 = document.getElementById("d1");
d1.removeChild(d2);
//获取d1里的属性值
var name = d1.getAttribute("name");
console.log(name);
//移除d1里的class属性
d1.removeAttribute("class");
}
</script>
</head>
<body>
<div id="d1" class="c1" name="n1">
<div id="d2">
<p id="p1">是段落，悲伤</p>
</div>
</div>
<form action=""></form>
</form>
<form action=""></form>
</body>
</html>04-Event-01-事件模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var bn2 = document.getElementById("bn2");
//使用DOM0级方式绑定事件
bn2.onclick = function () {
alert(Math.pow(2, 3));
}
//如果DMO0事件，连续绑定相同的事件，会进行覆盖
bn2.onclick = function () {
alert(Math.pow(3, 3));
}
//使用DOM2级方式绑定事件
var bn3 = document.getElementById("bn3");
bn3.addEventListener('click', function () {
alert("DOM2级绑定事件使用addEventListener方法")
})
//如果DOM2事件，连续绑定相同的事件，不会覆盖
function f2() {
alert("DOM2级绑定事件使用addEventListener方法，again")
}
//绑定事件时，如果设置的是有名字的函数，不要带括号
bn3.addEventListener('click', f2)
//取消DOM2级事件 当初绑定的事件处理函数，必须有名字，才能取消
bn3.removeEventListener("click", f2)
}
</script>
</head>
<body>
<button onclick="javascript:alert('我是按钮')">DOM0级：HTML里添加事件</button>
<button id="bn2">DOM0级：在script里添加事件</button>
<button id="bn3">DOM2级：在script里添加事件</button>
</body>
</html>04-Event-02-常用事件
<!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>
<div ondblclick="f1()">鼠标双击</div>
<div onm ouseenter="f2()">鼠标进入</div>
<div onm ouseover="f3()">鼠标在元素上</div>
<div onm ouseleave="f4()">鼠标移出</div>
<div onm ouseout="f5()">鼠标离开</div>
<div onm ousemove="f6()">鼠标被移动</div>
<div onm ouseup="f7()">鼠标按键被松开</div>
<div oncontextmenu="f8()">右键点击弹出菜单时触发</div>
<input type="text" name="" id="" onkeydown="f9()" value="键盘按键被按下">
<input type="text" name="" id="" onkeypress="f10()" value="键盘按键被按下...wow">
<input type="text" name="" id="" onkeyup="f11()" value="键盘按键被松开">
<input type="text" name="" id="" onkeyup="f12()" value="表单事件：失去焦点">
<select name="" id="" onchange="f13()">
<option value="">上海</option>
<option value="">北京</option>
</select>
<input type="text" onselect="f14()" value="文本被选中时触发">
<form action="" onreset="f15()" onsubmit="f16()">
<input type="text">
<input type="reset" name="重置" id="">
<input type="submit" name="提交" id="">
</form>
</body>
<script>
function f12() {
console.log("表单事件：失去焦点");
}
function f13() {
console.log("状态改变");
}
function f14() {
console.log("文本被选中时触发");
}
function f15() {
console.log("表单重置");
}
function f16() {
console.log("表单提交");
}
function f1() {
console.log("我是一个鼠标双击事件");
}
function f2() {
console.log("我是一个鼠标进入事件");
}
function f3() {
console.log("我是一个鼠标在元素上事件");
}
function f4() {
console.log("我是一个鼠标移出事件");
}
function f5() {
console.log("我是一个鼠标离开事件");
}
function f6() {
console.log("我是一个鼠标被移动事件");
}
function f7() {
console.log("我是一个鼠标按键被松开事件");
}
function f8() {
console.log("我是一个右键点击弹出菜单时触发事件");
}
function f9() {
console.log("我是一个键盘按键被按下事件");
}
function f10() {
console.log("我是一个键盘按键被按下事件...wow");
}
function f11() {
console.log("我是一个键盘按键被松开事件");
}
</script>
</html>04-Event-evend对象的应用
<!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>
<div onclick="f1(1,event)">我是一个div</div>
<div onclick="f2()">
<p onclick="f3(event)">
<a href="http://www.baidu.com" onclick="f4(event)">我是一个链接</a>
</p>
</div>
</body>
<script>
/* event: 该对象是在事件触发式，自动产生的
如何使用该对象： 将event这个值，赋值给形参即可。 形参名可以是任何名字
*/
function f1(a, e) {
// target： 事件源那个元素对象
console.log(e.target.nodeName);
console.log(e.currentTarget.nodeName);
//事件的名称
console.log(e.type)
console.log(e.clientX, e.clientY);
console.log(e.cancelable);
}
function f2() {
console.log("div");
}
function f3(event) {
console.log("p");
event.cancelBubble = true;
}
function f4(event) {
console.log("a");
event.preventDefault();
event.stopPropagation();
}
</script>
</html>js-my.js
function f2() {
console.log("这是使用了第三种方式,封装js代码到文件中");
}