JavaScript基礎(chǔ)學(xué)習(xí)筆記之JavaScript提升
了解時(shí)間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解時(shí)間</title>
</head>
<body>
<script type="text/javascript">
/**
* 格林尼治時(shí)間(GTM):是英國(guó)郊區(qū)皇家格林尼治天文臺(tái)的時(shí)間，因?yàn)榈厍蜃赞D(zhuǎn)的原因，不同經(jīng)度上的時(shí)間是不相同的，格林尼治天文臺(tái)是經(jīng)度為0的地方。世界上發(fā)生的重大時(shí)間都是以格林尼治時(shí)間時(shí)間為標(biāo)準(zhǔn)的。
*
*
* 世界協(xié)調(diào)時(shí)間(UTC):世界時(shí)間。1970年1月1日0點(diǎn)。
*/
</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類的基礎(chǔ)上構(gòu)建的。為此Date類型使用自UTC1970年1月1日午夜（零時(shí)）開(kāi)始經(jīng)過(guò)的毫秒數(shù)保存時(shí)間的。該Date類型保存的日期能夠精確到1970年1月1日之前和之后的285616年
//創(chuàng)建
//1、直接用Date()函數(shù)
//返回當(dāng)前時(shí)間
//注意：不論Date()是否帶參數(shù)，返回的都是當(dāng)前時(shí)間
var date1 = Date("2016-09-18");
console.log(typeof date1);//String類型
console.log(date1);
//2、構(gòu)造函數(shù)法--不傳參數(shù)
//返回當(dāng)前時(shí)間
var date2 = new Date();
console.log(typeof date2);//Object類型
console.log(date2);
//3、構(gòu)造函數(shù)法--參數(shù)是一個(gè)表示時(shí)間的字符串
//3.1 格式：month day, year hours:minutes:seconds
//December 24, 2008 12:04:13
//注意：如果省略了小時(shí)、分鐘、秒數(shù)，這些會(huì)被設(shè)置為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、構(gòu)造函數(shù)法--參數(shù)是(年,月,日,時(shí),分,秒,毫秒)
//注意：年和月必須寫，且月從0開(kāi)始，日期從1開(kāi)始
var date6 = new Date(2016,09,9,10,10,10,1000);
console.log(date6);
//7、構(gòu)造函數(shù)法--參數(shù)是毫秒數(shù)
//返回中國(guó)標(biāo)準(zhǔn)時(shí)間
var date7 = new Date(1000);
console.log(date7);
</script>
</body>
</html>
Date對(duì)象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Data對(duì)象的方法</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());
//獲取小時(shí)
console.log(date.getHours());
//獲取分鐘
console.log(date.getMinutes());
//獲取秒數(shù)
console.log(date.getSeconds());
//獲取毫秒數(shù)
console.log(date.getMilliseconds());
//獲取日期對(duì)象所表示的日期距離1970-01-01的毫秒數(shù)
console.log(date.getTime());
//設(shè)置年份
date.setFullYear(2015);
//設(shè)置月份
//注意：傳入的月份大于11，則年份增加
date.setMonth(8);
//設(shè)置日期
//注意：如果傳入的日期超過(guò)了該月應(yīng)有的天數(shù)則會(huì)增加月份
date.setDate(29);
//注意：星期一般不用設(shè)置
//設(shè)置小時(shí)
//注意：如果傳入的值超過(guò)23則增加日期
date.setHours(13);
//設(shè)置分鐘
//注意：如果傳入的值超過(guò)了59則增加小時(shí)數(shù)
date.setMinutes(56);
//設(shè)置秒數(shù)
//注意：傳入的值超過(guò)59會(huì)增加分鐘數(shù)
date.setSeconds(10);
//設(shè)置毫秒數(shù)
//注意：傳入的值超過(guò)999會(huì)增加秒數(shù)
date.setMilliseconds(888);
//設(shè)置距離1970-01-01的毫秒數(shù)
date.setTime(1308484904898);
console.log(date);
//轉(zhuǎn)換成字符串
//包含年月日時(shí)分秒
console.log(date.toLocaleString());
//包含年月日
console.log(date.toLocaleDateString());
//包含時(shí)分秒
console.log(date.toLocaleTimeString());
//Date.parse(dateString)
//參數(shù)：日期字符串 格式：2016-05-08 2015/05/08 12:00:00
//返回該日期距離1970年1月1日0點(diǎn)的毫秒數(shù)
console.log(Date.parse("2016-10-10"));
</script>
</body>
</html>
Date對(duì)象間的運(yùn)算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date對(duì)象間的運(yùn)算</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");
//兩個(gè)日期對(duì)象之間相差的毫秒數(shù)
console.log(date2 - date1);
//返回兩個(gè)日期字符串拼接后的字符串
console.log(date2 + date1);
console.log(typeof (date2 + date1));
</script>
</body>
</html>
BOM簡(jiǎn)介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM簡(jiǎn)介</title>
</head>
<body style="background-color: red">
<input type="text" name="abc">
<button onclick="func()">跳轉(zhuǎn)到綠頁(yè)面</button>
<button onclick="refresh()">刷新紅頁(yè)面</button>
<button onclick="ass()">加載綠頁(yè)面</button>
<button onclick="backPage()">上一頁(yè)</button>
<button onclick="forwardPage()">下一頁(yè)</button>
<button onclick="goPage()">go到黃界面</button>
<script type="text/javascript">
//BOM:瀏覽器對(duì)象模型（Browser Object Model），是一個(gè)用于訪問(wèn)瀏覽器和計(jì)算機(jī)屏幕的對(duì)象集合。我們可以通過(guò)全局對(duì)象window來(lái)訪問(wèn)這些對(duì)象。
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
//是一個(gè)BOM對(duì)象，表示的是當(dāng)前所載入的文檔(即頁(yè)面)，但它的方法和屬性同時(shí)也屬于DOM對(duì)象所涵蓋的范圍。
//window.frames
//是當(dāng)前頁(yè)面中所有框架的集合
//window.navigator
//用于反應(yīng)瀏覽器及其功能信息的對(duì)象
//window.screen
//提供瀏覽器以外的環(huán)境信息
//window.location
//href屬性 控制瀏覽器地址欄的內(nèi)容
//reload() 刷新頁(yè)面
//reload(true) 刷新頁(yè)面，不帶緩存
//assign() 加載新的頁(yè)面
//replace() 加載新的頁(yè)面(注意：不會(huì)再瀏覽器的歷史記錄表中留下記錄)
function func() {
//alert("點(diǎn)我干啥？");
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獲取歷史記錄的長(zhǎng)度
//back() 上一頁(yè)
//forward() 下一頁(yè)
//go(num) //num<0時(shí)，跳轉(zhuǎn)到自己后方的第num個(gè)記錄。num>0時(shí)，跳轉(zhuǎn)自己前方的第num個(gè)記錄
console.log("window.history.length = " + window.history.length);
//上一頁(yè)
function backPage() {
window.history.back();
}
//下一頁(yè)
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簡(jiǎn)介</title>
</head>
<body style="background-color: green">
<button onclick="func()">跳轉(zhuǎn)到黃頁(yè)面</button>
<button onclick="backPage()">上一頁(yè)</button>
<button onclick="forwardPage()">下一頁(yè)</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簡(jiǎn)介</title>
</head>
<body style="background-color: yellow">
<button onclick="func()">回到紅頁(yè)面</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()">打開(kāi)新窗口</button>
<button onclick="closeWindow()">關(guān)閉窗口</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
//我會(huì)保證小心
//allow_src
//true
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM簡(jiǎn)介</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()">跳轉(zhuǎn)</button>
<script type="text/javascript">
//onunload事件
//當(dāng)頁(yè)面完全卸載再觸發(fā)，只有IE支持
window.onunload = function() {
alert("確定關(guān)閉");
};
function func() {
window.location.href = "red.html";
}
//load事件
//當(dāng)頁(yè)面加載完成的時(shí)候會(huì)觸發(fā)該事件
window.onload = function() {
alert("我在界面加載完后才顯示");
};
alert("頁(yè)面加載中");
</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滾動(dòng)事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window中常用的事件-onscroll滾動(dòng)事件</title>
</head>
<body style="height:3000px">
<h1>我是頂部</h1>
<button onclick="goOn()" style="position: fixed;right: 50px;bottom: 50px">返回頂部</button>
<script type="text/javascript">
//當(dāng)窗口發(fā)生滾動(dòng)會(huì)觸發(fā)該事件
window.onscroll = function() {
console.log("滾動(dòng)");
//打印滾動(dòng)高度
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">
//當(dāng)瀏覽器發(fā)生縮放的時(shí)候就會(huì)反復(fù)觸發(fā)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>
定時(shí)器-間歇性定時(shí)器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時(shí)器-間歇性定時(shí)器</title>
</head>
<body>
<button onclick="closeIntervar()">關(guān)閉定時(shí)器</button>
<script type="text/javascript">
//setInterval(函數(shù)名,時(shí)間)
// 功能：創(chuàng)建一個(gè)間歇性定時(shí)器，每間隔參數(shù)二時(shí)間執(zhí)行一次參數(shù)一函數(shù)
// 返回值：定時(shí)器的id，可以通過(guò)該id關(guān)閉定時(shí)器
var timer = window.setInterval(func, 2000);
function func() {
console.log("sunck is a good man");
}
function closeIntervar() {
//停止定時(shí)器
////注：js中沒(méi)有恢復(fù)定時(shí)器一說(shuō)，當(dāng)你停止定時(shí)器之后，定時(shí)器就會(huì)被刪掉，想要繼續(xù)的話，直接新建一個(gè)定時(shí)器。
window.clearInterval(timer);
}
</script>
</body>
</html>
定時(shí)器-延時(shí)定時(shí)器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時(shí)器-延時(shí)定時(shí)器</title>
</head>
<body>
<button onclick="closeTimer()">關(guān)閉定時(shí)器</button>
<script type="text/javascript">
//setTimeout(函數(shù)名，時(shí)間)
//功能：參數(shù)2時(shí)間以后再執(zhí)行參數(shù)1函數(shù)
//返回值：定時(shí)器的id
alert("創(chuàng)建定時(shí)器，5秒后執(zhí)行名為func的函數(shù)");
var timer = window.setTimeout(func, 5000);
function func() {
console.log("sunck is a good man");
}
//關(guān)閉定時(shí)器
function closeTimer() {
window.clearTimeout(timer);
}
</script>
</body>
</html>
認(rèn)識(shí)DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>認(rèn)識(shí)DOM</title>
</head>
<body>
<script type="text/javascript">
/**了解DOM
* DOM：文檔對(duì)象模型(Document Object Model)
* DOM是訪問(wèn)HTML和操作HTML的標(biāo)準(zhǔn)。
*
* Core DOM – 核心DOM 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
* XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型
* HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型
*/
/**DOM節(jié)點(diǎn)的分類
* 1、文檔節(jié)點(diǎn)
* 2、標(biāo)簽(元素)節(jié)點(diǎn)
* 3、屬性節(jié)點(diǎn)
* 4、文本節(jié)點(diǎn)
* 5、注釋節(jié)點(diǎn)
*/
/**DOM節(jié)點(diǎn)層級(jí)關(guān)系(DOM樹(shù))
* 1、父節(jié)點(diǎn)(parent node)：父節(jié)點(diǎn)擁有任意數(shù)量的子節(jié)點(diǎn)
* 2、子節(jié)點(diǎn)(child node)：子節(jié)點(diǎn)只能擁有一個(gè)父節(jié)點(diǎn)
* 3、兄弟節(jié)點(diǎn)(sibling node)：擁有相同父節(jié)點(diǎn)的同級(jí)節(jié)點(diǎn)
* 4、根節(jié)點(diǎn)(root node)：一個(gè)HTML文檔一般只有一個(gè)根節(jié)點(diǎn)，根節(jié)點(diǎn)沒(méi)有父親節(jié)點(diǎn)，是最上層的節(jié)點(diǎn)。
*
*
*
* 祖先節(jié)點(diǎn)：包含子節(jié)點(diǎn)的節(jié)點(diǎn)都可以叫做祖先節(jié)點(diǎn)，其中包括了父節(jié)點(diǎn)。
* 后代節(jié)點(diǎn)：一個(gè)節(jié)點(diǎn)內(nèi)包含的所有節(jié)點(diǎn)，叫做后代節(jié)點(diǎn)，其中包括了子節(jié)點(diǎn)。
*/
/**JS跟頁(yè)面中這些標(biāo)簽進(jìn)行交互
* 1、獲取標(biāo)簽(元素)節(jié)點(diǎn)
* 修改標(biāo)簽CSS樣式
* 修改標(biāo)簽屬性
* 2、創(chuàng)建標(biāo)簽
* 3、刪除標(biāo)簽
* 4、復(fù)制標(biāo)簽
*/
</script>
</body>
</html>
css
DOM節(jié)點(diǎn)分類
DOM節(jié)點(diǎn)關(guān)系
獲取標(biāo)簽(元素)節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取標(biāo)簽(元素)節(jié)點(diǎn)</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)
//根據(jù)元素id獲取元素節(jié)點(diǎn)
var jsDiv = document.getElementById("idDiv");
console.log(jsDiv);
console.log(typeof jsDiv);
alert(jsDiv);
console.log("**getElementsByClassName**");
//2、getElementsByClassName()
//獲取相同class屬性的元素節(jié)點(diǎn)列表
//注意：此方法不支持IE8以下
var jsDivsClass = document.getElementsByClassName("classDiv");
for (var i = 0; i < jsDivsClass.length; i++) {
console.log(jsDivsClass[i]);
}
console.log("**getElementsByTagName**");
//3、getElementsByTagName()
//根據(jù)標(biāo)簽名來(lái)獲取元素節(jié)點(diǎn)的集合
var jsDivsTagName = document.getElementsByTagName("div");
for (var i = 0; i < jsDivsTagName.length; i++) {
console.log(jsDivsTagName[i]);
}
console.log("**getElementsByName**");
//4、getElementsByName()
//根據(jù)name屬性值來(lái)獲取元素節(jié)點(diǎn)的集合
var jsDivsName = document.getElementsByName("inputText");
for (var i = 0; i < jsDivsName.length; i++) {
console.log(jsDivsName[i]);
}
</script>
</body>
</html>
獲取屬性節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取屬性節(jié)點(diǎn)</title>
</head>
<body>
<input type="text" id="in" placeholder="請(qǐng)留下你的大名!" my="我的">
<script type="text/javascript">
var jsInput = document.getElementById("in");
console.log(jsInput);
//方法一:
//獲取官方定義的屬性直接使用 元素節(jié)點(diǎn).屬性名
//得到元素對(duì)應(yīng)屬性的屬性值
var typeNode = jsInput.type;
console.log(typeNode);
var placeholderNode = jsInput.placeholder;
console.log(placeholderNode);
//alert("注意！我要變身了");
//修改元素對(duì)應(yīng)屬性的屬性值
//元素節(jié)點(diǎn).屬性名 = 新的屬性值
jsInput.placeholder = "傻不傻";
//方法二:
//元素節(jié)點(diǎn).getAttribute("屬性名")
//得到元素對(duì)應(yīng)屬性的屬性值
//注意：該方法還可以獲取自定義屬性
var idNode = jsInput.getAttribute("my");
console.log(idNode);
//修改元素對(duì)應(yīng)屬性的屬性值
//元素節(jié)點(diǎn).setAttribute("屬性名", "新的屬性值");
jsInput.setAttribute("my", "sunck");
console.log(jsInput);
//移除元素節(jié)點(diǎn)中的某個(gè)屬性節(jié)點(diǎn)，某些低版本瀏覽器不支持
//元素節(jié)點(diǎn).removeAttribute("屬性名");
jsInput.removeAttribute("my");
console.log(jsInput);
</script>
</body>
</html>
####### 獲取屬性節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取屬性節(jié)點(diǎn)</title>
</head>
<body>
<input type="text" id="in" placeholder="請(qǐng)留下你的大名!" my="我的">
<script type="text/javascript">
var jsInput = document.getElementById("in");
console.log(jsInput);
//方法一:
//獲取官方定義的屬性直接使用 元素節(jié)點(diǎn).屬性名
//得到元素對(duì)應(yīng)屬性的屬性值
var typeNode = jsInput.type;
console.log(typeNode);
var placeholderNode = jsInput.placeholder;
console.log(placeholderNode);
//alert("注意！我要變身了");
//修改元素對(duì)應(yīng)屬性的屬性值
//元素節(jié)點(diǎn).屬性名 = 新的屬性值
jsInput.placeholder = "傻不傻";
//方法二:
//元素節(jié)點(diǎn).getAttribute("屬性名")
//得到元素對(duì)應(yīng)屬性的屬性值
//注意：該方法還可以獲取自定義屬性
var idNode = jsInput.getAttribute("my");
console.log(idNode);
//修改元素對(duì)應(yīng)屬性的屬性值
//元素節(jié)點(diǎn).setAttribute("屬性名", "新的屬性值");
jsInput.setAttribute("my", "sunck");
console.log(jsInput);
//移除元素節(jié)點(diǎn)中的某個(gè)屬性節(jié)點(diǎn)，某些低版本瀏覽器不支持
//元素節(jié)點(diǎn).removeAttribute("屬性名");
jsInput.removeAttribute("my");
console.log(jsInput);
</script>
</body>
</html>
獲取文本節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取文本節(jié)點(diǎn)</title>
</head>
<body>
<div id="box">
我是個(gè)盒子
</div>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
//1、元素節(jié)點(diǎn).innerHTML
//從對(duì)象的開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽的全部?jī)?nèi)容,不包括本身Html標(biāo)簽
var inner = jsDiv.innerHTML;
console.log(inner);
console.log(typeof inner);
//2、元素節(jié)點(diǎn).outerHTML
//除了包含innerHTML的全部?jī)?nèi)容外, 還包含對(duì)象標(biāo)簽本身
var outer = jsDiv.outerHTML;
console.log(outer);
console.log(typeof outer);
//3、元素節(jié)點(diǎn).innerText
//從對(duì)象的開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽的全部的文本內(nèi)容
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">
//獲取元素節(jié)點(diǎn)
var jsDiv = document.getElementById("box");
//獲取style屬性節(jié)點(diǎn)
var jsDivStyle = jsDiv.style;
//console.log(jsDivStyle);
//獲取樣式表中樣式屬性的屬性值
//style屬性節(jié)點(diǎn).樣式屬性名
//元素節(jié)點(diǎn).style.樣式屬性名
//元素節(jié)點(diǎn).style["樣式屬性名"]
var w = jsDivStyle.width;
console.log(w);
var h = jsDiv.style.height;
//也可用如下寫法
//var h = jsDiv.style["height"];
console.log(h);
//設(shè)置樣式表中的樣式屬性的屬性值
//元素節(jié)點(diǎn).style.樣式屬性名 = 樣式屬性值
//background-color --- backgroundColor
//HTML中的-號(hào)去掉，-號(hào)后面的單詞首字母大寫
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>
內(nèi)部樣式表與外部樣式表的讀寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內(nèi)部樣式表與外部樣式表的讀寫</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中：元素節(jié)點(diǎn).currentStyle.樣式屬性名
* 元素節(jié)點(diǎn).currentStyle["樣式屬性名"]
* 其他：window.getComputedStyle(元素節(jié)點(diǎn), 偽類).樣式屬性名
* window.getComputedStyle(元素節(jié)點(diǎn), 偽類)["樣式屬性名"]
*
* 偽類一般寫null即可
*
*/
//獲取元素節(jié)點(diǎn)
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);
//設(shè)置樣式中的屬性的值
//元素節(jié)點(diǎn).style.樣式屬性名 = 樣式屬性值
jsDiv1.style.backgroundColor = "black";
jsDiv2.style.backgroundColor = "blue";
</script>
</body>
</html>
sunck.css文件內(nèi)容
#box2{
width: 200px;height: 100px;background-color: green;
}
getComputedStyle與style的區(qū)別
自由飛翔的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>
節(jié)點(diǎn)常用屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點(diǎn)常用屬性</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>我是第一個(gè)P</p>
<p>我是第二個(gè)P</p>
<p>我是第三個(gè)P</p>
<p>我是第四個(gè)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">
//節(jié)點(diǎn)共有的屬性：nodeName、nodeType、nodeValue
var jsDiv1 = document.getElementById("box1");
console.log(jsDiv1);
console.log(jsDiv1.nodeName);
console.log(jsDiv1.nodeType);
console.log(jsDiv1.nodeValue);
//節(jié)點(diǎn)層次關(guān)系屬性
//1、獲取當(dāng)前元素節(jié)點(diǎn)的所有的子節(jié)點(diǎn)
var childNodesArray = jsDiv1.childNodes;
console.log(childNodesArray);
//2、獲取當(dāng)前元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
var firstChildNode = jsDiv1.firstChild;
console.log(firstChildNode);
//3、獲取當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
var lastChildNode = jsDiv1.lastChild;
console.log(lastChildNode);
//4、獲取該節(jié)點(diǎn)的文檔的根節(jié)點(diǎn)，相當(dāng)于document
var rootNode = jsDiv1.ownerDocument;
console.log(rootNode);
//5、獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
var parentNode = jsDiv1.parentNode;
console.log(parentNode);
var jsDiv2 = document.getElementById("box2");
//6、獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)同級(jí)節(jié)點(diǎn)
var previousNode = jsDiv2.previousSibling;
console.log(previousNode);
//7、獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)同級(jí)節(jié)點(diǎn)
var nextNode = jsDiv2.nextSibling;
console.log(nextNode);
//8、獲取當(dāng)前節(jié)點(diǎn)的所有的屬性節(jié)點(diǎn)
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>節(jié)點(diǎn)常用屬性</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>我是第一個(gè)P</p>
<p>我是第二個(gè)P</p>
<p>我是第三個(gè)P</p>
<p>我是第四個(gè)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>
節(jié)點(diǎn)屬性nodeName、nodeType、nodeValue
DOM節(jié)點(diǎn)動(dòng)態(tài)操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM節(jié)點(diǎn)動(dòng)態(tài)操作</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">
//創(chuàng)建元素節(jié)點(diǎn)
var jsDiv1 = document.createElement("div");
jsDiv1.id = "box1";
console.log(jsDiv1);
//父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn));
//方法將一個(gè)新節(jié)點(diǎn)添加到某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾上
document.body.appendChild(jsDiv1);
//父節(jié)點(diǎn).insertBefore(新節(jié)點(diǎn), 子節(jié)點(diǎn))
//將新節(jié)點(diǎn)添加到父節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)的前面
var jsP = document.createElement("p");
jsP.innerHTML = "關(guān)注我";
var jsD = document.getElementById("box");
jsD.insertBefore(jsP, jsD.childNodes[3]);
console.log(jsD);
//創(chuàng)建文本節(jié)點(diǎn)
var jsStr = document.createTextNode("什么");
//添加文本節(jié)點(diǎn)
var js2P = jsD.childNodes[1];
js2P.appendChild(jsStr);
//替換節(jié)點(diǎn)
//父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn), 子節(jié)點(diǎn))
//將父節(jié)點(diǎn)中的某個(gè)子節(jié)點(diǎn)替換成新節(jié)點(diǎn)
var jsDiv2 = document.createElement("div");
jsDiv2.id = "box2";
jsDiv1.parentNode.replaceChild(jsDiv2, jsDiv1);
//復(fù)制節(jié)點(diǎn)
var jsD1 = jsD.cloneNode();//只復(fù)制本身
console.log(jsD1);
var jsD2 = jsD.cloneNode(true);//復(fù)制本身和子節(jié)點(diǎn)
console.log(jsD2);
alert("刪除節(jié)點(diǎn)");
//刪除節(jié)點(diǎn)
//父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))
//刪除父節(jié)點(diǎn)下的對(duì)應(yīng)子節(jié)點(diǎn)
jsDiv2.parentNode.removeChild(jsDiv2);
//offsetParent（參照物父元素）
var temp = jsD.childNodes[1].offsetParent;
console.log(temp);
//當(dāng)某個(gè)元素的父元素或以上元素都未進(jìn)行CSS定位時(shí)，則返回body元素，也就是說(shuō)元素的偏移量（offsetTop、offsetLeft）等屬性是以body為參照物的
//當(dāng)某個(gè)元素的父元素進(jìn)行了CSS定位時(shí)（absolute或者relative），則返回父元素，也就是說(shuō)元素的偏移量是以父元素為參照物的
//當(dāng)某個(gè)元素及其父元素都進(jìn)行CSS定位時(shí)，則返回距離最近的使用了CSS定位的元素
</script>
</body>
</html>
事件處理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件處理程序</title>
</head>
<body>
<!-- 事件：就是用戶或者是瀏覽器執(zhí)行的某種動(dòng)作
事件處理程序：就是響應(yīng)事件的函數(shù)，事件處理程序的名字是以“on”開(kāi)頭的
-->
<!-- 1、直接在html標(biāo)簽中給與事件處理程序同名的屬性賦值js代碼 -->
<button id="btn1" onclick="console.log('事件處理1')">按鍵1</button>
<!-- 2、給與事件處理程序同名的屬性賦值一個(gè)函數(shù)調(diào)用語(yǔ)句 -->
<!-- 使HTML代碼與JS代碼稍微有點(diǎn)兒分離，不至于第一種那么緊密耦合 -->
<!-- this代表的是button標(biāo)簽本身 -->
<button id="btn2" onclick="func2(this)">按鍵2</button>
<!-- 3、DOM0級(jí)事件處理程序 -->
<!-- 這種方式也是早期的寫法，但好處是可以將JS與HTML完全分離，前提是需要給HTML元素提供一個(gè)額外的id屬性(或其它能獲取該元素對(duì)象的方式) -->
<button id="btn3">按鍵3</button>
<!-- 4、DOM2級(jí)事件處理程序 -->
<button id="btn4">按鍵4</button>
<script type="text/javascript">
//2
function func2(obj) {
console.log("事件處理2");
//obj接收的this的值，表示的是調(diào)用該函數(shù)的標(biāo)簽節(jié)點(diǎn)
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---元素節(jié)點(diǎn)
}
//移除事件處理程序
//jsBtn3.onclick = null;
//4、是目前最流行的事件處理程序，各大主流瀏覽器全部支持
var jsBtn4 = document.getElementById("btn4");
//添加事件監(jiān)聽(tīng)器
//元素節(jié)點(diǎn).addEventListener("事件名",響應(yīng)事件的函數(shù),布爾值)
// 事件名 click mouseover mouseout
// 函數(shù)名或者匿名函數(shù)
// 事件流 false
jsBtn4.addEventListener("click", func4, false);
function func4() {
console.log("事件處理4");
console.log(this);//this---元素節(jié)點(diǎn)
}
//注意：可以綁定多個(gè)事件，相互之間不影響
jsBtn4.addEventListener("click", func5, false);
function func5() {
console.log("事件處理5");
}
//移除事件
//注意：
//1、參數(shù)與添加事件時(shí)相同
//2、添加事件時(shí)第二個(gè)參數(shù)不能是匿名函數(shù)
//jsBtn4.removeEventListener("click", func4, false);
/**能否使用this，this代表的誰(shuí)？？
* 1、在標(biāo)簽中使用，代表的是標(biāo)簽本身
*
* 2、在函數(shù)體中直接使用，代表的是window
* 在標(biāo)簽中將this作為實(shí)參傳遞到函數(shù)中，在函數(shù)體中使用形參代表標(biāo)簽本身
*
* 3、在事件函數(shù)中使用，代表標(biāo)簽本身
*
* 4、在事件函數(shù)中使用，代表標(biāo)簽本身
*/
/**移除事件
* 1、無(wú)法移除
*
* 2、無(wú)法移除
*
* 3、元素節(jié)點(diǎn).onclick = null;
*
* 4、元素節(jié)點(diǎn).removeEventLinstener("事件名", 響應(yīng)函數(shù), 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>
