DOM
??
dom對(duì)象是HtmlElement類型
DOM document object model 文檔對(duì)象模型 就是用js表示的標(biāo)簽
可以跟頁(yè)面交互{
1.可以在js中獲得到 標(biāo)簽
2.有哪交互(事件)
3.邏輯
}
JS操作HTML{
1.創(chuàng)建HTML
2.獲取HTML 用JS修改樣式 修改里面的內(nèi)容 添加事件
3.刪除HTML 清空標(biāo)簽 xx.innerHTML=""; 如：document.body.innerHTML="";
4.替換HTML
}
1.創(chuàng)建HTML{
document.createElement("標(biāo)簽名")
var p=document.createElement("p");
屬性 在js也同樣可以獲取或設(shè)置屬性 灬
<img src="1.jpg">
注意：創(chuàng)建完得標(biāo)簽 需要放到指定 才能顯示 步驟 1.創(chuàng)建HTML標(biāo)簽 2.放到某個(gè)容器
}
事件{
點(diǎn)擊 onclick div.onclick=function(){}
}
通過(guò)js設(shè)置樣式 div.style.background="aqua";
網(wǎng)頁(yè)由哪幾個(gè)部分組成
html 頁(yè)面骨架
css 修飾美化 頁(yè)面
js 交互
*/
/*
用Js創(chuàng)建html
*/
// document.createElement("標(biāo)簽名")
var p=document.createElement("p"); //p標(biāo)簽
var div=document.createElement("div");
var image=document.createElement("img");
// image.src="加藤惠.jpg";
image.src="https://www.baidu.com/img/dong_f17b19f600dbf0bfc9b8bed5836f50be.gif";
/*
* 把創(chuàng)建好的標(biāo)簽 放到 某個(gè)父元素里面
* 容器(父元素).appendChild(放的元素)
*/
document.body.appendChild(image);
/*
* 用js創(chuàng)建9個(gè)div 放到html
*/
// for(var i=1;i<5;i++){
// var div1=document.createElement("div");
// document.body.appendChild(div1);
// }
var row=3;
for(var i=0;i<row*row;i++){
var div=document.createElement("div");
// div.style.background="aqua";
// div.style.color="red";
// div.style.opacity=0.2;
if(i===2){
div.style.opacity=0.8;
}
div.onclick=function(){
// 判斷 點(diǎn)擊的這個(gè)元素 跟其他的元素顏色是不是一樣？
// 判斷 opacity
// this 表示 點(diǎn)擊的那個(gè)元素
if(this.style.opacity==0.8){
alert("顏色不一樣")
}
};
document.body.appendChild(div);
}
/*
* innerHTML 往標(biāo)簽里面放字符串格式標(biāo)簽
* innerText 往標(biāo)簽里面放文本內(nèi)容 不能放字符串格式標(biāo)簽
*
* 清空標(biāo)簽
* xx.innerHTML="";
*/
// 清空
// document.body.innerHTML="";
/*
dom
1.創(chuàng)建HTML元素
document.createElement("標(biāo)簽名");
2.拼接到父元素中
document.父元素.appendChild(子元素)
3.設(shè)置html屬性
元素.xx屬性 = 屬性 值;
img.src = "1.jpg"
div.style.background = "red";
4.給標(biāo)簽添加點(diǎn)擊事件
元素.onclick = function(){}
5.清空標(biāo)簽
document.元素.innerHTML="";
BOM
BOM
Browser Object Model 瀏覽器對(duì)象模型 里面的內(nèi)容是所有關(guān)于瀏覽器的操作
操作類型：
一.窗口對(duì)象 window窗口包含的部分
瀏覽器可視的范圍
1.導(dǎo)航
2.歷史記錄
3.屏幕大小
4.位置
窗口對(duì)象 是window的實(shí)例對(duì)象 實(shí)例對(duì)象比如var data=New data;
注意：1.定義的全局變量 是定義到了window對(duì)象上面 可以通過(guò)window.xx訪問(wèn)
? 在最外面定義的函數(shù) 是定義到了window對(duì)象上面 可以通過(guò)window.xx訪問(wèn)
? this表示 -> window對(duì)象
例如：var a=40-20; 控制臺(tái)通過(guò)window.a訪問(wèn)
尺寸：window.innerHeight - 瀏覽器窗口的內(nèi)部高度(包括滾動(dòng)條)
? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度(包括滾動(dòng)條)
? 如果是IE5、6、7、8
? document.documentElement.clientHeight
? document.documentElement.clientWidth
事件：
1.resize 顯示內(nèi)容、屏幕尺寸發(fā)生改變的時(shí)候調(diào)用
2.load 等窗口里面的資源 加載完成的時(shí)候調(diào)用
二.Location 位置定位
location.hostname 返回 web 主機(jī)的域名
location.pathname 返回當(dāng)前頁(yè)面的路徑和文件名
location.port 返回 web 主機(jī)的端口 （80 或 443）
主機(jī)的端口
80 web頁(yè)面的默認(rèn)端口
443 https(加密的 超文本傳輸協(xié)議)(普通的http是沒(méi)加密的,不需要開啟443)
21 FTP(文件傳輸協(xié)議)
3306 mysql數(shù)據(jù)庫(kù)默認(rèn)
location.protocol 返回所使用的 web 協(xié)議（http: 或 https:）
(!) location.search ? 返回搜索的結(jié)果（http GET方法的參數(shù)） 頁(yè)面之間傳參
就是網(wǎng)站搜索之后網(wǎng)址后面?開始后面的鏈接
location.href 本頁(yè)的位置 指定頁(yè)面要跳轉(zhuǎn)到的位置
三.History 歷史記錄
前提:必須有歷史記錄 才能使用這些函數(shù)
1.back 必須跳轉(zhuǎn)了下一個(gè)頁(yè)面才有返回
2.forward 必須跳轉(zhuǎn)過(guò)下一個(gè)頁(yè)面(有返回過(guò)上一頁(yè))才能使用前進(jìn)的功能
3.go 跳幾級(jí)由里面數(shù)字決定
正數(shù)：往后跳(下面的頁(yè)面)
負(fù)數(shù)：返回(往回跳)
四.Navigator 導(dǎo)航
1.geolocation獲取地理位置信息。經(jīng)緯度。谷歌瀏覽器獲取不了.安卓手機(jī)可能需要開啟GPS
谷歌可能需要梯子或者代理
getCurrentPosition 獲取當(dāng)前的位置信息。
參數(shù)(成功時(shí)候調(diào)用的函數(shù),失敗時(shí)候調(diào)用的函數(shù))
舉個(gè)栗子:BOM第二節(jié)課文件夾中的->獲取地理位置信息.html
監(jiān)聽位置信息 watchPosition 參數(shù)(成功時(shí)候調(diào)用的函數(shù),失敗時(shí)候調(diào)用的函數(shù))
? 返回值 用于停止監(jiān)聽的標(biāo)記
停止監(jiān)聽 clearWatch 參數(shù) watchPosition的返回值
用于停止監(jiān)聽的標(biāo)記
2.getUserMedia、mediaDevices 音頻流 視頻流的處理
五.計(jì)時(shí)事件(單位都是毫秒)
定時(shí)器:每隔多久去實(shí)行一次setInterval(function(){},5000);
延遲執(zhí)行:只執(zhí)行一次 setTimeout(function(){},5000);
六.數(shù)據(jù)持久化
1.cookie
2.storage
3.websql
4.indexedDB
5.應(yīng)用緩存 application cache
*/
/*舉個(gè)栗子*/
var a=40-20;
function f1(){
console.log("a");
}
window.f1();
var f2=function(){
console.log("2");
}
window.f2();
/*onresize=function(){
}
和下面的一個(gè)意思
*/
// 動(dòng)態(tài)獲取 窗口內(nèi)容的寬高
window.onresize=function(){
console.log(innerWidth,innerHeight,outerWidth,outerHeight);
}
// 打印window類 可以查看window類包含的全部屬性
console.log(window);
// 獲取網(wǎng)站的域名 就是網(wǎng)址
console.log("獲取網(wǎng)站的域名:",location.hostname);
// 當(dāng)前頁(yè)面的路徑和文件名
console.log("當(dāng)前頁(yè)面的路徑和文件名:",location.pathname);
// web 主機(jī)的端口
console.log("web 主機(jī)的端口:",location.port);
// 查看協(xié)議用的是http還是https
console.log("查看協(xié)議:",location.protocol);
// 返回搜索的結(jié)果（http GET方法的參數(shù)）
console.log("返回搜索的結(jié)果:",location.search);
document.querySelector(".page").onclick=function(){
location.;
}
DATE日期對(duì)象
創(chuàng)建日期對(duì)象
var date=new Date();
// 獲取年份
console.log(date.getFullYear());
// 獲取月份 月份需要加1 因?yàn)樵路菔菑?開始計(jì)算的
console.log(date.getMonth()+1);
// 獲取日
console.log(date.getDate());
// 獲取時(shí)
console.log(date.getHours());
// 獲取分鐘
console.log(date.getMinutes());
// 獲取秒
console.log(date.getSeconds());
// 獲取毫秒
console.log(date.getMilliseconds());
// 獲取周 ***周日是0 周一是1……
console.log(date.getDay());
時(shí)間戳 1970年開始到某個(gè)時(shí)間的 毫秒數(shù)
時(shí)間戳 轉(zhuǎn)日期對(duì)象 的兩個(gè)方法
new Date(1288336112000)
var date = new Date();
date.setTime(1288336112000);
switch寫周一到周日
var a = 4;
switch (a) {
case a = 0:
console.log("星期日");
break;
case a = 1:
console.log("星期一");
break;
case a = 2:
console.log("星期二");
break;
case a = 3:
console.log("星期三");
break;
case a = 4:
console.log("星期"+a);
break;
case a = 5:
console.log("星期五");
break;
case a = 6:
console.log("星期六");
break;
default:
console.log("阿巴阿巴");
break;
}
