🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>### 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> /* * window.onload 整个DOM树加载以及相关图片资源加载完成之后,执行相关代码 * */ window.onload = function () { var p = document.getElementsByTagName("p")[0]; console.log(p); } </script>--> <!-- 这样的话,从js文件夹引出来的也可以放在顶部使用 --> <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> ```