1.DOM介紹
(1)什么是DOM
- DOM：文檔對象模型。DOM 為文檔提供了結構化表示，並定義了如何通過腳本來訪問文檔結構。目的其實就是為了能讓js操作html元素而制定的一個規范。
- DOM就是由節點組成的。
(2)解析過程
- HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。然后操作的時候修改的是該元素的屬性。
- DOM樹（一切都是節點）
DOM的數據結構如下：
上圖可知，在HTML當中，一切都是節點：（非常重要）
-
元素節點：HMTL標簽。
-
文本節點：標簽中的文字（比如標簽之間的空格、換行）
-
屬性節點：：標簽的屬性。
整個html文檔就是一個文檔節點。所有的節點都是Object。
(3)DOM可以做什么
-
找對象（元素節點）
-
設置元素的屬性值
-
設置元素的樣式
-
動態創建和刪除元素
-
事件的觸發響應：事件源、事件、事件的驅動程序
1.獲取DOM的方式
<script> console.log(window); //加載出窗口 console.log(document); //打印出文檔 console.log(document.documentElement); //打印文檔中的元素 console.log(document.body); //打印文檔的body // 通過id 獲取 var oDiv = document.getElementById("active"); console.log(oDiv); // 獲取到該標簽下的內容 var oTag = document.getElementsByTagName("div")[0]; console.log(oTag); // div標簽 //通過類名來獲取,獲取的也是偽數組,多個DOM對象 var oActive = document.getElementsByClassName("box"); console.log(oActive); for(var i = 0; i< oActive.length;i++){ //樣式設置 oActive[i].style.backgroundColor = "yellow"; } //救命稻草 var oD = document.querySelectorAll("div p"); console.log(oD); oD .forEach(function (item, index) { console.log(item) // <p>倚天屠龍記</p> }) </script>
事件的三要素：事件源、事件、事件驅動程序
總結如下：
-
事件源：引發后續事件的html標簽。
-
事件：js已經定義好了（見下圖）。
-
事件驅動程序：對樣式和html的操作。也就是DOM。
<title>Title</title>
<script>
/*窗口加載 1.先去加載文檔 2.再去加載圖片*/
window.onload = function () { //此時如果不加載窗口,文檔是沒有加載進來的
console.log(document);
console.log(document.getElementById('btn'));
// document.getElementById("btn").onclick = function () {
// alert(1);
// };
document.getElementById("btn").onmouseover = function(){
console.log("鼠標懸停了")
};
document.getElementById("btn").onmouseout = function(){
console.log("鼠標離開了")
}
}
</script>
</head>
<body>
<button id ="btn">點我</button>
常見事件
(2)對標簽值的操作
innerText
//設置文本 var oDiv=document.getElementById('box'); oDiv.innerText='哈哈哈'
innerHTML
//既可以設置文本 又可以設置標簽 設置 set 獲取 get 點語法(set方法和get方法) oDiv.innerHTML='<h3>嘿嘿嘿</h3>'
(3) 獲取標簽內容值
//只獲取所有(當前標簽和子標簽)文本內容 console.log(oDiv.innerText); //獲取父標簽中所有標簽元素(子標簽,空格,換行,文本) console.log(oDiv.innerHTML);
(4)對表單控件value的操作
//設置value值 只適應於表單控件元素 document.getElementById('user').value = 'alex'; console.log(document.getElementById('user').value);
(5)對標簽的css操作(樣式操作)
xxx.style.css的屬性key='值'
盒子顏色的切換
var oDiv = document.getElementsByClassName('box')[0]; var isRed = true; oDiv.onclick = function () { if (isRed) { //this 誰做的事件操作 this指向誰 this.style.backgroundColor = 'green'; this.style.width = '400px'; isRed = false; } else { this.style.backgroundColor = 'red'; isRed = true; } }
(6)對標簽屬性的操作
<script>
var oDiv = document.getElementsByClassName("box")[0];
var oBtn = document.getElementById("btn");
var isShow = true;
oBtn.onclick = function () {
if(isShow){
oDiv.id = "box1";
oDiv.title = "hhhh";
console.log(oDiv.className); //box
oDiv.className = oDiv.className+"active";
isShow = false
}else{
oDiv.className = "box";
isShow = true
}
}
</script>
DOM的操作(創建,追加,刪除)
js中的面向對象
定時器
1. DOM的操作(創建,追加,刪除)
(1)DOM節點的獲取
-
parentNode 獲取父級標簽
-
nextElementSibling 獲取下一個兄弟節點
-
children 獲取所有的子標簽
<script>
var oP = document.getElementById("wuxia");
console.log(oP.parentNode); // 父級div標簽下的所有內容
console.log(oP.nextElementSibling.innerText); //蕭峰
console.log(oP.nextSibling.innerText); // IE瀏覽器
var a = oP.nextElementSibling|| oP.nextSibling;
console.log(a);
console.log(oP.parentNode.childen);
</script>
(2) DOM的增刪操作
創建 createElement()
//既可以創建已有的標簽,還可以創建自定義的標簽 var oDiv = document.createElement('div')
追加 appendChild() 父子標簽操作
父.appendChild(oDiv);
刪除 removeChild()
父.removeChild(子節點);
自己.parentNode.removeChild(自己)
插入insertBefore()
父.insertBefore(新的子節點,要參考的節點)
利用創建刪除實現隱藏代碼示例
<script>
var oBtn = document.querySelector("#btn");
var oDel = document.querySelector("#del");
var oFather = document.querySelector(".father");
var oP = null;
var oA = null;
oBtn.onclick = function(){
//創建 dom p標簽
oP = document.createElement("p");
oA = document.createElement("a");
//追加到父級標簽中
oFather.appendChild(oP);
oFather.insertBefore(oA,oP);
//設置對象屬性值
oA.href = 'http://www.baidu.com';
//設置值
oA.innerText="百度";
oP.innerHTML = "alex";
oP.setAttribute("class","active")
};
oDel.onclick = function(){
//如果oP對象存在就結束程序
if (!oP){
return;
//
}else{
console.log(oFather);
//將增加的p標簽移出
oFather.removeChild(oP)
}
}
</script>
使用js模擬hover選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
ul{
width: 600px;
height: 80px;
line-height: 80px;
text-align:center;
overflow:hidden;
}
ul li{
float:left;
margin: 0 10px;
width: 80px;
height: 80px;
background: darkturquoise;
color: #fff;
}
ul li.active{
background: red;
}
</style>
</head>
<body>
<ul>
<li>舉</li>
<li>頭</li>
<li>望</li>
<li>明</li>
<li>月</li>
</ul>
<script>
var lists = document.getElementsByTagName("li");
for(var i =0;i<lists.length;i++){
lists[i].onclick = function(){
//在修改當前盒子樣式之前,現將所有盒子的類名置空
for(var j=0; j<lists.length;j++){
lists[j].className ="";
}
this.className = "active"; //修改當前 鼠標進入盒子的樣式
}
}
</script>
</body>
</html>
選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
}
ul li a{
text-decoration: none;
color:black;
}
li.active {
background-color: darkcyan;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: darkgrey;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div>
<div id="tab">
<ul>
<li class = "active">
<a href="javascript:void(0);">首頁</a>
</li>
<li class = "active">
<a href="javascript:void(0);">新聞</a>
</li>
<li class = "active">
<a href="javascript:void(0);">圖片</a>
</li>
</ul>
<p class="active">首頁內容</p>
<p>新聞內容</p>
<p>圖片內容</p>
</div>
</div>
<script>
var lists = document.getElementsByTagName("li");
var oPs = document.getElementsByTagName("P");
// var i;
//i=3 變量提升 會導致 變量 是一個全局作用域
//var 聲明變量 全局作用域,存在變量提升
for(var i= 0; i<lists.length;i++){ //為了給每個dom添加事件
lists[i].currentIndex = i;
console.dir(lists[i]);
lists[i].onclick = function(){
for(var j = 0; j<lists.length;j++){
lists[j].className = "";
oPs[j].className = '';
}
this.className = "active";
oPs[this.currentIndex].className = 'active'
}
}
</script>
</body>
</html>
2.js中的面向對象
(1)使用Object或對象字面量創建對象
// 構造函數方式創建對象 let person = new Object(); person.name = 'alex'; person.fav = function () { console.log(this); } //字面量方式創建 使用最多 var person2 = { name:'wusir', age:19, fav:function () { alert(this.age); } } person2.fav();
3.定時器
事件點擊案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="f1(this);"> 提交 </button> <button id="btn2"> 確認 </button> <div id="xxx"> 大海啊,全是水 </div> <script> function f1(ths) { ths.style.color = 'red'; var div1 = document.getElementById('xxx'); div1.style.color = 'yellow'; } var btn2 = document.getElementById('btn2'); btn2.onclick = function () { this.style.color = 'blue'; } </script> </body> </html>
鼠標焦點案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="username" value="請輸入內容"> <script> //獲得焦點 var inpEle = document.getElementById('username'); inpEle.onfocus=function () { if(this.value === '請輸入內容'){ this.value=''; } }; //失去焦點 inpEle.onblur=function () { console.log('>>>>>>',this.value.trim()) //打印出來 if (this.value.trim().length ===0){ this.value='請輸入內容'; } } </script> </body> </html>
寫一個小米商城的主頁 實戰
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="小米商城首頁.css"> </head> <body> <div> <div class="nav"> <div class="nav-center"> <div class="nav-left"> <a href="javascript:void (0)">小米商城</a><span> |</span> <a href="javascript:void (0)">MIUI</a><span> |</span> <a href="javascript:void (0)">lot</a><span> |</span> <a href="javascript:void (0)">雲服務</a><span> |</span> <a href="javascript:void (0)">金融</a><span> |</span> <a href="javascript:void (0)">商城</a><span> |</span> <a href="javascript:void (0)">小城</a><span> |</span> <a href="javascript:void (0)">小米城</a><span> |</span> <a href="javascript:void (0)">小城</a><span> |</span> <a href="javascript:void (0)">小米城</a><span> |</span> <a href="javascript:void (0)">小城</a><span> |</span> <a href="javascript:void (0)">小商城</a><span> |</span> </div> <div class="nav-right"> <a href="javascript:void (0)">登錄</a><span> | </span> <a href="javascript:void (0)">注冊</a><span> | </span> <a href="javascript:void (0)">消息通知</a><span> | </span> <a href="javascript:void (0)">購物車</a><span> | </span> </div> </div> </div> </div> <div class="content_father"> <div class="content1"> <div class="content1-left"> <a href="" class="logo"> <img src="logo.png" alt=""> </a> </div> <div class="content1-center"> <a href="javascript:void (0)">小米手機</a> <a href="javascript:void (0)">紅米</a> <a href="javascript:void (0)">電視</a> <a href="javascript:void (0)">筆記本</a> <a href="javascript:void (0)">家電</a> <a href="javascript:void (0)">新品</a> <a href="javascript:void (0)">路由器</a> <a href="javascript:void (0)">智能硬件</a> <a href="javascript:void (0)">服務</a> <a href="javascript:void (0)">社區</a> </div> <div class="content1-right"> <div class="btn_div"> <input type="submit" class="search-btn"> </div> <div class="a_div" id="a_div"> <a href="">小米8</a> <a href="">小米MIX2S</a> </div> <div class="input_div"> <input type="text" class="input_search" id="input_search"> </div> </div> </div> <div class="content2"> <div class="content2-left"> <ul type="none"> <li><a href="">手機 電話卡</a><span>></span></li> <li><a href="">手機 電話卡</a><span>></span></li> <li><a href="">手機 電話卡</a><span>></span></li> <li><a href="">手機 電話卡</a><span>></span></li> <li><a href="">手機 電話卡</a><span>></span></li> <li><a href="">手機 電話卡</a><span>></span></li> <li><a href="">手機 電話卡</a><span>></span></li> <li><a href="">手機 電話卡</a><span>></span></li> <li><a href="">手機 電話卡</a><span>></span></li> <li><a href="">手機 電話卡</a><span>></span></li> </ul> </div> <div class="content2-right"> <img src="lunbotu.png" alt=""> </div> </div> </div> </div> <script> var inpEle = document.getElementById('input_search'); var aEle = document.getElementById('a_div');//獲取2個a標簽 inpEle.onfocus=function () { //獲得焦點 變長 變成200px this.style.width='200px'; this.style.border='1px solid #ff6700' aEle.style.display='none';//隱藏標簽 } inpEle.onblur=function () { this.style.width='100px'; this.style.borderColor='#eee' aEle.style.display='block';//變成塊級標簽 this.style.borderRight='#fff';//右邊框的樣式變成白色 } </script> </body> </html>
小米商城首頁.css
body{
margin: 0;
padding: 0;
}
.nav{
background-color: black;
height: 40px;
width: 100%;
/*text-align: center;*/
}
.nav-center{
width: 90%;
height: 40px;
margin-left: 5%;
}
.nav-left{
float: left;
height: 40px;
line-height: 40px;
}
.nav-right{
float: right;
height: 40px;
line-height: 40px;
}
.nav-center a{
color: #b0b0b0;
text-decoration: none;//去掉下划線
font-size: 12px;
}
.nav-center a:hover{
color: white;//鼠標放上去要變成白色
}
.nav-center span{
color: #424242;
}
/*#################*/
/*content_father是整個中間class*/
/*content1是第一層*/
/*content2是第二層*/
/*中間像左邊浮動 搜索像右邊*/
.content1 .content1-left,.content1 .content1-center{
float:left;
}
.content1 .content1-right{
float:right;
}
/*在content1中清除浮動*/
.content1:after,.content2:after{
content: '';
display: block;
clear: both;
}
/*設置寬高*/
.content1{
height: 100px;
line-height: 100px;
}
.content_father{
width: 90%;
margin-left: 5%;
}
.logo{
display: inline-block;
float: left;
width: 0px;
margin-top: 22px;
/*width: 50px;*/
/*height: 50px;*/
/*margin-top: 10px;*/
/*background: url("logo.png") no-repeat;*/
/*a是行內標簽*/
/*Display:block;將內斂標簽改為塊級標簽*/
/*Display:inline;將塊級標簽改為內斂標簽*/
}
.content1 .content1-center{
/*設置content1第一層中間位子大小*/
/*margin:外邊距,盒子邊框到附近最近盒子的距離*/
margin-left: 230px;
height: 100px;
}
.content1 .content1-center a{
margin-left: 16px;
font-size: 14px;
/*去掉下環線*/
text-decoration: none;
color:#333;
}
/*設置搜索框一 右邊隱藏*/
.content1 .content1-right .input_search{
display: inline-block;
width: 100px;
height:38px;
font-size: 14px;
border: 1px solid #eeeeee;
/*border-color:#eeeeee;*/
border-right: #fff;
}
/*搜索框一浮動最右邊*/
.input_div{
float:right;
}
/*#設置一個class 2個a標簽*/
.a_div{
float:right;
border: 1px solid #eeeeee;
border-left: #fff;
width: 100px;
height: 40px;
line-height: 40px;
margin-top: 30px;
}
/*按鈕右浮動*/
.btn_div{
float:right;
}
/*給class 2個a標簽設置字體顏色 去掉下划線*/
.a_div a{
font-size: 12px;
color:#757575;
text-decoration: none;
}
/*鼠標懸浮改變背景顏色*/
.a_div a:hover{
background-color: #ff6700;
}
/*設置搜索按鈕*/
.content1 .content1-right .search-btn{
display: inline-block;
width: 44px;
height:44px;
font-size: 14px;
}
/*content2 ul整體調試*/
.content2 .content2-left{
float:left;
width:20%;
height: 425px;
background-color: rgba(0,0,0,0.6);
}
.content2 .content2-left ul{
margin-left: 0;
padding: 0;
/*margin:外邊距,盒子邊框到附近最近盒子的距離.*/
/*padding:內邊距,邊框到內容的距離*/
}
.content2 .content2-left ul a{
text-decoration: none;
margin-left: 10%;
color:#fff;
float: left;
font-size: 14px;
}
/*調試邊距*/
.content2 .content2-left ul span{
float: right;
color:#fff;
margin-right: 10%;
}
/*把ul 鼠標變成小手*/
.content2 .content2-left ul li{
width: 100%;
height: 40px;
line-height: 40px;
cursor:pointer;
}
/*鼠標懸浮變顏色*/
.content2 .content2-left ul li:hover{
background-color: #ff6700;
}
/*圖片占取80%*/
.content2 .content2-right{
float:right;
width:80%;
}
.content2 .content2-right img{
float:right;
width:100%;
height: 425px;
}
iconfont使用
找到圖標管理->我的項目->然后新建項目:
右邊點擊新建項目,用於保存自己常用的圖標;
step 3:項目新建完成后,往項目里添加我們要想使用的圖標,找到圖標庫,搜索一個想要的圖標,然后添加到購物車;
我現在將第一個安卓圖標加入我的項目,點擊加入購物車
step 4:添加到購物車完成后,購物車徽章數字應該顯示1了,點擊右上角的購物車圖標,選擇添加至項目,選擇我們剛剛創建的項目,確定;
自動跳轉到對應的項目里了,如圖:
step 5:接下來一部比較關鍵,將打包好的字體文件下載到本地添加到你的項目中,在項目中引用文件中的iconfont.css文件;
下載下來解壓后的文件如下:
第一步：拷貝項目下面生成的font-face
將解壓的文件夾整體復制到網站目錄
將目錄名重命名為font
使用外聯樣式，連接目錄里面的iconfont.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./font/iconfont.css"> </head> <body> <span class="iconfont icon-sousuo"></span> </body> </html>