前端JS基础
一、JS基础语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1JS基础语法</title> </head> <body> <!--由于JS是基于标签的操作，需要等待标签加载完毕在执行JS，JS代码放到body的最底部--> <script type="text/javascript"> // var 声明变量 var a = 100; //alert弹出警告框 alert(a); //console.log()控制台输出 console.log(a); // JS行结尾需要加分号 // 单行注释 /* 多行注释1 多行注释2 */ // prompt()用户输入 用户不管输入什么内容，都是字符串 var msg = prompt("今天天气如何?"); console.log(msg); </script> </body> </html>
二、JS基础数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2JS基础数据类型</title> </head> <body> <!--由于JS是基于标签的操作，需要等待标签加载完毕在执行JS，JS代码放到body的最底部--> <script type="text/javascript"> // 数值类型number var a = 123; // 查看数据类型 console.log(typeof a); var a1 = 5/0; console.log(typeof a1); // Infinity 无限大. number类型 // 字符串类型string var b = "abc"; console.log(typeof b); var c = ""; // 空字符串也是string类型 console.log(typeof c); // 布尔boolean var b1 = false; console.log(typeof b1); // null var c1 = null; //空对象. object console.log(c1); // undefined var d1; //表示变量未定义 console.log(typeof d1) </script> </body> </html>
三、JS字符串拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2JS字符串拼和数据类型转换</title> </head> <body> <!--由于JS是基于标签的操作，需要等待标签加载完毕在执行JS，JS代码放到body的最底部--> <script type="text/javascript"> // 字符串拼接 var a = "我是"; var b = "好人！"; console.log(a + b); // 我是好人！ var c = "1"; var d = 2; console.log(c + d); // 12 var e = 1; var f = 2; console.log(e + f); // 3 // 如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）。 var a1 = "3"; var a2 = 2; console.log(a1 - a2); // 1 // 效果：（注意，字符串 - 数值 = 数值） </script> </body> </html>
四、JS运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4JS运算符</title> </head> <body> <!--由于JS是基于标签的操作，需要等待标签加载完毕在执行JS，JS代码放到body的最底部--> <script type="text/javascript"> // 赋值运算符 // 算数运算符 // 比较运算符 // 逻辑运算符: 逻辑与&&、逻辑或|| // 和python不同之处 var a = "123"; var b = 123; console.log(a == b); // true == 比较数值，不比较类型 console.log(a === b); // false === 真等于比较类型和数值 </script> </body> </html>
五、JS数据类型转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5JS数据类型转换</title> </head> <body> <!--由于JS是基于标签的操作，需要等待标签加载完毕在执行JS，JS代码放到body的最底部--> <script type="text/javascript"> // 数据类型转换 // string --> number var strNum = "123"; console.log(parseInt(strNum)); // 字符串转换成number类型 Int是整形 var strNum1 = "123.67"; console.log(parseInt(strNum1)); // 字符串转换成number类型 Int是整形 如果是小数则取整数部分，小数不四舍五入 console.log(parseInt("2018你真帅！！")); // 带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失 console.log(parseFloat(strNum1)); // 字符串转换成number类型 float是浮点类型 // number --> string var num1 = 123; var numStr = num1.toString(); console.log(numStr); // --> boolean var b1 = '123'; var b2 = 0; var b3 = -123 var b4 = Infinity; var b5 = NaN; var b6; //undefined var b7 = null; console.log(Boolean(b1)) </script> </body> </html>
六、JS流程控制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6JS流程控制</title> </head> <body> <!--由于JS是基于标签的操作，需要等待标签加载完毕在执行JS，JS代码放到body的最底部--> <script type="text/javascript"> // if...else if...else // 示例1 // var age = 20; // if (age > 18) { // console.log("大吉大利，今晚吃鸡") // } // 示例2 // var num1 = parseInt(prompt("猜数字？")); // var num = 18; // if (num1 < num) { // console.log("太小了") // } // else if (num1 === num) { // console.log("猜对了") // } // else { // console.log("太大了") // } // switch // var gameScore = 'better'; // switch (gameScore) { // //case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止 // case 'good': // console.log('玩的很好'); // //break表示退出 // break; // case 'better': // console.log('玩的老牛逼了'); // break; // case 'best': // console.log('恭喜你 吃鸡成功'); // break; // default: // console.log('很遗憾') // } // while循环 /* 1.初始化循环变量 2.判断循环条件 3.更新循环变量 */ var i = 1; while (i < 10){ console.log(i); i++ } // do_while 不管有没有满足while中的条件do里面的代码都会走一次 var num = 1; do{ console.log(num); num ++ }while (num < 10); // for for(var num1 = 1; num1 < 10; num1++){ console.log(num1); } </script> </body> </html>
七、JS流程控制练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7JS流程控制练习</title> </head> <body> <!--由于JS是基于标签的操作，需要等待标签加载完毕在执行JS，JS代码放到body的最底部--> <script type="text/javascript"> // 1-100之间所有数之和 var sum = 0; for (var i = 1;i<=100;i++){ sum += i; } console.log(sum); // 1-100之间所有的偶数 for (var i1 = 1;i1<=100;i1++){ if (i1 % 2 === 0){ console.log(i1) } } // 在浏览器中输出直角三角形 for (var line = 1; line <= 10; line++){ for (var chr = 1;chr <= line;chr++){ document.write("*") } document.write("<br>") } </script> </body> </html>
八、JS常用内置对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>8JS常用内置对象</title> </head> <body> <!--由于JS是基于标签的操作，需要等待标签加载完毕在执行JS，JS代码放到body的最底部--> <script type="text/javascript"> // 数组Array var colors = ['red','color','yellow']; // 增 colors[3] = "blue"; // python不支持这种添加方式 var ret = colors.push("AAA"); // 往数组的最后添加一个元素，并返回新的长度 var ret1 = colors.unshift("CCC"); // 往数组的前面添加一个元素，并返回新的长度 console.log(ret); console.log(ret1); console.log(colors); // 删 console.log(colors.pop()); // 移除最后一个元素 并返回删除的元素 console.log(colors.shift()); // 移除第一个元素 并返回删除的元素 // 改 colors[0] = "DDD"; // 查 console.log(colors[0]); console.log(colors.indexOf("DDD")); // 根据元素找索引，找不到返回-1 console.log(colors.slice(0,3)); // 切片查找 // 其他 var newC = colors.concat([1,2,3]); // 生成一个新的数组 console.log(newC); console.log(colors.join("_")); // 把数组元素拼接成字符串 console.log(colors.reverse()); // 反转数组 console.log(colors.length); // 返回数组的长度 console.log(colors.sort()); // 注意不是根据数值大小进行排序 console.log(Array.isArray(colors)); // 判断是不是数组 // string 字符串 var s = "ABC123"; console.log(s.charAt(0)); // 根据索引查元素 console.log(s.concat("DDDDDD","CCCCCC")); // 拼接字符串 var newS = s.replace("A","a"); console.log(newS); // 替换字符串 console.log(s.search("B")); // 查找元素，找到返回索引，找不到返回-1 console.log(s.slice(0,3)); // 切片查找 console.log(s.split("1")); // 指定字符串分割字符串 console.log(s.toLowerCase()); // 大写变小写 console.log(s.toUpperCase()); // 小写变大写 // Date //创建了一个date对象 var myDate = new Date(); console.log(myDate.getDate()); // 返回日期 1-31 console.log(Date()); // 返回详细的时间 console.log(myDate.getMonth()); // 返回月份 0-11 console.log(myDate.getFullYear()); // 返回年 console.log(myDate.getDay()); //返回星期几 0-6 console.log(myDate.getHours()); // 返回时 0-23 console.log(myDate.getMinutes()); // 返回分 0-59 console.log(myDate.getSeconds()); // 返回秒 0-59 console.log(myDate.toLocaleString()); // 2018/5/27 下午10:36:23 // Math console.log(Math.floor(12.3)); // 向下取整，地板函数 console.log(Math.ceil(12.9)); // 向上取整，天花板函数 console.log(Math.max(1,2,3,4,5)); // 求最大值 console.log(Math.min(1,2,3,4,5)); // 求最小值 console.log(Math.random()); // 0-1之间的随机数 // 求0 - 100 之间的随机数 min+Math.random()*(max-min) console.log(parseInt(0 + Math.random()*(100-0))); </script> </body> </html>
数组：
字符串：
Date日期对象：
Math内置对象：
九、JS函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>9函数</title> </head> <body> <script type="text/javascript"> // 函数：就是将一些语句进行封装，然后通过调用的形式，执行这些语句。 // 函数的作用： // 将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。 // 简化编程，让编程模块化。 // 定义函数 function foo() { console.log("Hello word") } foo(); // 匿名函数 var fun = function () { console.log("我是匿名函数") }; fun(); // 函数的返回值 function fun2() { return "我是返回值" } console.log(fun()); // 没有返回值返回undefined console.log(fun2()); // 函数参数 function fun3(a,b) { console.log(a); console.log(b); console.log(arguments); } fun3(1,2,3,4,5,6); </script> </body> </html>
十、DOM基本操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10JSDOM基本操作</title> <style type="text/css"> </style> </head> <body> <div class="father"> <div class="c1"> <div class="son">AAAA</div> </div> </div> <span id="d1"></span> <img src="" alt=""> <script type="text/javascript"> // 获取标签的3种方式 // 根据ID获取，返回一个元素 var spanEle = document.getElementById("d1"); console.log(spanEle); // 根据类名获取，返回一个数组 var divEle = document.getElementsByClassName("c1")[0]; console.log(divEle); // 根据标签名获取，返回一个数组 var imgEle = document.getElementsByTagName("img")[0]; console.log(imgEle); // 根据节点找父节点 父节点只能有一个 var divFatherEle = divEle.parentNode; console.log(divFatherEle); // 根据节点找子节点 子节点可以有多个 var divSonEle = divEle.children; console.log(divSonEle[0]); // 创建标签 var a1Ele = document.createElement("a"); var a2Ele = document.createElement("a"); console.log(a1Ele); // 添加标签 divEle.appendChild(a1Ele); // 父节点的最后插入一个新的子节点。 divEle.insertBefore(a2Ele,divSonEle[0]); // 在参考节点前插入一个新的节点 // 删除节点 divEle.removeChild(a1Ele); // 通过父节点删除子节点 a2Ele.parentNode.removeChild(a2Ele); // 可以直接删除指定节点 // 复制节点 var newDivEle = divEle.cloneNode(); // 复制节点，不包括子节点 divEle.appendChild(newDivEle); // 插入复制的节点 var new2DivEle = divEle.cloneNode(true); // 复制节点及子节点 divEle.appendChild(new2DivEle); // 插入复制的节点 // 设置节点的属性 console.log(divEle.className); // 获取节点的类名 console.log(divEle.getAttribute("id")); // 获取节点的ID imgEle.setAttribute("src", "./2.jpg"); // 设置节点属性 imgEle.src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=72323776,1263084726&fm=27&gp=0.jpg"; // 设置节点属性 // 删除节点属性 imgEle.removeAttribute("src"); // 获取标签的所有内容 console.log(divEle.innerHTML); // 获取标签的文本 console.log(divEle.innerText); </script> </body> </html>
十一、DOM事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } #box{ width: 100%; height: 100%; background: rgba(0,0,0,.3); } #content{ position: relative; top: 150px; width: 400px; height: 200px; line-height: 200px; text-align: center; color: red; background-color: #fff; margin: auto; } #span1{ position: absolute; background-color: red; top: 0; right: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; } </style> </head> <body> <button id="btn">弹出</button> </body> <script type="text/javascript"> //获取dom元素 1.获取事件源 var oBtn = document.getElementById('btn'); //创建弹出模态框的相关DOM对象 var oDiv = document.createElement('div'); var oP = document.createElement('p'); var oSpan = document.createElement('span'); // 设置属性 oDiv.id = 'box'; oP.id = 'content'; oP.innerHTML = '模态框成功弹出'; oSpan.innerHTML = 'X'; oSpan.id = 'span1'; // 追加元素 oDiv.appendChild(oP); oP.appendChild(oSpan); // 点击弹出按钮 弹出模态框 oBtn.onclick = function(){ //动态的添加到body中一个div this.parentNode.insertBefore(oDiv,btn) }; // 点击X 关闭模态框 oSpan.onclick = function(){ // 移除oDiv元素 oDiv.parentNode.removeChild(oDiv) } </script> </html>
十一、JS入口函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // 等待页面加载完毕以后执行JS代码 window.onload = function () { // JS代码 } </script> </head> <body> </body> </html>
十二、var和let以及const区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { // var console.log(name); // 输出结果：undefined var name = "spf"; // var声明的变量 存在变量提升。相当于第一步：var name; 第二步：name = "spf"; console.log(name); // 输出结果：spf // 对比var 和 let function foo1() { var name = "spf"; } console.log(name); // 输出结果：spf function foo2() { let name1 = "spf"; // 声明的变量 是块级作用域 用于解决for循环绑定事件操作 } console.log(name1); // 报错Uncaught ReferenceError: name1 is not defined at window.onload // const 声明的是常量 一旦声明变量 不可改变 const a = 1; a = 2; //直接会报错 Uncaught TypeError: Assignment to constant variable. }; </script> </head> <body> </body> </html>
十三、JS创建对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { // 1.字面量方式创建 var person = { name:"张三", // 对象属性 age:18, // // 对象属性 fav:function(){ alert(name); } // 对象方法 }; // 2.工厂模式创建对象 function CreateUser(name,age) { this.name = name; this.age = age; this.alertName = function () { console.log(this.name); }; return this; } var spf = new CreateUser("spf",19); spf.alertName(); // 3.够构造函数模式创建对象 function CreateStuden(name,age) { var obj = new Object(); obj.name = name; obj.age = age; obj.alertName = function () { console.log(this.name); }; return obj } var wxx = CreateStuden("wxx",19); wxx.alertName(); // 4.原型模式创建对象 function fun1(name,age) { this.name = name; this.age = age; return this; } function fun2(name,age) { this.name = name; this.age = age; return this; } // 给两个对象绑定相同的方法 fun1.prototype.showName = function () { alert(this.name); }; fun2.prototype.showName = function () { alert(this.name); }; // var wxx = new fun1("wxx",18); // console.log(wxx.name); // wxx.showName(); } </script> </head> <body> </body> </html>
十四、定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { // 定时器 异步运行 function hello(){ alert("hello"); } //setTimeout var t1 = window.setTimeout(hello,2000); // 2000 = 2秒 2秒后执行，只会执行一次 window.clearTimeout(t1); //去掉定时器 // setInterval var t2 = window.setInterval(hello,3000); // 循环执行，每个3秒执行一次 window.clearTimeout(t2); //去掉定时器 } </script> </head> <body> </body> </html>
十五、BOM操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { // 弹出对话框 // alert(); //不同浏览器中的外观是不一样的 // confirm(); //兼容不好 // prompt(); //不推荐使用 // 打开窗口 // window.open(url,target) // url:要打开的地址 // target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。 // window.open("http://www.baidu.com") // location对象 // href：跳转 // hash 返回url中#后面的内容，包含# // host 主机名，包括端口 // hostname 主机名 // pathname url中的路径部分 // protocol 协议 一般是http、https // search 查询字符串 // location.reload() 刷新整个网页 // location.href = "http://www.baidu.com"; // console.log(location); // navigator对象 // window.navigator 的一些属性可以获取客户端的一些信息。 // userAgent：系统，浏览器 // platform：浏览器支持的系统，win/mac/linux // console.log(navigator.userAgent); // console.log(navigator.platform); } </script> </head> <body> </body> </html>
