JavaScript基础学习笔记之JavaScript提升
了解时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解时间</title>
</head>
<body>
<script type="text/javascript">
/**
* 格林尼治时间(GTM):是英国郊区皇家格林尼治天文台的时间，因为地球自转的原因，不同经度上的时间是不相同的，格林尼治天文台是经度为0的地方。世界上发生的重大时间都是以格林尼治时间时间为标准的。
*
*
* 世界协调时间(UTC):世界时间。1970年1月1日0点。
*/
</script>
</body>
</html>
Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<script type="text/javascript">
//ECMAScript中的Date类型是在早期Java中的java.util.Date类的基础上构建的。为此Date类型使用自UTC1970年1月1日午夜（零时）开始经过的毫秒数保存时间的。该Date类型保存的日期能够精确到1970年1月1日之前和之后的285616年
//创建
//1、直接用Date()函数
//返回当前时间
//注意：不论Date()是否带参数，返回的都是当前时间
var date1 = Date("2016-09-18");
console.log(typeof date1);//String类型
console.log(date1);
//2、构造函数法--不传参数
//返回当前时间
var date2 = new Date();
console.log(typeof date2);//Object类型
console.log(date2);
//3、构造函数法--参数是一个表示时间的字符串
//3.1 格式：month day, year hours:minutes:seconds
//December 24, 2008 12:04:13
//注意：如果省略了小时、分钟、秒数，这些会被设置为0
//3.2 2016-09-18 18:32:32 2016-9-18 18:32:32
//3.3 2016/09/18 18:32:32
var date3 = new Date("2016/09/18");
console.log(date3);
//4、
var date4 = new Date("2016-09-08");
console.log(date4);
//5、
var date5 = new Date("2016-9-8");
console.log(date5);
//6、构造函数法--参数是(年,月,日,时,分,秒,毫秒)
//注意：年和月必须写，且月从0开始，日期从1开始
var date6 = new Date(2016,09,9,10,10,10,1000);
console.log(date6);
//7、构造函数法--参数是毫秒数
//返回中国标准时间
var date7 = new Date(1000);
console.log(date7);
</script>
</body>
</html>
Date对象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Data对象的方法</title>
</head>
<body>
<script type="text/javascript">
var date = new Date();
//获取年份
console.log(date.getFullYear());
//获取月份，注意0表示1月，依次类推
console.log(date.getMonth());
//获取日期
console.log(date.getDate());
//获取星期
console.log(date.getDay());
//获取小时
console.log(date.getHours());
//获取分钟
console.log(date.getMinutes());
//获取秒数
console.log(date.getSeconds());
//获取毫秒数
console.log(date.getMilliseconds());
//获取日期对象所表示的日期距离1970-01-01的毫秒数
console.log(date.getTime());
//设置年份
date.setFullYear(2015);
//设置月份
//注意：传入的月份大于11，则年份增加
date.setMonth(8);
//设置日期
//注意：如果传入的日期超过了该月应有的天数则会增加月份
date.setDate(29);
//注意：星期一般不用设置
//设置小时
//注意：如果传入的值超过23则增加日期
date.setHours(13);
//设置分钟
//注意：如果传入的值超过了59则增加小时数
date.setMinutes(56);
//设置秒数
//注意：传入的值超过59会增加分钟数
date.setSeconds(10);
//设置毫秒数
//注意：传入的值超过999会增加秒数
date.setMilliseconds(888);
//设置距离1970-01-01的毫秒数
date.setTime(1308484904898);
console.log(date);
//转换成字符串
//包含年月日时分秒
console.log(date.toLocaleString());
//包含年月日
console.log(date.toLocaleDateString());
//包含时分秒
console.log(date.toLocaleTimeString());
//Date.parse(dateString)
//参数：日期字符串 格式：2016-05-08 2015/05/08 12:00:00
//返回该日期距离1970年1月1日0点的毫秒数
console.log(Date.parse("2016-10-10"));
</script>
</body>
</html>
Date对象间的运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date对象间的运算</title>
</head>
<body>
<script type="text/javascript">
var date1 = new Date("2016-10-10 10:10:10");
var date2 = new Date("2016-10-10 10:10:12");
//两个日期对象之间相差的毫秒数
console.log(date2 - date1);
//返回两个日期字符串拼接后的字符串
console.log(date2 + date1);
console.log(typeof (date2 + date1));
</script>
</body>
</html>
BOM简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM简介</title>
</head>
<body style="background-color: red">
<input type="text" name="abc">
<button onclick="func()">跳转到绿页面</button>
<button onclick="refresh()">刷新红页面</button>
<button onclick="ass()">加载绿页面</button>
<button onclick="backPage()">上一页</button>
<button onclick="forwardPage()">下一页</button>
<button onclick="goPage()">go到黄界面</button>
<script type="text/javascript">
//BOM:浏览器对象模型（Browser Object Model），是一个用于访问浏览器和计算机屏幕的对象集合。我们可以通过全局对象window来访问这些对象。
console.log(window.document);
console.log(window.frames);
console.log(window.navigator);
console.log(window.screen);
console.log(window.location);
console.log(window.history);
//window.document
//是一个BOM对象，表示的是当前所载入的文档(即页面)，但它的方法和属性同时也属于DOM对象所涵盖的范围。
//window.frames
//是当前页面中所有框架的集合
//window.navigator
//用于反应浏览器及其功能信息的对象
//window.screen
//提供浏览器以外的环境信息
//window.location
//href属性 控制浏览器地址栏的内容
//reload() 刷新页面
//reload(true) 刷新页面，不带缓存
//assign() 加载新的页面
//replace() 加载新的页面(注意：不会再浏览器的历史记录表中留下记录)
function func() {
//alert("点我干啥？");
window.location.href = "greenWindow.html";
}
function refresh() {
window.location.reload();
}
function ass() {
window.location.assign("greenWindow.html");
//window.location.replase("greenWindow.html");
}
//window.history
//window.history.length获取历史记录的长度
//back() 上一页
//forward() 下一页
//go(num) //num<0时，跳转到自己后方的第num个记录。num>0时，跳转自己前方的第num个记录
console.log("window.history.length = " + window.history.length);
//上一页
function backPage() {
window.history.back();
}
//下一页
function forwardPage() {
window.history.forward();
}
//
function goPage() {
window.history.go(2);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM简介</title>
</head>
<body style="background-color: green">
<button onclick="func()">跳转到黄页面</button>
<button onclick="backPage()">上一页</button>
<button onclick="forwardPage()">下一页</button>
<script type="text/javascript">
function func() {
window.location.href = "yellowWindow.html";
}
function backPage() {
window.history.back();
}
function forwardPage() {
window.history.forward();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM简介</title>
</head>
<body style="background-color: yellow">
<button onclick="func()">回到红页面</button>
<script type="text/javascript">
function func() {
window.history.go(-2);
}
</script>
</body>
</html>
window中常用的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window中常用的方法</title>
</head>
<body>
<button onclick="openNewWindow()">打开新窗口</button>
<button onclick="closeWindow()">关闭窗口</button>
<script type="text/javascript">
function openNewWindow() {
//open(url,target,"特性的字符串")
window.open("yellowWindow.html", "blank", "width=200px, height=400px, top=0px, left=0px");
}
function closeWindow() {
window.close();
//火狐
//about:config
//我会保证小心
//allow_src
//true
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM简介</title>
</head>
<body style="background-color: yellow">
</body>
</html>
window常用方法open特性
window中常用的事件-onload加载事件和onunload卸载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window中常用的事件-onload加载事件和onunload卸载事件</title>
</head>
<body>
<button onclick="func()">跳转</button>
<script type="text/javascript">
//onunload事件
//当页面完全卸载再触发，只有IE支持
window.onunload = function() {
alert("确定关闭");
};
function func() {
window.location.href = "red.html";
}
//load事件
//当页面加载完成的时候会触发该事件
window.onload = function() {
alert("我在界面加载完后才显示");
};
alert("页面加载中");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>red</title>
</head>
<body style="background-color: red">
</body>
</html>
window中常用的事件-onscroll滚动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window中常用的事件-onscroll滚动事件</title>
</head>
<body style="height:3000px">
<h1>我是顶部</h1>
<button onclick="goOn()" style="position: fixed;right: 50px;bottom: 50px">返回顶部</button>
<script type="text/javascript">
//当窗口发生滚动会触发该事件
window.onscroll = function() {
console.log("滚动");
//打印滚动高度
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
console.log(scrollTop);
};
//返回顶部
function goOn() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
</script>
</body>
</html>
window中常用的事件-onresize窗口变化事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window中常用的事件-onresize窗口变化事件</title>
</head>
<body>
<script type="text/javascript">
//当浏览器发生缩放的时候就会反复触发resize事件
window.onresize = function() {
var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
console.log(document.documentElement.clientWidth, document.body.clientWidth, window.innerWidth, w);
console.log(document.documentElement.clientHeight, document.body.clientHeight, window.innerHeight, h);
};
</script>
</body>
</html>
定时器-间歇性定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器-间歇性定时器</title>
</head>
<body>
<button onclick="closeIntervar()">关闭定时器</button>
<script type="text/javascript">
//setInterval(函数名,时间)
// 功能：创建一个间歇性定时器，每间隔参数二时间执行一次参数一函数
// 返回值：定时器的id，可以通过该id关闭定时器
var timer = window.setInterval(func, 2000);
function func() {
console.log("sunck is a good man");
}
function closeIntervar() {
//停止定时器
////注：js中没有恢复定时器一说，当你停止定时器之后，定时器就会被删掉，想要继续的话，直接新建一个定时器。
window.clearInterval(timer);
}
</script>
</body>
</html>
定时器-延时定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器-延时定时器</title>
</head>
<body>
<button onclick="closeTimer()">关闭定时器</button>
<script type="text/javascript">
//setTimeout(函数名，时间)
//功能：参数2时间以后再执行参数1函数
//返回值：定时器的id
alert("创建定时器，5秒后执行名为func的函数");
var timer = window.setTimeout(func, 5000);
function func() {
console.log("sunck is a good man");
}
//关闭定时器
function closeTimer() {
window.clearTimeout(timer);
}
</script>
</body>
</html>
认识DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识DOM</title>
</head>
<body>
<script type="text/javascript">
/**了解DOM
* DOM：文档对象模型(Document Object Model)
* DOM是访问HTML和操作HTML的标准。
*
* Core DOM – 核心DOM 针对任何结构化文档的标准模型
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型
*/
/**DOM节点的分类
* 1、文档节点
* 2、标签(元素)节点
* 3、属性节点
* 4、文本节点
* 5、注释节点
*/
/**DOM节点层级关系(DOM树)
* 1、父节点(parent node)：父节点拥有任意数量的子节点
* 2、子节点(child node)：子节点只能拥有一个父节点
* 3、兄弟节点(sibling node)：拥有相同父节点的同级节点
* 4、根节点(root node)：一个HTML文档一般只有一个根节点，根节点没有父亲节点，是最上层的节点。
*
*
*
* 祖先节点：包含子节点的节点都可以叫做祖先节点，其中包括了父节点。
* 后代节点：一个节点内包含的所有节点，叫做后代节点，其中包括了子节点。
*/
/**JS跟页面中这些标签进行交互
* 1、获取标签(元素)节点
* 修改标签CSS样式
* 修改标签属性
* 2、创建标签
* 3、删除标签
* 4、复制标签
*/
</script>
</body>
</html>
css
DOM节点分类
DOM节点关系
获取标签(元素)节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取标签(元素)节点</title>
</head>
<body>
<div id="idDiv"></div>
<div class="classDiv"></div>
<div class="classDiv"></div>
<div class="classDiv"></div>
<div class="classDiv"></div>
<input type="text" name="inputText">
<input type="text" name="inputText">
<input type="text" name="inputText">
<script type="text/javascript">
console.log("**getElementById**");
//1、getElementById(str)
//根据元素id获取元素节点
var jsDiv = document.getElementById("idDiv");
console.log(jsDiv);
console.log(typeof jsDiv);
alert(jsDiv);
console.log("**getElementsByClassName**");
//2、getElementsByClassName()
//获取相同class属性的元素节点列表
//注意：此方法不支持IE8以下
var jsDivsClass = document.getElementsByClassName("classDiv");
for (var i = 0; i < jsDivsClass.length; i++) {
console.log(jsDivsClass[i]);
}
console.log("**getElementsByTagName**");
//3、getElementsByTagName()
//根据标签名来获取元素节点的集合
var jsDivsTagName = document.getElementsByTagName("div");
for (var i = 0; i < jsDivsTagName.length; i++) {
console.log(jsDivsTagName[i]);
}
console.log("**getElementsByName**");
//4、getElementsByName()
//根据name属性值来获取元素节点的集合
var jsDivsName = document.getElementsByName("inputText");
for (var i = 0; i < jsDivsName.length; i++) {
console.log(jsDivsName[i]);
}
</script>
</body>
</html>
获取属性节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取属性节点</title>
</head>
<body>
<input type="text" id="in" placeholder="请留下你的大名!" my="我的">
<script type="text/javascript">
var jsInput = document.getElementById("in");
console.log(jsInput);
//方法一:
//获取官方定义的属性直接使用 元素节点.属性名
//得到元素对应属性的属性值
var typeNode = jsInput.type;
console.log(typeNode);
var placeholderNode = jsInput.placeholder;
console.log(placeholderNode);
//alert("注意！我要变身了");
//修改元素对应属性的属性值
//元素节点.属性名 = 新的属性值
jsInput.placeholder = "傻不傻";
//方法二:
//元素节点.getAttribute("属性名")
//得到元素对应属性的属性值
//注意：该方法还可以获取自定义属性
var idNode = jsInput.getAttribute("my");
console.log(idNode);
//修改元素对应属性的属性值
//元素节点.setAttribute("属性名", "新的属性值");
jsInput.setAttribute("my", "sunck");
console.log(jsInput);
//移除元素节点中的某个属性节点，某些低版本浏览器不支持
//元素节点.removeAttribute("属性名");
jsInput.removeAttribute("my");
console.log(jsInput);
</script>
</body>
</html>
####### 获取属性节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取属性节点</title>
</head>
<body>
<input type="text" id="in" placeholder="请留下你的大名!" my="我的">
<script type="text/javascript">
var jsInput = document.getElementById("in");
console.log(jsInput);
//方法一:
//获取官方定义的属性直接使用 元素节点.属性名
//得到元素对应属性的属性值
var typeNode = jsInput.type;
console.log(typeNode);
var placeholderNode = jsInput.placeholder;
console.log(placeholderNode);
//alert("注意！我要变身了");
//修改元素对应属性的属性值
//元素节点.属性名 = 新的属性值
jsInput.placeholder = "傻不傻";
//方法二:
//元素节点.getAttribute("属性名")
//得到元素对应属性的属性值
//注意：该方法还可以获取自定义属性
var idNode = jsInput.getAttribute("my");
console.log(idNode);
//修改元素对应属性的属性值
//元素节点.setAttribute("属性名", "新的属性值");
jsInput.setAttribute("my", "sunck");
console.log(jsInput);
//移除元素节点中的某个属性节点，某些低版本浏览器不支持
//元素节点.removeAttribute("属性名");
jsInput.removeAttribute("my");
console.log(jsInput);
</script>
</body>
</html>
获取文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取文本节点</title>
</head>
<body>
<div id="box">
我是个盒子
</div>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
//1、元素节点.innerHTML
//从对象的开始标签到结束标签的全部内容,不包括本身Html标签
var inner = jsDiv.innerHTML;
console.log(inner);
console.log(typeof inner);
//2、元素节点.outerHTML
//除了包含innerHTML的全部内容外, 还包含对象标签本身
var outer = jsDiv.outerHTML;
console.log(outer);
console.log(typeof outer);
//3、元素节点.innerText
//从对象的开始标签到结束标签的全部的文本内容
var text = jsDiv.innerText;
console.log(text);
console.log(typeof text);
//修改
jsDiv.innerHTML = "<p>我才是</p>";
console.log(jsDiv);
</script>
</body>
</html>
行间样式表的读写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行间样式表的读写</title>
</head>
<body>
<div id="box" style="width:100px;height:200px;background-color:red"></div>
<button onclick="changeColor()">换颜色</button>
<script type="text/javascript">
//获取元素节点
var jsDiv = document.getElementById("box");
//获取style属性节点
var jsDivStyle = jsDiv.style;
//console.log(jsDivStyle);
//获取样式表中样式属性的属性值
//style属性节点.样式属性名
//元素节点.style.样式属性名
//元素节点.style["样式属性名"]
var w = jsDivStyle.width;
console.log(w);
var h = jsDiv.style.height;
//也可用如下写法
//var h = jsDiv.style["height"];
console.log(h);
//设置样式表中的样式属性的属性值
//元素节点.style.样式属性名 = 样式属性值
//background-color --- backgroundColor
//HTML中的-号去掉，-号后面的单词首字母大写
jsDiv.style.backgroundColor = "green";
function changeColor() {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
var colorStr = "rgb(" + r + ", " + g + ", " + b + ")";
jsDiv.style.backgroundColor = colorStr;
}
</script>
</body>
</html>
内部样式表与外部样式表的读写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表与外部样式表的读写</title>
<link rel="stylesheet" type="text/css" href="sunck.css">
<style type="text/css">
#box1{
width:100px;height: 200px;background-color: red;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script type="text/javascript">
/**获取
*
* IE中：元素节点.currentStyle.样式属性名
* 元素节点.currentStyle["样式属性名"]
* 其他：window.getComputedStyle(元素节点, 伪类).样式属性名
* window.getComputedStyle(元素节点, 伪类)["样式属性名"]
*
* 伪类一般写null即可
*
*/
//获取元素节点
var jsDiv1 = document.getElementById("box1");
var jsDiv2 = document.getElementById("box2");
var w1 = 0;
//判断是否是IE浏览器
if (jsDiv1.currentStyle) {
//IE浏览器获取样式属性值的方式
w1 = jsDiv1.currentStyle.width;
} else {
//其他浏览器获取样式属性值的方式
w1 = window.getComputedStyle(jsDiv1, null).width;
}
console.log(w1);
var w2 = 0;
if (jsDiv2.currentStyle) {
w2 = jsDiv2.currentStyle.width;
} else {
w2 = window.getComputedStyle(jsDiv2, null)["width"];
}
console.log(w2);
//设置样式中的属性的值
//元素节点.style.样式属性名 = 样式属性值
jsDiv1.style.backgroundColor = "black";
jsDiv2.style.backgroundColor = "blue";
</script>
</body>
</html>
sunck.css文件内容
#box2{
width: 200px;height: 100px;background-color: green;
}
getComputedStyle与style的区别
自由飞翔的div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自由飞翔的div</title>
<style type="text/css">
#box{
width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 0px;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="fly()" style="position: absolute;left: 150px;top: 150px">飞翔吧</button>
<script type="text/javascript">
function fly() {
var jsDiv = document.getElementById("box");
var timer = window.setInterval(move, 100);
function move() {
var currentLeft = parseInt(window.getComputedStyle(jsDiv, null).left);
jsDiv.style.left = (currentLeft + 5) + "px";
var currentTop = parseInt(window.getComputedStyle(jsDiv, null).top);
jsDiv.style.top = (currentTop + 5) + "px";
}
}
</script>
</body>
</html>
节点常用属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点常用属性</title>
<style type="text/css">
#box1{
width: 200px;height: 200px;background-color: red;
}
#box2{
width: 200px;height: 200px;background-color: green;
}
#box3{
width: 200px;height: 200px;background-color: yellow;
}
</style>
</head>
<body>
<div id="box1">
<p>我是第一个P</p>
<p>我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
<div id="box2"></div>
<div id="box3"></div>
<input id="put" type="text" name="in" placeholder="sunck is a good man">
<script type="text/javascript">
//节点共有的属性：nodeName、nodeType、nodeValue
var jsDiv1 = document.getElementById("box1");
console.log(jsDiv1);
console.log(jsDiv1.nodeName);
console.log(jsDiv1.nodeType);
console.log(jsDiv1.nodeValue);
//节点层次关系属性
//1、获取当前元素节点的所有的子节点
var childNodesArray = jsDiv1.childNodes;
console.log(childNodesArray);
//2、获取当前元素节点的第一个子节点
var firstChildNode = jsDiv1.firstChild;
console.log(firstChildNode);
//3、获取当前节点的最后一个子节点
var lastChildNode = jsDiv1.lastChild;
console.log(lastChildNode);
//4、获取该节点的文档的根节点，相当于document
var rootNode = jsDiv1.ownerDocument;
console.log(rootNode);
//5、获取当前节点的父节点
var parentNode = jsDiv1.parentNode;
console.log(parentNode);
var jsDiv2 = document.getElementById("box2");
//6、获取当前节点的前一个同级节点
var previousNode = jsDiv2.previousSibling;
console.log(previousNode);
//7、获取当前节点的后一个同级节点
var nextNode = jsDiv2.nextSibling;
console.log(nextNode);
//8、获取当前节点的所有的属性节点
var jsInput = document.getElementById("put");
var allAttributesArray = jsInput.attributes;
console.log(allAttributesArray);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点常用属性</title>
<style type="text/css">
#box1{
width: 200px;height: 200px;background-color: red;
}
#box2{
width: 200px;height: 200px;background-color: green;
}
#box3{
width: 200px;height: 200px;background-color: yellow;
}
</style>
</head>
<body>
<div id="box1">
<p>我是第一个P</p>
<p>我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>
<div id="box2"></div>
<div id="box3"></div>
<input id="put" type="text" name="in" placeholder="sunck is a good man">
<script type="text/javascript">
var a = document.getElementById("box2");
</script>
</body>
</html>
节点属性nodeName、nodeType、nodeValue
DOM节点动态操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM节点动态操作</title>
<style type="text/css">
#box{
width: 300px;height: 300px;background-color: yellow
}
#box1{
width: 100px;height: 100px;background-color: red
}
#box2{
width: 50px;height: 50px;background-color: blue
}
</style>
</head>
<body>
<div id="box">
<p>1</p>
<p>2</p>
</div>
<script type="text/javascript">
//创建元素节点
var jsDiv1 = document.createElement("div");
jsDiv1.id = "box1";
console.log(jsDiv1);
//父节点.appendChild(子节点);
//方法将一个新节点添加到某个节点的子节点列表的末尾上
document.body.appendChild(jsDiv1);
//父节点.insertBefore(新节点, 子节点)
//将新节点添加到父节点的某个子节点的前面
var jsP = document.createElement("p");
jsP.innerHTML = "关注我";
var jsD = document.getElementById("box");
jsD.insertBefore(jsP, jsD.childNodes[3]);
console.log(jsD);
//创建文本节点
var jsStr = document.createTextNode("什么");
//添加文本节点
var js2P = jsD.childNodes[1];
js2P.appendChild(jsStr);
//替换节点
//父节点.replaceChild(新节点, 子节点)
//将父节点中的某个子节点替换成新节点
var jsDiv2 = document.createElement("div");
jsDiv2.id = "box2";
jsDiv1.parentNode.replaceChild(jsDiv2, jsDiv1);
//复制节点
var jsD1 = jsD.cloneNode();//只复制本身
console.log(jsD1);
var jsD2 = jsD.cloneNode(true);//复制本身和子节点
console.log(jsD2);
alert("删除节点");
//删除节点
//父节点.removeChild(子节点)
//删除父节点下的对应子节点
jsDiv2.parentNode.removeChild(jsDiv2);
//offsetParent（参照物父元素）
var temp = jsD.childNodes[1].offsetParent;
console.log(temp);
//当某个元素的父元素或以上元素都未进行CSS定位时，则返回body元素，也就是说元素的偏移量（offsetTop、offsetLeft）等属性是以body为参照物的
//当某个元素的父元素进行了CSS定位时（absolute或者relative），则返回父元素，也就是说元素的偏移量是以父元素为参照物的
//当某个元素及其父元素都进行CSS定位时，则返回距离最近的使用了CSS定位的元素
</script>
</body>
</html>
事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理程序</title>
</head>
<body>
<!-- 事件：就是用户或者是浏览器执行的某种动作
事件处理程序：就是响应事件的函数，事件处理程序的名字是以“on”开头的
-->
<!-- 1、直接在html标签中给与事件处理程序同名的属性赋值js代码 -->
<button id="btn1" onclick="console.log('事件处理1')">按键1</button>
<!-- 2、给与事件处理程序同名的属性赋值一个函数调用语句 -->
<!-- 使HTML代码与JS代码稍微有点儿分离，不至于第一种那么紧密耦合 -->
<!-- this代表的是button标签本身 -->
<button id="btn2" onclick="func2(this)">按键2</button>
<!-- 3、DOM0级事件处理程序 -->
<!-- 这种方式也是早期的写法，但好处是可以将JS与HTML完全分离，前提是需要给HTML元素提供一个额外的id属性(或其它能获取该元素对象的方式) -->
<button id="btn3">按键3</button>
<!-- 4、DOM2级事件处理程序 -->
<button id="btn4">按键4</button>
<script type="text/javascript">
//2
function func2(obj) {
console.log("事件处理2");
//obj接收的this的值，表示的是调用该函数的标签节点
console.log(obj);
console.log(this);//this---window
}
//3
//找到id为btn3的按键
var jsBtn3 = document.getElementById("btn3");
//在这里添加事件处理程序
jsBtn3.onclick = func3;
function func3() {
console.log("事件处理3");
console.log(this);//this---元素节点
}
//移除事件处理程序
//jsBtn3.onclick = null;
//4、是目前最流行的事件处理程序，各大主流浏览器全部支持
var jsBtn4 = document.getElementById("btn4");
//添加事件监听器
//元素节点.addEventListener("事件名",响应事件的函数,布尔值)
// 事件名 click mouseover mouseout
// 函数名或者匿名函数
// 事件流 false
jsBtn4.addEventListener("click", func4, false);
function func4() {
console.log("事件处理4");
console.log(this);//this---元素节点
}
//注意：可以绑定多个事件，相互之间不影响
jsBtn4.addEventListener("click", func5, false);
function func5() {
console.log("事件处理5");
}
//移除事件
//注意：
//1、参数与添加事件时相同
//2、添加事件时第二个参数不能是匿名函数
//jsBtn4.removeEventListener("click", func4, false);
/**能否使用this，this代表的谁？？
* 1、在标签中使用，代表的是标签本身
*
* 2、在函数体中直接使用，代表的是window
* 在标签中将this作为实参传递到函数中，在函数体中使用形参代表标签本身
*
* 3、在事件函数中使用，代表标签本身
*
* 4、在事件函数中使用，代表标签本身
*/
/**移除事件
* 1、无法移除
*
* 2、无法移除
*
* 3、元素节点.onclick = null;
*
* 4、元素节点.removeEventLinstener("事件名", 响应函数, false);
*/
</script>
</body>
</html>
事件类型
飞翔的你
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body style="height: 1000px;position: relative;">
<div id="box">
</div>
<button onclick="fly()" style="position: absolute; left:200px;top: 200px;">走你</button>
<script type="text/javascript">
var div = document.getElementById("box")
function fly(){
setInterval(function(){
var a = parseInt(window.getComputedStyle(div, null).left)
div.style.left = a + 10 + "px"
var b = parseInt(window.getComputedStyle(div, null).top)
div.style.top = b + 10 + "px"
}, 100)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 600px;
height: 400px;
border: solid 1px red;
position: relative;
}
#ball{
width: 50px;
height: 50px;
border-radius: 25px;
background-color: yellow;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box">
<div id="ball">
</div>
</div>
<script type="text/javascript">
var ball = document.getElementById("ball")
var speedx = 2
var speedy = 2
setInterval(function(){
ball.style.left = ball.offsetLeft + speedx + "px"
ball.style.top = ball.offsetTop + speedy + "px"
if (ball.offsetTop >= 400 - 50 || ball.offsetTop <= 0){
speedy *= -1
}
if (ball.offsetLeft >= 600 - 50 || ball.offsetLeft <= 0) {
speedx *= -1
}
}, 10)
</script>
</body>
</html>
网友评论