JavaScript

计算机专业同学福利!总结了6年的JavaScript 高级程序设计思维导图，非常全面非常细致。需要拿去! Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。本思维导图对Java繁复的集合框架进行了梳理，并且标注了其中的要点，希望对你有帮助!

JavaScript

• JS： 组成：ECMAScript(es5) BOM DOM 定义变量：var 变量名 = 值; 为什么需要定义变量？需要对同一个值进行多次使用 数据类型：number、string、Boolean、null、undefined(有名无实) 检测类型：typeof number string boolean object undefined function 控制语句： 1、条件语句    if(表达式--Boolean){}else{} switch(){case : break;...} 使用场景： if：范围性、已知结果数量的 switch：已知结果数量的，不易过多 2、循环语句 for(){} while(){} for in 循环中断：break、continue 自定义函数：function 函数名(参数1,参数2,...){} 定时器：setInterval() setTimeout()--递归 clearInterval() clearTimeout() DOM：找元素---元素的值---元素的属性---元素的样式----创建或删除元素 获取元素：除了通过ID选择之外的方式，其它方式获取到的元素都是一组元素而不论其在页面到底有几个元素-----始终是一组元素，与页面中元素存在的个数无关 获取或修改元素的值:双标签---innerHTML  单标签---value 获取或修改元素的属性：元素对象.属性名 获取或修改元素的样式：元素对象.style.属性名 复合时属性去中间-第二个单词首字母大写 例如：background-color---backgroundColor 创建元素：document.createElement('元素名') 删除元素：1、父元素删除子元素--父对象.removeChild(子元素) 2、自身移出---元素对象.remove() 添加元素：父元素.appendChild(子元素) 事件绑定：只能给静态页面中存在的元素进行事件绑定，动态创建添加的元素目前不能绑定事件 json必须要掌握
• day01
  • 变量的定义--数据类型
    • //变量的定义 声明变量 -- var //常量--固定不变的量 数字和字符串都是常量 数据类型: 数字类型 number 字符串 string 在JS中单双引号是一样的 布尔类型 boolean true/false 未定义 undefined null类型 null null本身也是作为值的存在 null和''的区别
  • 运算符
    • + 1、可以用于做数学运算 2、用于拼接 3、类型转换--数字类型转为字符串类型 typeof 用于检测数据类型 - 1、用于做数学运算 2、类型转换---将内容为纯数字的字符串转换为number //NaN 非数字 除法： /(和数学中的一样) %(取余/取模) 比较运算符 =(赋值运算) ==(值相同) ===(真等：类型一致，值相同) 自增自减 ++在前，先+1后赋值 ++在后，先赋值后+1(所在的行运算完毕后+1)
  • 逻辑控制语句
    • 条件语句
      • if和switch如何选择？ 可以用于判断范围性的数据 也可以用于判断常量 适用于有多个结果的条件判断 switch：可以用于判断常量 结果是已知的 结果的个数不易过多 pp
      • if条件语句
        • if条件语句 1、if(条件-Boolean){执行体} 2、if(){}else{} 3、if(){}else if(){}...else{} 可以用于判断范围性的数据 也可以用于判断常量 适用于有多个结果的条件判断 /*如果省略大括号不写，注意条件的后面只能有一行语句*/
      • switch条件语句
        • p
    • 循环语句
      • p
      • for循环
      • while循环
• day02
  • 函数
    • 函数：用于执行特定功能的代码块 函数只有在被调用的时候才会执行
    • 常用系统函数
      • praseInt("字符串")
        • 讲一个内容为纯数字的字符串转换为整数 如果数字中间有符号或者字母,则转换到第一个非数字(包括加减乘除,等号和符号)的前一位数字
      • praseFloat("字符串")
        • 将一个内容为数字的字符串转换为可保留小数的数字 默认去掉小数点后末尾为0的值
      • isNaN()
        • isNaN() 是否是非数字 true-是非数字
    • 自定义函数
      • 自定义函数的语法：function 函数名(){} 注意点：函数名不能是关键字(name) 驼峰命名法 多个单词拼接第一个单词的首字母小写第二个单词的首字母大写changeColor
      • 有参函数
        • function 函数名(参数1,参数2,...){} //形式参数--形参 //实际参数--实参 //形参和实参的区别
      • 无参函数
    • 函数返回值return
      • //return 返回值 结束函数
• day03
  • p
  • BOM
    • p
    • widows方法
      • p
      • 打开/关闭浏览器
      • 定时器
        • p
  • DOM
    • p
    • document对象
      • p
      • 获取页面元素对象
        • p //通过标签名获取元素 var btns = document.getElementsByTagName('button'); console.log(btns); //通过class名进行查找 var clsBtns = document.getElementsByClassName('btn'); console.log(clsBtns); //通过ID获取元素 var idBtn = document.getElementById('id-btn'); console.log(idBtn); //通过name属性获取元素 var nBtns = document.getElementsByName('n-btn'); console.log(nBtns); /* 通过className、TagName、Name获取到的一定是一组元素对象 无论页面中有多少该元素，以上三种方式获取到的都是一组数据，无非是一组中的对象个数发生了改变 例如：页面中有三个元素，获取到的是一组数据，一组中有三个对象 页面中有一个元素，获取到的是一组数据，一组中只有一个对象 通过ID获取到的一定是唯一的元素对象 */
        • getElementsById
        • getElementsByName
        • getElementsByTagName
      • innerHTML和outerHTML
        • p var 标签变量名 = document.getElementsByTagName('标签')[0]; 格式: 标签或者标签索引.innerHTML(或者outerHTML)='里面是要修改的内容(可以修改标签本身)'
      • 注意document.write属性
        • function change(){ document.write('write写的内容会覆盖掉页面中原有的静态内容'); } //只有写在函数里面才会覆盖掉页面原有的内容
      • disabled属性
        • <button>getAttr</button> <button>changeVal</button> <hr> <input type="text" name="userName" value="Juni" disabled> <script type="text/javascript"> //获取元素 var btns = document.getElementsByTagName('button'); var inNode = document.getElementsByTagName('input')[0]; btns[0].onclick = function(){ console.log(inNode.name); console.log(inNode.disabled); } btns[1].onclick = function(){ inNode.disabled = false; inNode.name = 'uname'; //操作可简写的属性时，使用true/false来改变其状态 } </script>
      • checked属性
        • /* 1、获取所有的input元素 2、判断当前的input元素选中状态 3、修改元素状态 */ //1、获取所有的input元素 var inputNodes = document.getElementsByTagName('input'); var btns = document.getElementsByTagName('button'); btns[0].onclick = function(){ //使用循环对每一个input标签的状态进行判断 for(var i=0;i<inputNodes.length;i++){ //2、判断当前的input元素选中状态 if(!inputNodes[i].checked){ //3、修改元素状态 inputNodes[i].checked = true; } } } btns[1].onclick = function(){ for(var i=0;i<inputNodes.length;i++){ if(inputNodes[i].checked){ inputNodes[i].checked = false; } } } //反选 btns[2].onclick = function(){ for(var i=0;i<inputNodes.length;i++){ if(inputNodes[i].checked){ inputNodes[i].checked = false; }else{ inputNodes[i].checked = true; } } } </script>
      • 全选全不选
        • 全选/全不选<input type="checkbox" name=""> <br> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <script type="text/javascript"> var inArr = document.getElementsByTagName('input'); inArr[0].onclick = function(){ //获取全选按钮的当前状态 var state = inArr[0].checked; for(var i=1;i<inArr.length;i++){ inArr[i].checked = state; } } </script>
• day06
  • Date对象
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>日期对象</title> </head> <body> <p></p> <script> var timeNode = document.getElementsByTagName('p')[0]; function showTime(){ /* date 语法：var 变量 = new Date() */ var date = new Date(); // console.log(date); var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); hours = check(hours); minutes = check(minutes); seconds = check(seconds); var time = year + '年' +month + '月' +day +'日 ' + hours+":"+minutes+":"+seconds; timeNode.innerHTML = time; setTimeout(showTime,1000); } //给时分秒在小于10时,在其前面拼接 0 function check(timeType){ if(timeType < 10){ timeType = '0' + timeType; return timeType; } return timeType; } showTime(); </script> </body> </html>
  • 轮播图
    • 法1.使用overflow 法2.使用index 法3.使用修改标签属性(下列是修改标签img属性) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>轮播图</title> </head> <body> <img src="img/b1.jpg" alt=""> <script type="text/javascript"> var imgNode = document.getElementsByTagName('img')[0]; var i = 0; function changeImg(){ i++; if(i>=5){ i = 1; } imgNode.src = './img/b' + i + '.jpg'; setTimeout(changeImg,1000); } changeImg(); </script> </body> </html>
  • 动态显示数据
  • JSON对象
    • p 动态显示数据: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> td{ text-align: center; } p{ text-align: center; } </style> </head> <body> <p><button type="button">添加</button></p> <table border="1" cellspacing="0" cellpadding="0" width="500px"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>职务</th> </tr> </table> <script type="text/javascript"> var btn = document.getElementsByTagName('button')[0]; var tabNode = document.getElementsByTagName('table')[0]; // var arr = ['张三',12,'女','程序猿鼓励师']; var jsonArr = [ {'name':'马云','age':50,'sex':'男','job':'前任CEO'}, {'name':'张勇','age':48,'sex':'男','job':'现任CEO'}, {'name':'马化腾','age':50,'sex':'男','job':'前任CEO'}, {'name':'安东尼','age':30,'sex':'男','job':'社会人'} ]; btn.onclick = function(){ for(var i=0;i<jsonArr.length;i++){ var trNode = document.createElement('tr'); var tdNode01 = document.createElement('td'); var tdNode02 = document.createElement('td'); var tdNode03 = document.createElement('td'); var tdNode04 = document.createElement('td'); tdNode01.innerHTML = jsonArr[i].name; tdNode02.innerHTML = jsonArr[i].age; tdNode03.innerHTML = jsonArr[i].sex; tdNode04.innerHTML = jsonArr[i].job; trNode.appendChild(tdNode01); trNode.appendChild(tdNode02); trNode.appendChild(tdNode03); trNode.appendChild(tdNode04); tabNode.appendChild(trNode); } } </script> </body> </html>
  • 正则表达式RegExp
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <button type="button">验证</button> <input type="text" name="" id="" value="" /> <script type="text/javascript"> /* 什么时候需要使用正则表达式？ 当需要去匹配的规则比较复杂的时候，就可以选择使用正则表达式 要求： 1、知道里面的字符大概代表的意思 2、简单的正则表达式会写 3、对于没见过的或不会写的，要学会百度 RegExp */ var btn = document.getElementsByTagName('button')[0]; btn.onclick = check; function check(){ var inNode = document.getElementsByTagName('input')[0]; //验证手机号是否是11位 ^代表开始 $代表结束 {n} ///^[0-9]{11}$/ 纯数字总共11位 ///^[0-9a-z]{11}$/ 包含数字和字母 总共11位 //{n} 总共n位 {n,}至少n位 {n,m}位数在n~m之间 var phoneReg = /^1[0-9]{10}$/; //获取用户输入的值 var val = inNode.value; if(phoneReg.test(val)){ console.log('输入正确'); }else{ console.log('输入错误'); } } </script> </body> </html>
• day05
  • 节点的创建/添加/删除
    • p
    • 创建
      • <!-- 动态创建、删除节点 --> <button>add Node</button> <div></div> <script type="text/javascript"> /* 要添加的元素是什么？ -- h3创建元素-document.createElement(元素名称); 元素中的内容是什么？ innerHTML 要将创建好的元素添加到哪里？放在div中 -- 父元素.appendChild(要添加的子元素 [创建的元素]) */ var btn = document.getElementsByTagName('button')[0]; var divNode = document.getElementsByTagName('div')[0]; btn.onclick = function(){ //创建元素 var h3Node = document.createElement('h3'); //添加内容 h3Node.innerHTML = '新创建的元素节点'; //添加元素 divNode.appendChild(h3Node); } </script>
    • 添加和删除
      • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> td{ padding: 5px; text-align: center; } div{ text-align: center; } span{ cursor: pointer; margin-right: 10px; } </style> </head> <body> <div> <button type="button">add</button> <button type="button">del</button> </div> <table width="50%" align="center" cellspacing="0" cellpadding="0"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </tr> </table> <script type="text/javascript"> /* 1、创建元素节点 2、添加内容 3、找到其唯一的父元素并将子元素添加进去 */ var btnArr = document.getElementsByTagName('button'); var tabNodes = document.getElementsByTagName('table'); var i = 1; btnArr[0].onclick = function(){ //创建一个tr节点 var trNode = document.createElement('tr'); //创建td节点 var tdNode01 = document.createElement('td'); var tdNode02 = document.createElement('td'); var tdNode03 = document.createElement('td'); var tdNode04 = document.createElement('td'); //创建span var spanNode01 = document.createElement('span'); var spanNode02 = document.createElement('span'); spanNode01.innerHTML = '查看'; spanNode02.innerHTML = '删除'; tdNode04.appendChild(spanNode01); tdNode04.appendChild(spanNode02); //给td添加内容 tdNode01.innerHTML = '赵丽颖'+i; tdNode02.innerHTML = '女'; tdNode03.innerHTML = 31; //添加元素 trNode.appendChild(tdNode01); trNode.appendChild(tdNode02); trNode.appendChild(tdNode03); trNode.appendChild(tdNode04); tabNodes[0].appendChild(trNode); i++; } /* 1、找到要删除的元素 2、指定删除方式 */ btnArr[1].onclick = function(){ var trNodes = document.getElementsByTagName('tr'); // tabNodes[0].removeChild(trNodes[trNodes.length-1]); if(trNodes.length>1){ trNodes[trNodes.length-1].remove(); } } </script> </body> </html>
  • 点名器练习
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> *{ margin: 0; } h3,div{ text-align: center; } h3{ height: 45px; color: white; line-height: 45px; margin-bottom: 20px; background: #008866; letter-spacing: 15px; box-shadow: 2px 2px 4px #336688; } input{ height: 45px; font-size: 20px; text-align: center; margin-bottom: 20px; } button{ width: 120px; height: 45px; font-size: 20px; border: none; outline-color: #008866; } </style> </head> <body> <h3>云梦山</h3> <div id=""> <input type="text" disabled><br> <button>开始</button> </div> <script type="text/javascript"> /* 1、数组 2、随机数 3、定时器 */ var time = null; var val = ""; var seconds = 20; var arr = ['郝军伟','李宁宁','高鹏','熊建立','徐杨杨']; var btn = document.getElementsByTagName('button')[0]; var inNode = document.getElementsByTagName('input')[0]; inNode.value = arr[0]; btn.onclick = function(){ if(time == null){ inNode.style.color = 'black'; start(); btn.innerHTML = '停止'; btn.style.color = 'red'; return; } stop(); } /* 开始定时器 */ function start(){ //生成一个在数组长度范围内的随机数,将其作为数组的下标得到对应的值,将值在元素中替换 var index = Math.floor(Math.random()*arr.length);//获取随机数作为数组下标 val = arr[index];//拿到对应的结果 //修改或获取元素内容,双标签使用innerHTML,单标签使用的是value属性 inNode.value = val; time = setTimeout(start,seconds); } function stop(){ clearTimeout(time); time = null; btn.innerHTML = '开始'; btn.style.color = 'black'; inNode.style.color = 'red'; } </script> </body> </html>
  • 省市县级联
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <select name="" onchange="creat()"> <option value="">请选择省</option> </select> <select name="" onchange="creat03()"> <option value="">请选择市</option> </select> <select name=""> <option value="">请选择县</option> </select> <script type="text/javascript"> var arr1=['河南省','湖北省','黑龙江省']; var arr2=[['--请选择城市--'],['郑州市','周口市','新乡市','开封市'],['武汉'],['哈尔滨','齐齐哈尔']]; var arr3=[['--请选择城县--'],['市','口市','乡市','开封市'],['汉'],['哈尔','齐齐']]; var sec = document.getElementsByTagName('select'); add(arr1,0); function creat(){ sec[1].length= 0; var cityindex=sec[0].selectedIndex; var city = arr2[cityindex]; add(city,1); } add03(arr2,1); function creat03(){ sec[2].length= 0; var cityindex03=sec[1].selectedIndex; var city03 = arr3[cityindex03]; add03(city03,2); } function add(arr,idex){ for(var i= 0;i<arr.length;i++){ var opt = document.createElement('option'); opt.innerHTML=arr[i]; sec[idex].appendChild(opt); } } function add03(arr2,idex03){ for(var i= 0;i<arr2.length;i++){ var opt03 = document.createElement('option'); opt03.innerHTML=arr2[i]; sec[idex03].appendChild(opt03); } } </script> </body> </html>
  • Array对象
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <!-- 数组：是一个容器 Array 语法： 1、var 变量名 = [值,...]; 2、var 变量 = new Array(size); 3、var 变量 = new Array(值1,值2,...); --> <script type="text/javascript"> /* var arr = ['郝军伟','李宁宁','高鹏','熊建立','徐杨杨']; console.log(arr,arr[1]); */ /* var arr = new Array(3); console.log('数组大小：'+arr.length,arr); arr[0] = 'a'; arr[1] = 111; console.log('数组大小：'+arr.length,arr,arr[2]); arr[5] = 'abc'; console.log(arr,arr[3],arr.length); */ /* var arr = new Array('a','b','c','d'); console.log(arr.length,arr[4]); arr[4] = 123; console.log(arr.length,arr[4]); */ function compare(a,b){ return a-b; } var arr = [4,78,32,45,2,99]; // var newArr = arr.sort(); console.log('排序后的数组：'+arr.sort(compare)); /* 二维数组 var arr = [[],[],1,'a']; */ var twoArr = [['a','b','c'],['aa','bb'],'abc',1,2,3]; var arr = twoArr[0]; console.log(arr[0]); // console.log(twoArr[0][0]); </script> </body> </html>
• day04
  • Tab标签
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>tab切换</title> <style type="text/css"> ul{ position: relative; width: 600px; list-style: none; padding: 0; margin: 0; /* font-size: 0; */ } li{ width: 200px; background: #008000; color: white; display: inline-block; line-height: 50px; /* font-size: 16px; */ text-align: center; float: left; box-sizing: border-box; } ul li:nth-of-type(2){ border-left: 1px solid white; border-right:1px solid white; } div{ position: absolute; width: 600px; height: 400px; color: black; border: 1px solid black; left: 0; border-top: 0; } form{ margin:100px auto; } label{ display: inline-block; width: 120px; padding-right:10px ; text-align: right; } .show{ display: block; } .hide{ display: none; } .selected{ color: orangered; background: #336699; } .no-selected{ color: white; background: #008866; } </style> </head> <body> <ul> <li onclick="change(this)" class="selected"> 毛皮大衣 <div class="show"> <form action="#"> <label>毛皮大衣价格:</label><input type="text" name="price"/><br> <label>毛皮大衣数量:</label><input type="text" name="count"/><br> <label>毛皮大衣总价格:</label><input type="text" name="total"/><br> <input type="submit"/> </form> </div> </li> <li onclick="change(this)" class="no-selected">卫衣 <div class="hide"> <form action="#"> <label>卫衣价格:</label><input type="text" name="price"/><br> <label>卫衣数量:</label><input type="text" name="count"/><br> <label>卫衣总价格:</label><input type="text" name="count"/><br> <input type="submit"/> </form> </div> </li> <li onclick="change(this)" class="no-selected">羊毛衫 <div class="hide"> <form action="#"> <label>羊毛衫价格:</label><input type="text" name="price"/><br> <label>羊毛衫数量:</label><input type="text" name="count"/><br> <label>羊毛衫总价格:</label><input type="text" name="total"/><br> <input type="submit"/> </form> </div> </li> </ul> <script type="text/javascript"> function change(obj){ //获取当前div var divNode = obj.getElementsByTagName('div')[0]; //获取所有div //获取所有的li var liArr = document.getElementsByTagName('li'); var divArr= document.getElementsByTagName('div'); for(var i=0;i<divArr.length;i++){ divArr[i].className='hide'; liArr[i].className='no-selected'; } divNode.className='show'; obj.className='selected'; } </script> </body> </html>
  • 树形菜单
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <title></title> <style type="text/css"> ul ,h3{ cursor: pointer; } ul{ list-style: none; } h3{ background: url(img/1.jpg) no-repeat; padding-left:60px ; } .show{ display: block; } .hide{ display: none; } </style> </head> <body> <h3 onclick="showhide(this,event)"> 台球 <ul class="hide"> <li onclick="showhide(this,event)">斯诺克 <ul class="hide"> <li onclick="stop(event)">丁俊晖</li> <li onclick="stop(event)">塞尔比</li> <li onclick="showhide(this,event)">总统 <ul class="hide"> <li onclick="stop(event)">美国</li> <li onclick="showhide(this,event)">中国 <ul class="hide"> <li onclick="stop(event)">哈哈哈</li> <li onclick="stop(event)">哈哈哈</li> <li onclick="stop(event)">哈哈哈</li> </ul> </li> </ul> </li> </ul> </li> <li onclick="showhide(this,event)">中式台球 <ul class="hide"> <li onclick="stop(event)">郑宇伯</li> <li onclick="stop(event)">杨帆</li> <li onclick="stop(event)">石鑫</li> <li onclick="stop(event)">波次</li> </ul> </li> <li onclick="stop(event)">九球</li> </ul> </h3> <script type="text/javascript"> function showhide(obj,event){ var sh = obj.getElementsByTagName('ul')[0]; event.stopPropagation(); if(sh.className=='show'){ sh.className='hide'; }else{ sh.className='show'; } } function stop(event){ event.stopPropagation(); } </script> </body> </html>
• 练习
  • day01 9*9乘法表 金字塔 day03 全选全不选框 day04 树形菜单 day05 点名器 省市县级联 day06 JSON对象 轮播图 正则验证邮箱
• 注意事项
  • 1.代码内容可直接粘贴到HBuilder中预览和查看 2.不详细的可以查找手册,或者上网搜索百度