JavaScript基础（二）

xiaoxiao2021-02-27 221

1.页面加载事件

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; } </style> <script> window.onload = function() { var demo = document.getElementById("demo"); demo.style.backgroundColor = "red"; } </script> </head> <body> <div id="demo"> </div> </body> </html>

总结：window.onload用法详解: 网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式: 一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。二.通过window.onload来执行脚本代码。第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

2.数组的常用操作

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: #ffff00; } </style> </head> <body> <div> </div> </body> </html> <script> // push 组 var arr = [1,3,5,7]; // 原数组 arr.push(9); //把 9 添加 arr 的最后面 console.log(arr); // 13579 console.log(arr.push(11)); // 返回的是数组的长度 6 console.log(arr); // 1.3.5.7.9.11 // unshift 组 var arr1 = ["a","b","c"]; arr1.unshift("你好"); console.log(arr1); // ["你好", "a", "b", "c"] console.log(arr1.unshift("今天")); // 返回数组的长度 5 console.log(arr1); // pop() 删除最后一个元素并且返回最后一个值 var arrpop = [1,2,3,4,5]; arrpop.pop(); // 删除一次把 5删掉了 [1,2,3,4] console.log(arrpop); // [1,2,3,4] console.log(arrpop.pop()); // 把 4 删掉剩下 [1,2,3] 返回的是 4 console.log(arrpop); // [1,2,3] // shift 删除第一个元素并且返回第一个值 var arrshift = ["a","b","c"]; console.log(arrshift.shift()); // a console.log(arrshift); // [b,c] arrshift.shift(); // 吧b 删掉了，并且返回 b console.log(arrshift); // 只剩下一个c // 连接数组 var aa = [1,2,3]; var bb = ["a","b","c"]; console.log(aa.concat(bb)); // 新的数组 [1, 2, 3, "a", "b", "c"] console.log(aa); console.log(bb); // join 将数组转换为字符串 var arrjoin = ["2015","12","2"]; console.log(arrjoin.join("-")); // 2015-12-2 字符串 console.log(arrjoin.join("+")); // 2015+12+2 console.log(arrjoin.join("*")); // 2015*12*2 console.log(arrjoin); // 结果是原数组不影响本数组 // split 将字符串转换为数组 var txt = "2015-12-2"; var text = "中国山东威海小渔村"; console.log(txt.split("-")); console.log(text.split(" ")); // <div class="one demo test"> </div> </script>

2.1 获取className

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div> <div></div> </div> <div></div> <div></div> <div class="two one"></div> <div></div> <div></div> <div class="one"></div> <div></div> <div></div> <div class="one"></div> </body> </html> <script> var ones = document.getElementsByClassName("one"); // 所有的类名 for(var i=0;i<ones.length;i++) { ones[i].style.backgroundColor = "purple"; } </script>

2.2 封装获取类名兼容性写法

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="demo nav test"></div> <div></div> <div class="demo"></div> <div></div> <div></div> <div></div> <div class="demo"></div> <div></div> <div></div> <div></div> </body> </html> <script> // 分两部分，首先是浏览器支持de function getClassName(classname) { // 形参 // 先看看浏览器支不支持 if(document.getElementsByClassName) { // 如果支持这个写法 return document.getElementsByClassName(classname); // 直接返回所有元素 } // 下面的语句是ie678 执行 // 核心思想把所有的标签都取过来，然后一个一个的判断当前元素的类名是不是 classname //是就留下，不是就走开 // alert(11); var arr = []; //数组用来存储满足条件的元素 var dom = document.getElementsByTagName("*"); // 把所有的标签都取过来 * 所有的 // 去过所有的标签之后，把每一个标签的类名（字符串）转换为数组，只有数组才可以遍历 for(var i=0;i<dom.length;i++) { // 遍历每一个标签 // 把每一个标签的类名转换为数组 var arrName = dom[i].className.split(" "); for(var j=0;j<arrName.length;j++) { // 遍历 arrname if(arrName[j] == classname) { // 判断 arr.push(dom[i]); // 把当前满足条件的元素给 arr } } } return arr; // 返回总的数组 } console.log(getClassName("demo").length); // 实参 </script>

总结：核心思想就是把所有的标签都取过来，然后一个一个的判断当前元素的类名是不是 classname

3. 节点

3.1 父节点

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"> <div id="xiongda"> <div id="xionghaizi"></div> </div> </div> </body> </html> <script> var xionghai = document.getElementById("xionghaizi"); console.log(xionghai.parentNode.parentNode.id);// demo </script>

3.2 兄弟节点

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div>1</div> <div id="two">2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </body> </html> <script> var two = document.getElementById("two"); var next = two.nextElementSibling || two.nextSibling;// two的下一个节点。就是 3 next.style.backgroundColor = "purple"; // 设置3的背景为紫色 </script>

3.3 第一个孩子

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="father"> <div class="son">123</div> <div class="son">123</div> <div class="son">123</div> <div class="son">123</div> <div class="son">123</div> </div> </body> </html> <script> var father = document.getElementById("father"); // father.firstChild.style.backgroundColor = "gray"; var first = father.firstElementChild || father.firstChild; // 兼容得到第一个亲儿子 var last = father.lastElementChild || father.lastChild; // 兼容得到最后一个儿子 first.style.backgroundColor = "gray"; last.style.backgroundColor = "gray"; </script>

3.4 孩子们1

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html> <script> var demo = document.getElementById("demo"); // alert(demo.childNodes.length); // 结果是 7 个，包含了 4个换行 var nodes = demo.childNodes; // 获取了所有的孩子节点包含 div 包含换行等等 7 for(var i=0;i<nodes.length;i++) { if(nodes[i].nodeType == 1) { // nodetype 是1 表示元素节点 nodes[i].style.backgroundColor = "red"; } } </script>

3.5 孩子们2

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"> <div>1</div> <div>2</div> <div>3</div> <div>3</div>   </div> </body> </html> <script> var demo = document.getElementById("demo"); // alert(demo.children.length); var child = demo.children; // demo 里面所有的标签 alert(child.length); child[0].style.backgroundColor = "red"; // 第一个孩子 child[child.length-1].style.backgroundColor = "red"; // 最后一个孩子 </script>

4.dom操作

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"> <div class="one"></div> </div> </body> </html> <script> var demo = document.getElementById("demo"); var test = document.createElement("div"); // 创建了一个新的div // a.appendChild(b) 把b放到a 里面 demo.appendChild(test); // 把test 追加到 demo 里面 </script>

4.1 点击动态生成li

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">点击</button> <ul id="demo"> </ul> </body> </html> <script> var btn =document.getElementById("btn"); var demo = document.getElementById("demo"); btn.onclick = function() { var newLi = document.createElement("li"); // 新li demo.appendChild(newLi); } </script>

4.2 插入节点

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"> <div id="xiongda"></div> </div> </body> </html> <script> var demo = document.getElementById("demo"); var newDiv = document.createElement("div"); // 新div var xiongda = document.getElementById("xiongda"); demo.appendChild(newDiv); var newSpan = document.createElement("span"); demo.insertBefore(newSpan,newDiv); // 1 参数插入的子节点 2 参数参照节点 </script>

4.3 设置属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div id="demo" class="demo"> <div id="xiongda"></div> </div> </body> </html> <script> var demo = document.getElementById("demo"); var newDiv = document.createElement("div"); // 新div var xiongda = document.getElementById("xiongda"); demo.appendChild(newDiv); var newSpan = document.createElement("span"); demo.insertBefore(newSpan,newDiv); // 1 参数插入的子节点 2 参数参照节点 newDiv.setAttribute("class","box"); // 等价于 newDiv.className = "box" demo.removeAttribute("class"); </script>

4.4 设置多个css属性cssText

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> </body> </html> <script> var div = document.getElementsByTagName("div")[0]; /* div.style.width = '100px'; div.style.height = '100px'; div.style.backgroundColor = 'pink';*/ div.style.cssText = "width:100px;height:100px; background-color:purple"; </script>

4.5 删除节点

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"> <div id="one"></div> </div> </body> </html> <script> var demo = document.getElementById("demo"); var one = document.getElementById("one"); demo.removeChild(one); </script>

4.6 复制节点

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"> <div id="damao"></div> <div id="ermao"></div> </div> </body> </html> <script> var demo = document.getElementById("demo"); // demo.cloneNode(true); // 克隆节点 demo.parentNode.appendChild(demo.cloneNode(true)); </script>

5.日期、定时器

5.1 声明日期函数

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> var date = new Date(); // 创建日期 console.log(date); // Mon Jul 10 2017 05:25:37 GMT+0800 (CST) console.log(date.getMonth()+1); // 7 月份从0开始所以要+1 console.log(date.getFullYear());// 2017 </script>

5.2 日历

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .date { width: 200px; height: 220px; background-color: #369; margin: 100px auto; text-align: center; padding-top:25px; } .date span { color: white; } .date p { width: 120px; height: 120px; background-color: darkorange; margin:50px auto 0; line-height: 120px; font-size: 70px; } </style> </head> <body> <div class="date" id="date"> <span></span> <p></p> </div> </body> </html> <script> var box = document.getElementById("date"); // 最大盒子 var date = new Date(); // 声明创建日期 var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // date.getDate获取这个星期的第几日。从星期日开始算的。 box.children[1].innerHTML = date.getDate(); box.children[0].innerHTML = date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日 " + arr[date.getDay()]; </script>

5.3 定时器

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> setInterval("console.log('你好吗')",1000); // 每隔一秒钟输出一次你好吗 </script>

5.4 获取毫秒数的几种方法

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> var date = new Date(); console.log(date.getTime()); //1499637296786 console.log(date.valueOf()); // 1499637296786 console.log(Date.now()); // 1499637296786 console.log(+new Date()); // 1499637296786 </script>

5.5 倒计时

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { font-size:30px; color: red; text-align: center; } </style> </head> <body> <div id="demo"></div> </body> </html> <script> var demo = document.getElementById("demo"); var endTime = new Date("2018/12/12 17:30:00"); // 目标时间 setInterval(timer,1000); // 每隔1000毫秒就调用一次 timer 这个函数 // 根据相差的毫秒数，计算出天数小时分钟等等。 function timer() { var nowDate = new Date(); // 现在时间 getTime得到是毫秒 / 10000 后得到的是秒 var second = parseInt((endTime.getTime() - nowDate.getTime()) / 1000); // 根据现在和目标的秒差可以算出相差的时分秒，一小时3600秒。 // 还剩下多少时间单位是秒 // console.log(second); var d = parseInt(second / 3600 / 24); // 天数 second / 3600 得小时 / 24 的天数 //console.log(d); // $ 得到剩余的 h 。 24小时为一天，一个周期。 var h = parseInt(second / 3600 % 24); // 小时用总的小时数 $ 不超过24小时，一天24小时一个周期，取余就是不足的周期有多少小时 console.log(h) var m = parseInt(second / 60 % 60); // 分钟不超过 60分一分有60秒，一分60秒为一个周期。分数取余，得到不足的周期分钟数 console.log(m); var s = second % 60; // 还剩下秒数总结:周期取余得到不足的数。如以总的小时%24得出不足的小时的数量 console.log(s); d<10 ? d = "0" + d : d; // 小于10 的时候我们给与补 0 a++ 不同于 a= a + 1 h<10 ? h = "0" + h : h; m<10 ? m = "0" + m : m; s = s<10 ? "0"+s : s; function flag(obj) { return obj = obj<10 ? "0" + obj : obj; } demo.innerHTML = "距离抢购还剩下" + d + "天" + h + "小时" + m + "分" + s + "秒"; demo.innerHTML = "距离抢购还剩下" + flag(d) + "天" + h + "小时" + m + "分" + s + "秒"; } </script>

6.运算符

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> console.log(0||1); // 1 ｜｜　前面错的，后面对的返回后面 console.log(1||0); // 1　｜｜　两个都对返回前面的 console.log(1||5); // 1 console.log(5||1); // 5 var a = 0 || 1 || 2; var b = 1 || 0 || 3; console.log(a),console.log(b); // 1 1 var a = 1+4&&3; // 3 && 前面是对的，返回后面的结果 var b = 0&& 3+1; // 0 && 前面是错的，直接返回前面 var c= 1 || 2 && 5-1; // 1 alert(a),alert(b),alert(c); </script>

7.字符串

7.1 转换成字符串

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> var num = 10; console.log(typeof typeof num); // "number" console.log("num"); // 是 num 不是 "10" console.log(typeof (num+ "")); // string console.log(typeof String(num)); // string var test = 19; console.log(typeof (test.toString()));　// string var demo = 10; console.log(demo.toString(2)); // 把 demo 里面值转换为 2进制　１０１０ </script>

7.2根据位置返回字符

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> var txt = "abcdefg"; alert(txt.charAt(3)); // 返回索引号3 的字符 d var demo = "今天是周末"; alert(demo.charAt(2)); // 返回是 alert(txt.charCodeAt(3)); // 返回的是相应的字符的 unicode 编码 100 alert(demo.charCodeAt(2)); // 26159 </script>

7.3 检测字符串长度

7.3根据字符串返回位置

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> var txt = "今天是周末是很开心的一天啊"; alert(txt.indexOf("是")); alert(txt.lastIndexOf("是")); // 从后面往前面找，找到后，索引号数的时候从前面往后数 </script>

7.4 url编码和解码

为什么要进行url编码：http://www.cnblogs.com/jerrysion/p/5522673.html

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> var url = "localhost:itcast.cn? name=andy"; var str = encodeURIComponent(url); // 编码的过程 console.log(str); // localhost:itcast.cn? name=andy console.log(decodeURIComponent(str)); // 解码 localhost:itcast.cn? name=andy </script>

7.4 截取字符串

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function() { var div1 = document.getElementById("div1").innerHTML; var div2 = document.getElementById("div2").innerHTML; function onButtonClick(id,txt) { document.getElementById(id).onclick = function() { this.nextSibling.innerHTML = txt; //按钮的下一个兄弟是 span } } // slice onButtonClick("btn1",div1.concat(div2)); onButtonClick("btn2",div1.slice(3)); // 从3开始截取div1 onButtonClick("btn3",div1.slice(3,6)); // 从3开始截取div1 到6 onButtonClick("btn4",div1.slice(-1)); // 从3开始截取div1 到6 // substr onButtonClick("btn5",div1.substr(3)); // 从3开始截取div1 onButtonClick("btn6",div1.substr(3,6)); // 从3开始截取div1 onButtonClick("btn7",div1.substr(-1)); // 从3开始截取div1 onButtonClick("btn8",div1.substr(div1.length-1,1)); // div1.length-1 是最后一个字母 // substring onButtonClick("btn9",div1.substring(3)); onButtonClick("btn10",div1.substring(3,6)); onButtonClick("btn11",div1.substring(6,3)); onButtonClick("btn12",div1.substring(-1)); } </script> </head> <body> <div id="div1">my name is andy！</div> <div id="div2">what's your name?</div> <button id="btn1">concat</button><span></span> <br/> <button id="btn2">slice(3)</button><span></span> <br/> <button id="btn3">slice(3,6)</button><span></span> <br/> <button id="btn4">slice(-1)</button><span></span> <br/> <button id="btn5">substr(3)</button><span></span> <br/> <button id="btn6">substr(3,6)</button><span></span> <br/> <button id="btn7">substr(-1)</button><span></span> <br/> <button id="btn8">substr(-1兼容写法)</button><span></span> <br/> <button id="btn9">substring(3)</button><span></span> <br/> <button id="btn10">substring(3,6)</button><span></span> <br/> <button id="btn11">substring(6,3)</button><span></span> <br/> <button id="btn12">substring(-1)</button><span></span> <br/> </body> </html>

7.5 保留小数

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> var PI = 3.1415; console.log(PI.toFixed(2)); // 3.14 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 </script>

7.6转换大小写

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> 请输入: <input type="text" id="txt"/> <button id="btn">发布</button> <h1 id="big">输入大标题</h1> <span id="small">小标题</span> </body> </html> <script> function $(id) {return document.getElementById(id);} $("btn").onclick = function() { $("big").innerHTML = $("txt").value.toUpperCase(); // 转换为大写 $("small").innerHTML = $("txt").value.toLowerCase() // 转换为小写 } </script>

7.8 验证上传文件

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="file" name="" id="file"/><span></span>  </body> </html> <script> var file = document.getElementById("file"); file.onchange = function() { // 下拉列表 // alert(11); // alert(this.value); // c://imags/1.png1 // 我们要开始进行判断我们上传的文件是否是合法的 // 1.jpg 1.jepg 1.JPG 1.JPEG 都是合法的 // 1.doc.jpg 也是对的 // 后缀名我们应该从后面开始找 . var path = this.value; // 得到完整路径 c://imags/1.png var suffix = path.substr(path.lastIndexOf(".")).toUpperCase(); // 取后缀名 //alert(suffix); // path.lastIndexOf(".") "c://imags/1.png".lastIndexOf(".") == 12 //path.substr(12) "c://imags/1.png".substr(12); .png if(suffix == ".JPG" || suffix == ".JPEG" || suffix == ".PNG") { this.nextSibling.innerHTML = "格式正确"; } else { this.nextSibling.innerHTML = "格式不正确"; } } </script>

8.简单模拟jquery$选择器

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; } </style> </head> <body> <div id="demo">1</div> <div>2</div> <div>2</div> <div class="test">3</div> <div>2</div> <div class="test">3</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> </body> </html> <script> function getClassName(classname) { // 形参 // 先看看浏览器支不支持 if(document.getElementsByClassName) { // 如果支持这个写法 return document.getElementsByClassName(classname); // 直接返回所有元素 } // 下面的语句是ie678 执行 // 核心思想把所有的标签都取过来，然后一个一个的判断当前元素的类名是不是 classname //是就留下，不是就走开 // alert(11); var arr = []; //数组用来存储满足条件的元素 var dom = document.getElementsByTagName("*"); // 把所有的标签都取过来 * 所有的 // 去过所有的标签之后，把每一个标签的类名（字符串）转换为数组，只有数组才可以遍历 for(var i=0;i<dom.length;i++) { // 遍历每一个标签 // 把每一个标签的类名转换为数组 var arrName = dom[i].className.split(" "); // "demo nav test" = ["demo","nav","test"]; // var arrName = ["demo","nav","test"]; // 用来存储每一个类名的数组 for(var j=0;j<arrName.length;j++) { // 遍历 arrname if(arrName[j] == classname) { // 判断 arr.push(dom[i]); // 把当前满足条件的元素给 arr } } } return arr; // 返回总的数组 } /* $('#demo') jquery 里面的 $('.demo') $("div")*/ function $(str) { var s = str.charAt(0); // 相当于取 # . d 取符号 var ss = str.substr(1); // 相当于 demo test iv 除了符号 switch(s) { case "#": return document.getElementById(ss); break; case ".": return getClassName(ss); break; default : return document.getElementsByTagName(str); } } $("#demo").style.backgroundColor = "red"; for(var i=0;i<$(".test").length;i++) { $(".test")[i].style.backgroundColor = 'purple'; } console.log($("div").length); </script>

转载请注明原文地址: https://www.6miu.com/read-11998.html

技术

最新回复(0)