javascript初探-day07 · javaWEB

>### A.今天學什么？ #### 1.使用昨天學習的內容制作一個小例子 - ##### 1.1如何實現點擊一個按鈕，達到全選多選項的效果 - for循環，onclick事件，input框的checked屬性 ``` // body <body> <button id="btn">一鍵全選</button> <input type="checkbox" />籃球 <input type="checkbox" />足球 <input type="checkbox" />乒乓球 <script> var btn = document.getElementById("btn"); var inputs = document.getElementsByTagName("input"); btn.onclick = function () { for(var i = 0;i<inputs.length;i++){ /* checked屬性可以控制是否選中多選項 */ inputs[i].checked = true; } } </script> </body> ``` - ##### 1.2實現再點擊一下，全部不選。 - 使用三目運算符或者if else - inputs[i].checked = (inputs[i].checked === true)?false:true; - 可簡化為inputs[i].checked = inputs[i].checked !== true #### 2.使用js修改標簽樣式 - ##### 2.1修改語法：element.style.attr = value; - margin-top這樣的，要寫成marginTop ``` // body <body> <p id="p">hello world</p> <button id="btn">change</button> <script> /* * 修改樣式： * element.style.attr = value; * margin-top這樣的，要寫成marginTop * */ var btn = document.getElementById("btn"); var p = document.getElementById("p"); btn.onclick = function () { p.style.backgroundColor="red"; } </script> </body> ``` - ##### 2.2使用css和js實現隔行變色效果 - css選擇器 :nth-child()，odd代表奇數項，even代表偶數項，下標從1開始。 - js實現--利用for循環，下標是否可以整除2來決定加什么顏色 ``` // css <style> /* css實現 */ /* :nth-child選擇器，odd代表奇數項 even代表偶數項從1開始而不是從0開始 */ /*ul li:nth-child(odd){ color: red; } ul li:nth-child(even){ color: green; }*/ </style> // body <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> // js實現 var lis = document.getElementsByTagName("li"); for (var i = 0;i < lis.length;i++){ if (i%2 === 0){ lis[i].style.color = "green"; } else{ lis[i].style.color = "red"; } } </script> </body> ``` - ##### 2.3原生js這種方法獲取樣式，只能獲取內聯樣式，有局限性 - 在接下來的例子中，第一次進入頁面需要點擊兩次，第一次給div添加了內聯樣式display: block - 實例：顯示隱藏 ``` // css <style> div{ width: 100px; height: 100px; background-color: red; } </style> // body <body> <div id="div" style="display: block"></div> <button id="btn">顯示/隱藏</button> <script> var btn = document.getElementById("btn"); var div = document.getElementById("div"); btn.onclick = function () { /* 原生js的這種獲取樣式的方法，只能獲取內聯樣式，所以第一次進入頁面需要點擊兩次，第一次給div添加了內聯樣式display: block */ var value = div.style.display; alert(value); // div.style.display = (value === "block")?"none":"block"; if (value === "block"){ div.style.display = "none"; } else{ div.style.display = "block"; } } </script> </body> ``` - ##### 2.4另一種方法獲取樣式 - 適用于高級瀏覽器--getComputeStyle(element,null).attr 第二個參數一般為null ``` // css <style> div{ width: 100px; height: 100px; background-color: red; } </style> // body <body> <div id="test"></div> <script> /* * element.style.attr ，有局限性：只能獲取內聯樣式 * */ var div_test = document.getElementById("test"); // var value = div_test.style.width; // div_test.style.background = "green"; // console.log(value); // 獲取不到為一個空白值 /* 在chrome下獲取內部樣式表和外部樣式表的方法 */ // getComputeStyle(element,null).attr var value = getComputedStyle(div_test,null).width; alert(value); </script> </body> ``` - ##### 2.5給標簽對象增加樣式名 - element.className = ""; - 如果想多個樣式，直接按格式寫就行"current aa" 這樣 ``` // css <style> .current{ color: red; } .aa{ background-color: #3388ff; } </style> // body <body> <p id="p" class="aa">hello world</p> <button id="btn">btn</button> <script> var btn = document.getElementById("btn"); var p = document.getElementById("p"); // 這種方法給p加了樣式以后，class=""之中就變為current了 // 如果想多個樣式，直接按格式寫就行"current aa" 這樣 btn.onclick = function () { p.className = "current aa"; } </script> </body> ``` #### 3節點 - ##### 3.1獲取節點中的文本內容 - element.textContent，可以獲取節點中所有的文本內容 ``` // body <body> <p class="one">hello world <span>good</span></p> <script> var p = document.getElementsByTagName("p")[0]; /* element.textContent，可以獲取節點中所有的文本內容 */ var nodeContent = p.textContent; alert(nodeContent); // hello world good </script> </body> ``` - ##### 3.2節點類型 - 元素節點，nodeType=1 - 屬性節點，nodeType=2 - 文本節點，nodeType=3 - node.nodeValue方法 - 只有文本節點和注釋節點才能被獲取內容，屬性節點得到的為屬性名；其他都是null，。不是重點 ``` // body <body> <p class="one">hello world <span>good</span></p> <script> var p = document.getElementsByTagName("p")[0]; /* element.textContent，可以獲取節點中所有的文本內容 */ var nodeContent = p.textContent; alert(nodeContent); // hello world good // node.nodeValue方法 // 只有文本節點和注釋節點才能被獲取內容，其他都是null， // 屬性節點得到的為屬性名 // 不是重點 alert("屬性節點"+p.getAttributeNode("class").nodeValue); // one alert("元素節點"+p.nodeValue); // null alert("文本節點"+p.firstChild.nodeValue); // 節點類型，元素節點 nodeType=1；屬性節點 nodeType=2；文本節點 nodeType=3 alert(p.nodeType); // 1 元素節點 alert(p.getAttributeNode("class").nodeType); // 2 屬性節點 alert(p.firstChild); // [object text] 并不是span標簽 alert(p.firstChild.nodeType); // 3 文本節點 </script> </body> ``` - ##### 3.3增加節點 - document.createElement("element"); 創建一個元素節點 - document.createTextNode("text"); 創建一個文本節點 - node.appendChild(); 添加一個子節點，末尾添加 - node.insertBefore(node1,node2); 在node2節點之前添加node1節點 ``` // body <body> <div id="parent"> <p id="one">hello world</p> </div> <button id="add">add</button> <script> // 利用js，點擊按鈕，在div中增加一個p標簽，內容為first var add = document.getElementById("add"); var parent = document.getElementById("parent"); var one = document.getElementById("one"); add.onclick = function () { /* document.createElement("element") * 創建一個元素節點 * document.createTextNode("text") * 創建一個文本節點 * node.appendChild(); * 添加一個子節點，末尾添加 * */ var p = document.createElement("p"); var text = document.createTextNode("first"); p.appendChild(text); console.log(p); // <p>first</p> parent.appendChild(p); // 在one節點之前添加p節點 parent.insertBefore(p,one); } </script> </body> ``` - ##### 3.4刪除節點 - 語法 -- parentNode.removeChild(node); ``` // body <body> <ul id="parent"> <li>hello world</li> </ul> <button id="btn">btn</button> <script> /* * 刪除節點語法 * parentNode.removeChild(node); * */ var btn = document.getElementById("btn"); var parent = document.getElementById("parent"); var li = document.getElementsByTagName("li")[0]; btn.onclick = function () { parent.removeChild(li); } </script> </body> ``` - ##### 3.5替換節點 - 語法 -- parentNode.replaceChild(newNode,targetNode); ``` // body <body> <div id="parent"> <p id="child">hello world</p> </div> <button id="btn">btn</button> <script> var btn = document.getElementById("btn"); var parent = document.getElementById("parent"); var child = document.getElementById("child"); btn.onclick = function () { var h4 = document.createElement("h4"); var text = document.createTextNode("哈哈哈哈，想不到吧"); h4.appendChild(text); // parentNode.replaceChild(newNode,targetNode); parent.replaceChild(h4,child); } </script> </body> ``` - ##### 3.6克隆節點 - 語法 -- node.cloneNode(true); - 獲得body -- document.body ``` // body <body> <p>hello world</p> <script> var p = document.getElementsByTagName("p")[0]; var p2 = p.cloneNode(true); console.log(p2); // 給body增加一個p document.body.appendChild(p2); </script> </body> ``` #### 4.DOM事件 - ##### 4.1 focus和blur - onfocus --> 獲取焦點 - onblur --> 失去焦點 - 在事件中，this指向正在執行事件的對象。 ``` // body <body> <input type="text" id="input" /> <script> /* * onfocus --> 獲取焦點 * onblur --> 失去焦點 * 在事件中，this指向正在執行事件的對象。 * */ var input = document.getElementById("input"); input.onfocus = function () { this.style.backgroundColor = "red"; }; input.onblur = function () { this.style.backgroundColor = "green"; } </script> </body> ``` - ##### 4.2 mouse - onmouseover --> 鼠標移動到某元素上時 - onmouseout --> 鼠標移出時 ``` // body <body> <p id="test">hello world</p> <script> /* * onmouseover --> 鼠標移動到某元素上時 * onmouseout --> 鼠標移出時 * */ var p = document.getElementById("test"); p.onmouseover = function () { this.style.color = "red"; }; p.onmouseout = function () { this.style.color = "green"; } </script> </body> ``` - ##### 4.3 onload - window.onload 整個DOM樹加載以及相關圖片資源加載完成之后，執行相關代碼 - 在.js文件中使用該事件，也可以在html文件頂部引入js，一樣可以獲取到標簽對象 ``` // index.js window.onload = function () { var p = document.getElementsByTagName("p")[0]; console.log(p); }; ``` ``` // onload.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>onload</title>   <script src="js/index.js"></script> </head> <body> <p>hello world</p> </body> </html> ``` - ##### 4.4 change - onchange --> 域的內容發生改變時觸發 ``` // body <body> <input type="text"> <script> // onchange --> 域的內容發生改變時觸發 var input = document.getElementsByTagName("input")[0]; input.onchange = function () { this.value = "change"; } </script> </body> ``` - ##### 4.5 submit - onsubmit --> 表單被提交時觸發，要獲取form表單對象，而不是submit對象 ``` // body <body> <form action=""> <input type="text" /> <button type="submit">提交</button> </form> <script> // onsubmit --> 表單被提交時觸發，要獲取form表單對象 // 而不是submit對象 var sub = document.getElementsByTagName("form")[0]; sub.onsubmit = function () { alert("提交失敗"); } </script> </body> ``` - ##### 4.6 瀏覽器改變事件 - window.onresize --> 瀏覽器窗口發生改變時觸發 - window.onscroll --> 窗口滾動條滾動時觸發 ``` // css <style> div{ height: 1000px; background-color: red; } </style> // body <body> <div></div> <script> window.onresize = function () { alert("瀏覽器窗口發生改變時觸發"); }; window.onscroll = function () { alert("窗口滾動條滾動時觸發"); }; </script> </body> ``` - ##### 4.7鍵盤觸發事件 - onkeydown --> 鍵盤按下時觸發 - onkeyup --> 鍵盤釋放時觸發 - onkeypress --> 在鍵盤按鍵按下并釋放一個鍵時觸發 - event.keyCode --> 鍵盤每個鍵對應的鍵盤碼 - 顯示還可以輸入多少字的實例如下代碼塊2 ``` // body <script> /* * onkeydown --> 鍵盤按下時觸發 * onkeypress --> 在鍵盤按鍵按下并釋放一個鍵時觸發 * onkeyup --> 鍵盤釋放時觸發 * * event.keyCode --> 鍵盤每個鍵對應的鍵盤碼 * * */ document.onkeydown = function (ev) { alert(ev.keyCode); } </script> </body> ``` ``` // css <style> em{ color: red; } </style> // body <body> <p>你還可以輸入<em id="show">150</em>/150個字</p> <textarea name="" id="txt" cols="30" rows="10"></textarea> <script> var show = document.getElementById("show"); var txt = document.getElementById("txt"); txt.onkeyup = function () { // 獲取內部文本長度 var length = txt.value.length; show.innerHTML = 150 - length; } </script> </body> </html> ``` #### 5.BOM-window - ##### 5.1 window是什么 - js的頂級作用域就是window - 全局變量是window的屬性 - 方法也是window的方法 ``` // body <script> /* * js的頂級作用域就是window * 全局變量是window的屬性 * 方法也是window的方法 * */ var a = 10; console.log(window.a); // 10 /* this指向 */ function b() { console.log(this); } window.b(); // window </script> </body> ``` - ##### 5.2 window.confirm()方法 - window.confirm("txt") --> 會彈出一個確定和取消的彈框， - 有返回值，確定返回true，取消返回false - 實例 ``` // body <body> <div> <span id="mi">小米8</span> <button id="btn">btn</button> </div> <script> // confirm方法有返回值確定返回true，取消返回false // var result = window.confirm("是否取消"); // alert(result); var btn = document.getElementById("btn"); var mi = document.getElementById("mi"); btn.onclick = function () { var result = window.confirm("你確定不要小米嗎？"); if (result){ mi.style.display = "none"; } else{ mi.style.display = "inline-block"; mi.style.color = "red"; } } </script> </body> ``` #### 6.小米登錄框實現 - ##### 6.1使用方法 - 使用標簽名獲取標簽對象集合 -- document.getElementsByTagName("TagName"); - 使用class名獲取對象集合 -- document.getElementsByClassName("className"); - onclick事件 - 給對象添加屬性 obj.屬性名 = ""; - for(var i = 0;i < 集合.length;i++){循環體} 循環 - 修改className屬性 - 給對象修改樣式 ``` // 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>小米登錄頁</title> <style> *{margin: 0;padding: 0} .form{ width: 400px; border: 1px solid #eee; text-align: center; margin: 50px auto; box-shadow: 0 0 10px 5px #333; } li{ list-style: none; display: inline-block; } ul{ line-height: 50px; border-bottom: 1px solid #eee; } .content{ position: relative; height: 200px; } /* 這里是直系后代，而不是內部的所有div */ .content>div{ position: absolute; width: 100%; height: 100%; } .saoma{ display: none; } input{ width: 360px; height: 40px; margin-top: 20px; } .current{ color: orangered; } </style> </head> <body> <div class="form"> <ul> <li class="current">賬號登錄</li> <li>掃碼登錄</li> </ul> <div class="content"> <div class="account child"> <div><input type="text" /></div> <div><input type="password" /></div> <div><input type="submit" value="立即登錄" /></div> </div> <div class="saoma child"> <img src="images/01.png" alt="掃碼登錄"> </div> </div> </div> <script> var lis = document.getElementsByTagName("li"); var contents = document.getElementsByClassName("child"); /*console.log(lis); console.log(contents);*/ // 1.點擊li，讓正在被點擊的className = "current"，其他的className = "" // 對所有的li進行遍歷，然后給他們一個點擊事件。即使外部循環結束了，點擊事件仍然存在。 for(var i = 0;i < lis.length;i++){ // 自定義一個index屬性給lis中的li lis[i].index = i; // 給li添加一個點擊事件 lis[i].onclick = function () { // 先將所有li的class清空 // 這里不要用 var x in lis 除了索引還會遍歷出很多其他的屬性，造成報錯 for(var x = 0;x < lis.length;x++){ lis[x].className = ""; } //當前項的li的className = "current" this.className = "current"; // 可以得到0 1 看出是哪個li console.log(this.index); // 先將所有的content隱藏 for (var y = 0;y < contents.length;y++){ contents[y].style.display = "none"; } // 讓對應的content出現 contents[this.index].style.display = "block"; } } </script> </body> </html> ``` #### 7.sHover - ##### 7.1sHover是什么 - 它是一個簡單的原生js插件。它可以讓你的展示圖片感應鼠標進入方向，從而讓懸浮層做出不同的運動效果，多個圖片放在一起效果更酷炫噢！它的使用和設置都非常方便，更重要的是它能用在幾乎所有的瀏覽器上啊！（至少IE5及以上吧） - ##### 7.2使用簡單 - sHover是一個純原生JavaScript編寫的小組件，不需要引入JQuery或其他插件就可以使用。使用非常簡單，引入sHover的js文件之后，只需一行代碼，即可讓你的圖片展示瞬間炫酷起來 - ##### 7.3多樣設置 - 有很多不同的效果可以在創建默認的效果之后進行設置，并且設置方法非常簡單。可以設置懸浮層在運動時的許多狀態。 - ##### 7.4超強兼容 - 它的在所有新版本的瀏覽器上都能完美運行，除此之外，它甚至能在IE5及以前的瀏覽器上運行，并且效果幾乎沒有影響 - ##### 7.5官方主頁 - http://www.jq22.com/demo/sHover-master20150718/ ``` <!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>sHover</title> <script src="js/sHover.min.js"></script> <style> #item1{ overflow: hidden; border:1px solid #333; width:280px; height:180px; color: white; } .sIntro{ background: #333; } </style> </head> <body> <div id="item1" class="sHoverItem"> <img id="img1" src="images/01.jpg"> <span id="intro1" class="sIntro"> <h2>h2標題</h2> <p> 段落內容 </p> <button>按鈕</button> </span> </div> <script> var a = new sHover("sHoverItem", "sIntro"); a.set({ slideSpeed: 5, opacityChange: true, opacity: 80 }); </script> </body> </html> ```