? ?// js組成：ECMAScript? DOM? BOM
? ? /*
? ? ? BOM----> Browser Object Model
? ? ? 瀏覽器對象模型，瀏覽器的操作內(nèi)容都是在對象的方法操作
? ? ? 瀏覽器頂級對象 window?
? ? */
? ? // console.log(window);
? ? // alert('彈彈彈');
? ? // window.alert('彈走魚尾紋');
? ? // 在全局中定義的變量其實就是在window身上作為屬性
? ? // 全局中 this 指向 window
? ? // console.log(this);
? ? // 全局中的 top 指向window
? ? // console.log(top);
? ? // 全局中的name屬性在window上有号阿，屬性值是字符串
? ? // console.log(name);
? ? // console.log(window.name);
? ? // console.log(typeof? window.name); // string
? ? // 瀏覽器的尺寸
? ? // innerWidth帮哈、innerHeight 獲取瀏覽可視窗口的寬高(包含了滾動條)
? ? // console.log(window.innerHeight);
? ? // console.log(window.innerWidth);?
? </script>
</body>
</html>
/*
? ? 彈出層
? ? ? 1居凶、 alert()? ? 提示彈框? ? 沒有返回值? ?
? ? ? 2博投、 confirm()? 詢問彈窗?
? ? ? ? 當我們點確定的時候返回true
? ? ? ? 當我們點取消的時候返回false
? ? ? 3里烦、 prompt()? 提示輸入彈窗
? ? ? ? 當點擊取消的時候返回null
? ? ? ? 當輸入并點擊確定的返回輸入的內(nèi)容(如果啥也沒寫返回空字符串)
? ? */
? ? // console.log(alert('123')); // undefined
? ? // console.log(confirm('can you marry me?'));
? ? // console.log(prompt('請輸入你的身份證'));
// location 對象中就存儲而來瀏覽器的地址信息
? ? // console.log(location);
? ? // 1. location.href
? ? // location對象中href屬性就是瀏覽器訪問的完整地址
? ? //? 會將地址中的中文轉碼為url中的編碼格式
? ? // console.log(location.href);
? ? // 也可以通過設置location.href屬性來實現(xiàn)瀏覽器的跳轉
? ? //? 會直接跳轉到指定的url地址
? ? // btn.onclick = function(){
? ? ? // location.;
? ? // }
? ? // 2. location.reload()? 重新加載頁面
? ? // 這個方法不要寫在全局中
? ? // location.reload()
? ? // btn2.onclick = function(){
? ? //? location.reload()
? ? // }
? ? /*
? ? ? http://localhost/2111/location.html#12345?name=zs&age=123
? ? ? 3. loaction中的其他屬性
? ? ? ? ? hash? 地址中#后面的東西 #12345?name=zs&age=123
? ? ? ? ? host 是訪問地址主機的地址? localhost
? ? ? ? ? search 是瀏覽器中?后面的內(nèi)容? ?name=zs&age=123? ?
? ? */
/*
? ? 在對象history上記錄了瀏覽器的歷史記錄
? ? // 前提是要有歷史記錄,
? ? //? history對象中的lenght屬性 如果為1表示沒有歷史記錄
? ? // 1. history.back()? 回到歷史記錄的上一個頁面
? ? // 2. history.forward() 去到歷史記錄中的下一個頁面
? ? // 3. history.go(n)? 去到歷史記錄中指定的頁面
? ? ? ? ? history.go(1) 相當于history.forward()
? ? ? ? ? history.go(-1) 相當于history.back()
? */
// 在對象navigator中記錄了瀏覽器的各種信息
? // appName 獲取到瀏覽器的名字 html5的兼容問題? 不一定有效
? // console.log(navigator.appName); // Netscape
? // appversion 瀏覽器的版本 不一定有效
? // console.log(navigator.appVersion);
? // 5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
? // platform? 瀏覽器運行的環(huán)境版本 不一定有效
? // console.log(navigator.platform); // Win32
? //? userAgent? 獲取瀏覽器的版本信息
? // console.log(navigator.userAgent);
? // Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
// 瀏覽器事件
? // 1. 瀏覽器的滾動事件 scroll 當滾動條動起來的時候觸發(fā)的事件
? ? // 瀏覽器頁面的滾動距離际插，瀏覽器卷去的距離
? ? // 通過scrollTop和scrollLeft獲取垂直和水平卷去的距離
? // 獲取頁面卷去的距離 會有兼容問題
? // document.body.scrollTop 當頁面沒有使用DOCTYPE聲明的時候可以獲取到
? // document.documentElement.scrollTop? 當頁面有使用DOCTYPE聲明的時候可以獲取到
? // window.onscroll = function(){
? ? // console.log(document.body.scrollTop);
? ? // console.log(document.documentElement.scrollTop);
? ? // console.log(document.body.scrollLeft);
? ? // console.log(document.documentElement.scrollLeft);
? // }
? // 2. 瀏覽器的頁面加載事件 load
? //? 當瀏覽器頁面中的內(nèi)容(頁面結構,文本，圖片,css,js等資源)全部加載完畢后會觸發(fā)的事件
? // window.onload = function(){
? //? btn.onclick = function(){
? //? ? alert('你真棒');
? //? }
? // }
? // btn.onclick = function(){
? //? alert('你真棒');
? // }
? // 3. 瀏覽器的頁面可視窗口變化事件? resize
? //? 當瀏覽器窗口大小變化的時候會觸發(fā)
? // window.onresize = function(){
? //? // console.log(window.innerWidth);
? //? // console.log(window.innerHeight);
? // }
// 定時器分兩種：
? // 定時器都有一個返回值：返回定時器的標識id(就是數(shù)字標識)
? //? 1. 間隔定時器? setInterval()
? //? 2. 倒計時定時器(爆炸定時器)? setTimeout()
? // 1. 間隔定時器
? // 語法： setInterval(函數(shù),時間);? 時間單位是毫秒
? //? 每隔一段時間就運行一次函數(shù)
? // 返回定時器標識id
? // var timerId = setInterval(function(){
? //? alert('我又來啦');
? // },5000);
? // console.log(timerId);
? // 2. 倒計時定時器
? // 語法： setTimeout(函數(shù),時間)? 時間單位是毫秒
? //? 過一段時間會執(zhí)行函數(shù)
? // 返回定時器標識id?
? // var timerId = setTimeout(function(){
? //? console.log('爆炸');
? // },3000);
? // console.log(timerId);
? // 清除定時器
? // clearInterval(),clearTimeout()
? // 語法：clearInterval(定時器標識)? 關閉對應的定時器
? // 語法：clearTimeout(定時器標識)? 關閉對應的定時器
? // var timerId = setTimeout(function(){
? //? console.log('時間到了');
? // },5000);
? // var timerId2 = setInterval(function(){
? //? console.log('等會我還來');
? // },2000)
? // btn.onclick =function(){
? //? // clearTimeout(timerId);
? //? // clearTimeout(timerId2)
? //? clearInterval(timerId);
? //? clearInterval(timerId2);
? // }
// 輸出順序
? // code start
? // code end
? // 我是定時器
? /*
? ? 定時的執(zhí)行是異步代碼執(zhí)行：
? ? 同步執(zhí)行： 代碼按順序執(zhí)行
? ? 異步執(zhí)行： 代碼不按順序執(zhí)行谐腰，先執(zhí)行同步代碼孕豹，當所有同步代碼執(zhí)行完畢，才開始執(zhí)行異步代碼
? */
/*
? ? ? DOM ---> Document Object Model
? ? ? ? ? ? ? ? 文檔? ? 對象? ? 模型
? ? ? 文檔對象模型: 操作頁面中的節(jié)點
? ? ? ? doucument 是DOM中的頂級對象 其上一級是window對象? ? ?
? ? ? // 獲取頁面中的特殊標簽
? ? ? // document.body? 頁面中body標簽
? ? ? // 獲取 頁面中的 head 標簽
? ? ? // document.head
? ? ? // 獲取頁面中的title,也可設置頁面的title
? ? ? // document.title
? ? */
? ? // console.log(window);
? ? // console.log(document.body);
? ? // console.log(document.head);
? ? // console.log(document.title);
? ? // document.title = 'DOM';
// 要操作頁面的中標簽元素十气，我們要先獲取到標簽元素
? // 獲取DOM中的標簽元素的方法
? // 1. 通過id獲取
? // 語法： document.getElementById(標簽的id值)
? //? 返回對應的標簽元素
? //? 如果沒有這個標簽励背，則返回null
? // var li1 = document.getElementById('one');
? // console.log(li1);? // 獲取到標簽元素
? // var li66 = document.getElementById('one6');
? // console.log(li66); // null
? // 2. 通過類名獲取? class的值
? // 語法： document.getElementsByClassName(類名)
? // 返回對對應類名的標簽組成 偽數(shù)組
? // 如果沒有對應的類名 則返回空的偽數(shù)組
? // var lis = document.getElementsByClassName('cls');
? // console.log(lis);
? // var lis66 = document.getElementsByClassName('cls66');
? // console.log(lis66);
? // 3. 通過標簽名獲取元素?
? // 語法： document.getElementsByTagName(標簽名)
? // 返回一個偽數(shù)組，里面是匹配的標簽
? // 如果沒有匹配到 則返回空的偽數(shù)組
? // var lis2 = document.getElementsByTagName('li');
? // console.log(lis2);
? // var uls = document.getElementsByTagName('ul');
? // console.log(uls);
? // 4. 通過選擇器獲取元素 querySelector()
? // 語法: document.querySelector(選擇器)?
? //? 選擇器的寫法和css中一樣一樣的
? // 返回選擇器匹配的第一個元素
? // 如果選擇器匹配不到元素? null
? // console.log(document.querySelector('#one'));
? // console.log(document.querySelector('li'));
? // console.log(document.querySelector('#id'));
? // 5. 通過選擇器獲取元素 querySelectorAll()
? // 語法：document.querySelectorAll(選擇器)
? //? 選擇器的寫法和css中一樣一樣的
? // 返回選擇器匹配的所有元素的一個偽數(shù)組
? // 如果選擇器選擇不到砸西，則返回空的偽數(shù)組
? // console.log(document.querySelectorAll('#one'));
? // console.log(document.querySelectorAll('li'));
? // console.log(document.querySelectorAll('lilili'));
? // console.log(document.getElementById('one'));
? // 不建議直接通過id屬性值作為標簽元素在js使用
? // console.log(one);// 不建議使用
</script>
<script>
? // var lis = document.getElementsByClassName('cls');
? // console.log(lis);
? // 偽數(shù)組 和數(shù)組一樣都有索引下標和length屬性表示長度
? // 但是偽數(shù)組不能使用數(shù)組方法
? // 報錯
? // lis.forEach(function(){ //? lis.forEach is not a function
? //? console.log(666);
? // })
// 操作DOM屬性
? /*?
? ? 1. 操作標簽的內(nèi)容
? ? ? innerText? 獲取設置標簽的文本（不識別html標簽）
? ? ? innerHTML? 獲取設置標簽的超文本(識別html標簽)
? ? ? // 設置都是覆蓋性的設置
? ? 2. 操作標簽屬性
? ? ? ? getAttribute(屬性名)? 獲取標簽的屬性值
? ? ? ? setAttribute(屬性名,屬性值)? 設置標簽的屬性
? ? ? ? removeAttribute(屬性名)? 移除標簽的屬性
? ? 3. 標簽的css樣式操作
? ? ? style? ? ? 獲取到標簽的所有行內(nèi)樣式
? ? ? style.樣式名? 獲取設置標簽的行內(nèi)樣式值
? ? 5. 操作標簽的類名
? ? ? className? 獲取設置標簽的類名
? ? ? ? // 設置是覆蓋性設置? ? ?
? */
? var div = document.getElementsByTagName('div')[0];
? // console.log(div.innerText);? //are you ok?? // 獲取文本內(nèi)容
? // div.innerText = 'thank you'; // 設置文本內(nèi)容
? // div.innerText = '<i>thank you</i>'; // 設置文本內(nèi)容
? // console.log(div.innerHTML); // <p>are you ok?</p>
? // div.innerHTML += '<i>thank you</i>';? //使用+=拼接原來的內(nèi)容
? // 獲取標簽屬性
? // console.log(div.getAttribute('id')); // divId
? // 設置標簽屬性
? // div.setAttribute('index','666');
? // div.setAttribute('id','good');
? // 移除標簽的屬性
? // div.removeAttribute('num');
? // div.removeAttribute('id')
? // 獲取標簽的行內(nèi)樣式
? // console.log(div.style);
? // console.log(div.style.color);
? // div.style.color = 'yellow';
? // css中的樣式名叶眉，如果是多個單詞組成的，在js要使用小駝峰寫法
? // div.style.fontSize = '50px';
? // 獲取設置標簽的類名
? // console.log(div.className);
? // div.className = 'green';
? // div.className += ' green';
