1.JavaScript核心操作——DOM對象
- window對象
通過window對象，可以操作和瀏覽器軟件相關的信息
// window.alert();//調用瀏覽器的對話框操作
// history對象：項目中幾乎不用
//window.history.back();//后退操作,返回上一個訪問歷史
//window.history.forward();//前進操作，訪問下一個訪問歷史
//window.history.go(2);//跳轉到某一個訪問歷史
// location對象：項目中的url操作
/*console.log(location);
console.log(location.href);// 獲取當前網頁的url地址
console.log(location.protocol);//獲取當前訪問協議
console.log(location.host);// 獲取訪問網頁的主機地址
console.log(location.hostname);
console.log(location.post);// 訪問端口*/
// JS代碼控制頁面的指向
/*setTimeout(function() {
location.
}, 2000)*/
/*setTimeout(function() {
location.reload()// 刷新網頁
}, 5000)*/
// screen對象
// screen表示電腦屏幕的意思
// screen.width/height表示的是電腦屏幕的寬度和高度分辨率
// screen.availWidth/screen.availHeight:屏幕的寬度和高度【不包含任務欄】
// console.log(screen.width, screen.height);
// console.log(screen.availWidth, screen.availHeight);
// navigator對象：瀏覽器軟件的信息
- screen對象
- history對象
- location對象
- navigator對象
- document對象
- window事件操作
- onload頁面數據加載事件
- onscroll頁面滾動條事件
- 兼容問題：獲取滾動條卷去網頁高度
2.DOM基礎API操作
- 獲取標簽DOM對象
直接通過id屬性值使用DOM對象
通過id屬性值獲取：document.getElementById()
通過標簽名稱獲取：document.getElementsByTagName()
通過class屬性值獲取：document.getElementsByClassName()
通過name屬性值獲取：document.getElementsByName()
混合獲取，通常是id模式和tagName模式混合獲取
代碼操作
// 直接通過標簽的id屬性，得到標簽對象【 不推薦】
console.log(box);
box.innerText = "可以通過標簽的id屬性直接使用標簽"
// 通過getElemnetById("id")函數，來通過id屬性值獲取標簽，【推薦】
var _box = document.getElementById("box2");
_box.innerText = "通過ElementById()函數獲取標簽對象，進行操作"
// 通過標簽名稱，可以獲取到一組標簽
var _boxes = document.getElementsByTagName("div");
console.log(_boxes);
_boxes[2].innerText = "這是通過getElementsByTagName()獲取的元素"
// 通過標簽的name屬性，也可以獲取到一組標簽
var _jerry = document.getElementsByName("jerry");
console.log(_jerry);
_jerry.innerText = "通過name屬性獲取標簽"
// 通過標簽的class屬性獲取標簽：IE8.0+
var _container = document.getElementsByClassName("container");
console.log(_container);
_container[0].innerText = "這個是通過class屬性獲取到的標簽對象"
操作標簽的DOM對象屬性
- 標準函數操作
獲取屬性值：
var x = getAttribute(name)
設置屬性值：setAttribute(name, value)
移除屬性：removeAttribute(name);
- 方括號操作
獲取屬性值：
var x = dom[“name”];
設置屬性值：dom[“name”]=value;
- 連接符.操作
獲取屬性值：
var x = dom.name;
設置屬性值：dom.name = value;
備注：dom表示dom對象，name表示屬性名稱，value表示屬性值
操作標簽的DOM對象樣式
- 獲取DOM對象樣式
var x = document.currentStyle[name];兼容IE低版本的獲取樣式的方式
var x = getComputedStyle(dom)[name];獲取樣式存在兼容性問題【兼容IE9+ 和其他瀏覽器】
Window.getComputedStyle()方法給出應用活動樣式表后的元素的所有CSS屬性的值，并解析這些值可能包含的任何基本計算。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS代碼操作標簽的樣式</title>
<style>
#box{height: 200px;background:red;}
</style>
</head>
<body>
<div id="box" style="width:100px;"></div>
<script>
/*操作標簽的樣式*/
/*增刪改查*/
/*獲取樣式、設置樣式*/
var _box = document.getElementById("box");
/**************************************************/
// 獲取樣式：有兩種方式
// 1. 獲取樣式的值 100px
// 2. 獲取樣式的數值 100
// 獲取標簽對象的樣式【標簽內嵌、頁面內嵌、外部樣式 都可以獲取到】
// 獲取樣式存在兼容性問題【兼容IE9+ 和其他瀏覽器】
var _h = window.getComputedStyle(_box).height;
var _w = window.getComputedStyle(_box).width;
console.log(_w, _h);
// 兼容IE低版本的獲取樣式的方式【我們只需要了解即可】
// var _h1 = _box.currentStyle.height;
// var _w1 = _box.currentStyle.width;
// 獲取樣式的數值
var _wvalue = _box.offsetWidth;
var _hvalue = _box.offsetHeight;
console.log(_wvalue, _hvalue);
/**************設置樣式************************************/
// 標簽對象.style.樣式名稱 使用這樣的語法，是用來操作標簽內嵌樣式的！
// 給標簽設置樣式，統一使用 標簽對象.style.樣式名稱 = 樣式值;
_box.style.width = "300px";
</script>
</body>
</html>
控制臺輸出結果
- 設置DOM對象樣式
直接通過style進行行內樣式設置。
dom.style.樣式名稱 = 樣式值;
樣式名稱可能是多個單詞組成的 background-color，在JS中進行操作的時候需要將名稱轉換成駝峰命名法：backgroundColor
注意：盡量不要在JS中進行大量樣式的設置。
- 對于標簽內容的操作，有三種方式
- innerText：給指定標簽的開始標簽和結束標簽中增加文本內容【非W3C標準】
- textContent：dom操作，給標簽的開始標簽和結束標簽中增加文本內容，W3C標準操作
- innerHTML：給標簽的開始標簽和結束標簽中，增加一段HTML代碼；慎重使用，容易造成代碼注入漏洞！
擴展：所謂代碼注入漏洞，是用于可以在客戶端通過輸入包含代碼的字符串的方式，將帶入注入到我們的網頁中進行執行的過程
innerHTML的使用規則
對于數據的來源，完全信任的情況下使用它。其他時候禁止使用！
代碼操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS操作標簽屬性</title>
</head>
<body>
<!-- value是input標簽的屬性 -->
輸入年齡：<input type="text" id="uname" value="100">
<script>
var _name = document.getElementById("uname");
// 1. 直接通過 [標簽對象.屬性]來操作標簽的屬性值
_name.value = "120";
_name.id = "age";
console.log(_name.value, _name.id);
// 2. 通過 標簽對象.["屬性名稱"] 來操作標簽的屬性值
_name["value"] = 110;
_name["id"] = "phone";
console.log(_name["value"], _name["id"]);
// 3. DOM操作方式，通過getAttribute("屬性名稱")獲取標簽的屬性值
_name.setAttribute("value", 119);
_name.setAttribute("id", "sex");
// _name.className = "sex";
_name.removeAttribute("value");
console.log(_name.getAttribute("value"), _name.getAttribute("id"));
</script>
</body>
</html>
備注：在使用原生JS操作標簽的屬性時，規則如下
- id屬性、title屬性，建議通過 標簽對象.屬性名稱 的語法進行處理。
- class屬性，建議通過標簽對象.className 的語法進行處理。
- 其他屬性，建議使用set/getAttribute()的語法進行處理。
刪除value屬性。。。。：這樣的語法是不能刪除屬性的
_name.value = null;
3.DOM核心API操作
節點屬性API——獲取元素定位
- 元素的尺寸(寬度、高度)、位置(top.left)
| 屬性/函數名稱 | 描述 |
|---|---|
| offsetWidth | 獲取元素寬度；包含padding值\border值 |
| offsetHeight | 獲取元素高度；包含padding值\border值 |
| offsetTop | 獲取元素距離瀏覽器頂部的距離 |
| offsetLeft | 獲取元素距離瀏覽器左邊的距離 |
備注：如果父元素進行了relative/absolute定位，offsetTop/offsetLeft就是相對父元素的頂部和左邊的距離，如果父元素默認定位，就是相對瀏覽器窗口的距離
備注：獲取網頁可視區域寬度，高度
var clientWidth =
window.innerWidth||document.documentElement.clientWidth;
var clientHeight =
window.innerHeight||document.documentElement.clientHeight;
獲取網頁文檔的寬度、高度
var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;
實例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
position:static;// relative
width:800px;
height:400px;
margin-left:100px;
margin-top:100px;
background-color: #069;
padding:1px;
}
#box{
padding:50px;
width:100px;
height:100px;
/*position:absolute;
top:50px;
left:50px;
margin:50px 0 0 50px;
background-color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
<script>
function getStyle(dom, styleName) {
if(dom.currentStyle) {
return dom.currentStyle[styleName];
} else {
return getComputedStyle(dom)[styleName];
}
}
var box = document.getElementById("box");
console.log(getStyle(box,"width") + "---" + box.offsetWidth);
console.log(getStyle(box, "height") + "---" + box.offsetHeight);
console.log(getStyle(box, "margin-left") + "---" + box.offsetLeft);
console.log(getStyle(box, "margin-top") + "---" + box.offsetTop);
// 獲取網頁可視區域高度、寬度
console.log(window.innerHeight + "--" + window.innerWidth);
console.log(document.documentElement.clientHeight + "--" + document.documentElement.clientWidth);
// 獲取網頁文檔的高度、寬度
console.log(document.body.clientHeight + "--" + document.body.clientWidth);
</script>
</body>
- 節點查詢API
| 屬性/函數名稱 | 描述 |
|---|---|
| hasChildNodes() | 判斷是否包含子節點，返回一個布爾值 |
| children | 獲取元素所有的子元素節點集合/數組 |
| childNodes | 獲取元素所有的子節點集合/數組 |
| firstChild | 獲取元素第一個子節點 |
| firstElementChild | 獲取元素第一個子元素節點 |
| lastChild | 獲取元素最后一個子節點 |
| lastElementChild | 獲取元素最后一個子元素節點 |
| previousSibling | 獲取元素前一個兄弟節點 |
| previousElementSibling | 獲取元素前一個兄弟元素節點 |
| nextSibling | 獲取元素后一個兄弟節點 |
| nextElementSibling | 獲取元素后一個兄弟元素節點 |
| parentNode | 獲取元素的父節點 |
| textContent | 操作(獲取/設置)元素內容 |
- 節點創建/添加API
| 屬性/函數名稱 | 描述 |
|---|---|
| createElement(tagName) | 根據名稱創建一個元素節點 |
| createTextNode(text) | 根據文本創建一個文本節點 |
| insertBefore(new,old) | 在指定的節點前面添加節點 |
| appendChild(child) | 在子節點的末尾追加節點 |
| replaceChild(new,old) | 使用新的節點替換指定的節點 |
| removeChild(child) | 移除指定的子節點 |
| className | 設置標簽class屬性樣式值 |
代碼操作
<body>
<div id="container">
<div id="box">
原有標簽
</div>
</div>
<script>
var container = document.getElementById("container");
var box = document.getElementById("box");
// 創建第一個元素節點
var d = document.createElement("div");
// 創建文本節點
var t = document.createTextNode("這是div文本");
// 創建第二個元素節點
var d2 = document.createElement("p");
var t2 = document.createTextNode("這是p文本");
// 添加元素節點到指定節點中
d.appendChild(t);
// 追加節點到指定節點前面
container.insertBefore(d, box);
// 追加節點到子節點末尾
d2.appendChild(t2);
d2.className = "test";
container.appendChild(d2);
</script>
</body>
4.簡單特效開發
- 抽獎
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽獎</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.container{
width: 500px;height: 600px;background: white;border:solid 2px orange;margin: auto;border-radius: 10px;}
.box,.show,.show_active{width: 450px;height: 450px;border-radius: 50%;}
.box{border:2px orange solid;padding: 10px;margin: 10px auto;}
.show{background-color: pink;font-size: 70px;line-height: 450px;text-align: center;}
.show_active{background-color: #D0D0D0;color:#fff;font-size: 70px;line-height: 450px;text-align: center;}
#btn{width: 200px;height: 40px;background-color:pink;display: block;margin: auto;font-size: 20px;}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div id="show" class="show">
等待抽獎
</div>
</div>
<button id="btn" onclick="playGame()">開始抽獎</button>
</div>
<script type="text/javascript">
var _names=["iphone7 plus","iPad Pro","apple watch","iPad mini4","iphone6","apple"]
//獲取頁面中要使用的標簽對象
var _btn=document.getElementById("btn");
var _show=document.getElementById("show");
var _timer;
var _flag=false;
function playGame(){
if (!_flag){
_flag=true;
_timer=setInterval(function(){
// 獲取隨機下標
var _no=Math.floor(Math.random(_names)*_names.length);
// 獲取中獎禮品
var _n=_names[_no];
// 展示中獎禮品
_show.textContent=_n;
// 修改按鈕的文本
_btn.textContent="停止抽獎";
// 修改展示的樣式
_show.className="show_active"
},50);
}else{
_flag=false;
clearInterval(_timer);
// 修改按鈕的文本
_btn.textContent = "開始抽獎";
// 修改展示的樣式
_show.className = "show";
}
}
</script>
</body>
</html>
效果展示：
抽獎
- 飛機飛行進度演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飛機飛行進度演示</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#nav{position: relative;
height: 128px;
width: 1200px;
border:solid 1px #8E8E8E;
}
#nav img{
position: absolute;
left: 0px;
top:0px;
}
#process{
height: 128px;
background:#FFA042;
width: 0px;
}
</style>
</head>
<body>
<div id="nav">
<div id="process"></div>
</div>
<button onclick="start()">開始飛行</button>
<script type="text/javascript">
// 獲取小飛機圖片
var _plane=document.getElementById("plane");
var _process=document.getElementById("process");
// 定義一個變量，用來存放計時器
var _timer;
// start()函數
function start(){
_timer=setInterval(function(){
// 獲取left的樣式數值
var _left=_plane.offsetLeft;
var _width=_process.offsetWidth;
// 飛行過程left的值增加
_left+=10;
_width+=10;
// 設置隨著飛機的飛行 飛機的圖片發生改變
if (_left>200 && _left<800) {
_plane.setAttribute("src","images/flying.png");
_process.style.background="#6FB7B7";
}else if(_left>800){
_plane.setAttribute("src","images/flyend.png");
_process.style.background="#02DFB2"
}
// 邊界的判斷
if (_left>=1200){
// 停止計時函數
clearInterval(_timer);
}
// 設置樣式
_plane.style.left=_left+"px";
_process.style.width=_width+"px";
},100)
}
</script>
</body>
</html>
效果展示：
飛機飛行進度演示
5.JavaScript事件——Event
事件操作：
事件就是一種發生在網頁上的行為；鼠標單擊、鼠標雙擊、鍵盤按下、鍵盤抬起、獲得焦點、失去焦點等等各種行為
常見的事件：
- 鼠標事件
| 屬性/函數名稱 | 描述 |
|---|---|
| onmouseout | 鼠標離開 |
| onmouseenter | 鼠標進入 |
| onabort | 圖像的加載被中斷。 |
| onblur | 元素失去焦點。 |
| onchange | 域的內容被改變。 |
| onclick | 當用戶點擊某個對象時調用的事件句柄。 |
| ondblclick | 當用戶雙擊某個對象時調用的事件句柄。 |
| onerror | 在加載文檔或圖像時發生錯誤。 |
| onfocus | 元素獲得焦點。 |
| onkeydown | 某個鍵盤按鍵被按下。 |
| onkeypress | 某個鍵盤按鍵被按下并松開。 |
| onkeyup | 某個鍵盤按鍵被松開。 |
| onload | 一張頁面或一幅圖像完成加載。 |
| onmousedown | 鼠標按鈕被按下。 |
| onmousemove | 鼠標被移動。 |
| onmouseout | 鼠標從某元素移開。 |
| onmouseover | 鼠標移到某元素之上。 |
| onmouseup | 鼠標按鍵被松開。 |
| onreset | 重置按鈕被點擊。 |
| onresize | 窗口或框架被重新調整大小。 |
| onselect | 文本被選中。 |
| onsubmit | 確認按鈕被點擊。 |
| onunload | 用戶退出頁面。 |
- 鍵盤事件
| 屬性/函數名稱 | 描述 |
|---|---|
| altKey | 返回當事件被觸發時，"ALT" 是否被按下。 |
| button | 返回當事件被觸發時，哪個鼠標按鈕被點擊。 |
| clientX | 返回當事件被觸發時，鼠標指針的水平坐標。 |
| clientY | 返回當事件被觸發時，鼠標指針的垂直坐標。 |
| ctrlKey | 返回當事件被觸發時，"CTRL" 鍵是否被按下。 |
| metaKey | 返回當事件被觸發時，"meta" 鍵是否被按下。 |
| relatedTarget | 返回與事件的目標節點相關的節點。 |
| screenX | 返回當某個事件被觸發時，鼠標指針的水平坐標。 |
| screenY | 返回當某個事件被觸發時，鼠標指針的垂直坐標。 |
| shiftKey | 返回當事件被觸發時，"SHIFT" 鍵是否被按下。 |
焦點事件：常用于表單元素標簽
onfocus 獲取焦點事件【獲得光標事件】
onblue 失去焦點事件
onchange 內容修改事件，
事件的綁定方式：
1.標簽屬性綁定
2.dom元素綁定
- 鼠標拖拽功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠標拖動</title>
<style type="text/css">
#box{
position:absolute;
width: 336px;
height: 300px;
background-image:url("images/mv33.jpg"); }
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
var _box=document.getElementById("box");
// event事件對象，可以通過事件對象，獲取到鼠標的位置
_box.onmousedown=function(event){
var _clientX = event.clientX;
var _clientY = event.clientY;
var _boxl = _box.offsetLeft;
var _boxt = _box.offsetTop;
var _left = _clientX - _boxl;
var _boxt = _clientY - _boxt;
document.onmousemove = function(event){
var _clientX1 = event.clientX;
var _clientY1 = event.clientY;
var _l = _clientX1 - _left;
var _t = _clientY1 - _boxt;
_box.style.left = _l + "px";
_box.style.top = _t + "px"
}
document.onmouseup=function(event){
document.onmousemove=null;
}
}
</script>
</body>
</html>
效果展示：
鼠標拖拽
擴展
- 瀑布流式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0px;padding:0px;}
#container{width: 1200px;margin:auto;position:relative;}
.box{padding:5px;float:left;position:absolute;left:0;top:0;}
.item{padding:5px;border:solid 1px #888;width:190px;border-radius:5px;}
.item > img{border:none;width:190px;border-radius:5px;vertical-align:bottom;}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
</div>
<script>
// 網頁中的標簽和圖片加載
// 等待網頁中的所有數據加載完成，再執行代碼
// window.onload 頁面數據加載事件
window.onload = function() {
var _container = document.getElementById("container");
// 獲取所有的圖片
var _imgs = document.getElementsByClassName("box");
// 計算一行可以存放多少張圖片
var _containerWidth = _container.offsetWidth;
var _imgWidth = _imgs[0].offsetWidth;
var _cols = Math.floor(_containerWidth / _imgWidth);
// 聲明一個記錄高度的數組
var _height = [];
// 遍歷所有的圖片，開始定位
for(var i = 0; i < _imgs.length; i++) {
if(i < _cols) {
// 保存第一行中每一張圖片的高度
_height.push(_imgs[i].offsetHeight);
_imgs[i].style.left = _imgWidth * i + "px";
} else {
// 計算數組中的最小值
var _minHeight = Math.min.apply(null, _height);
console.log(_minHeight);
var _minIndex = getMinIndex(_minHeight, _height);
console.log(_minIndex);
// i 指的是循環到else的 i與function getMinIndex函數返回值 i不是一個值
_imgs[i].style.top = _minHeight + "px"；
_imgs[i].style.left = _minIndex * _imgWidth + "px";
// 更新最小高度
_height[_minIndex] += _imgs[i].offsetHeight;
}
}
}
/*value是最小值， arr是這個值所在的數組*/
function getMinIndex(value , arr){
for(var i = 0; i < arr.length; i ++) {
if(value == arr[i]){
return i;
}
}
}
</script>
</body>
</html>
效果展示：
瀑布流式布局
