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>
