JavaScript快速入门（二）
文件中引入JavaScript
嵌入到HTML文件中
在body或者head中添加script标签
<script>
var age = 10;
console.log(age);
</script>
引入js文件
创建一个js文件
var age = 20; console.log(age);
在html文件中src引入改文件
<body> <script src="./age.js"></script> </body>
引入网络来源文件，和引入本地的js文件一样，通过src
<body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </body>
数据类型
原始数据类型：基本的数据类型（数值、字符串、布尔值）
复合数据类型：对象（一个对象可以看做是存放各种值得容器，由基础数据类型组成）
var user = { "name":"ming", age:20, is_register:True }
特殊数据类型：null和undefined
typeof可以用来判断基础数据类型
<body> <script> var age = 20; console.log(typeof age); </script> </body>
算数运算符
加减乘除取余：+ 、-、*、/、%
自增或者自减相当于当前值+1或者-1
<body> <script> var num = 20; console.log(++num); console.log(--num); </script> </body>
自增自减需要注意，有两种写法一种运算符号在前，一种运算符号在后，两种效果不一样
运算符号在前是先自增再运行，运算符号在后是先运行在自增
<body> <script> var num = 20; console.log(++num); // 21 var num1 = 20; console.log(num1++); // 20 </script> </body>
赋值运算符
| 赋值运算符 | 表达式 |
| = | 赋值运算符 |
| += | x +=y 等同于 x= x+y |
| -= | x -=y 等同于 x = x-y |
| *= | x *= y 等同于 x = x*y |
| /= | x /= y 等同于 x = x/y |
| %= | x %= y 等同于 x = x % y |
比较运算符
| 比较运算符 | 描述 |
| < | 小于 |
| > | 大于 |
| <= | 小于或者等于 |
| >= | 大于或者等于 |
| == | 相等 |
| === | 严格相等 |
| != | 不相等 |
| !== | 严格不相等 |
== 和 ===区别
<body> <script> var num = 20; var num1 = 20; var num2 = "20"; console.log(num == num1); // True console.log(num == num1); // True console.log(num == num2); // True console.log(num === num2);// 严格比较数值和类型 False console.log(num != num2);// False console.log(num !== num2);// True 类型不一致 </script> </body>
布尔运算符
取反运算符（！）
<body> <script> var flag = true; console.log(!flag); </script> </body>
提示 undefind 、null、false、0、NaN、空字符串 取反都为true
且运算符（&&）
<body> <script> console.log(10<20 && 10>5); // True </script> </body>
活运算符（||）
<body> <script> console.log(10>20 || 10>5); // True </script> </body>
用Switch简化多个if...else....
swith后面跟表达式，case后面记得一定要加上break，不加上break会把后续的都执行，最后default就是以上case都不是执行
<body> <script> var day = 3; switch(day){ case 0: console.log("今天周一"); break; case 1: console.log("今天周二"); break; case 2: console.log("今天周三"); break; default: console.log("今天不是周一、二、三") } </script> </body>
用三目运算符来代替if...else...
<表达式>？y ：x
表达式正确返回y，错误则返回x
<body> <script> var num = 10; var result = num % 2 == 0 ? "是偶数" : "是奇数"; console.log(result) </script> </body>
字符串
<body> <script> //字符串要么使用单引号嵌套双引号，要么使用双引号嵌套单引号 var str1 = '我说"你好呀"'; //如果想使用双引号嵌套双引号，单引号嵌套单引号或者换行就需要用到反斜杠 var str2 = '我说\'你好呀\''; var str3 = "今天天气真好，\ 我想出去玩"; console.log(str1,str2,str3); </script> </body>
用属性length来查看字符串长度
<body> <script> var str3 = "今天天气真好，\ 我想出去玩"; console.log(str3.length); </script> </body>
charAT查看索引位置的字符串
<body> <script> var str = "yetangjian的博客园"; console.log(str.charAt(1)); // 查看索引1位置的字符串e console.log(str.charAt(str.length -1));//查看最后一位的字符园 //如果索引不存在会打印出来空字符串 console.log(str.charAt(-1)); console.log(str.charAt(str.length+1)); </script> </body>
concat连接两个字符串，创建新的字符串，不影响老的字符串（拼接的如果不是字符串，也会先转为str再拼接）
同样也可以用“+”拼接
<body> <script> var str = "yetangjian的博客园"; var str1 = "丰富多彩呀~~"; var result = str.concat(str1); document.write(result);//页面上展示出来拼接后的 // 可以接收多个参数拼接 var str3 = "看的停不下来了"; document.write(str.concat(str1,str3)); </script> </body>
concat和+号的区别
+号会先运算数字类型在转，所以下方会先做1+2后再转字符串
concat不管什么，都会转字符串拼接
<body> <script> var num1 = 1; var num2 = 2; var str3 = "3"; document.write("".concat(num1,num2,str3)); // 123 document.write(num1+num2+str3);// 33 </script> </body>
substring截取字符串，两个参数，参数1开始的位置的索引，第二个参数结束位置的索引（结束索引位置不取，左闭右开）
<body> <script> var str = "yetangjian的博客园"; // 截取博客园三个字,左闭右开 document.write(str.substring(11,str.length)); // 省略第二个参数，直接取到最后 console.log(str.substring(11)); //博客园 //在substring中参数如果是负数，直接当索引0用 </script> </body>
substr用法基本和substring一样，区别是第二个参数不在是结束位置的索引，而是字符串的长度
<body> <script> var str = "yetangjian的博客园"; var result = str.substr(11,3);//从索引位置11开始取，截取长度为3 document.write(result);//博客园 //如果省略第二个参数，直接取到结尾，如果第二个参数是个负数，会变为0即字符串长度为0的空字符串 console.log(str.substr(11));//博客园 console.log(str.substr(11,-4));//空字符串 //如果第一个参数是负数，则从后向前计算字符位置，这个和之前的字符串不太一样 console.log(str.substr(-3)); </script> </body>
indexof查询字符串第一次出现的位置，不存在则返回-1
<body> <script> var str = "yetangjian的博客园"; // 判断上述字符换中是否存在博客园 if (str.indexOf("博客园") > -1){ console.log("存在"); }else{ console.log("不存在"); } // 参数2位置开始索引位置 console.log(str.indexOf("博客园",12));//从12索引位置不存在了，所以返回-1 </script> </body>
trim方法去除首尾两端的空格，包括\r \n \t都能去掉
<body> <script> var str = " yetangjian的博客园 "; console.log(str);// yetangjian的博客园 console.log(str.trim());//yetangjian的博客园 </script> </body>
split方法是按分隔符，返回一个分割出来的字符串数组
<body> <script> var str = "yetangjian|的|博客园"; var result = str.split("|"); console.log(result);// ["yetangjian", "的", "博客园"] console.log(str.split(""));//["y", "e", "t", "a", "n", "g", "j", "i", "a", "n", "|", "的", "|", "博", "客", "园"] //存在第二个参数可以设置获取数组的长度 console.log(str.split("",2));//["y", "e"] </script> </body>
数组
查询、追加
<body> <script> var arr = []; arr[1] = 1 // 通过下标加入数组值 console.log(arr) console.log(arr[1])//1 console.log(arr.length)//2 </script> </body>
遍历
<body> <script> var city = ["shanghai","guangzhou","beijing"] // for for (var i=0;i<city.length;i++){ console.log(city[i]); } // while i = 0 while (i < city.length){ console.log(city[i]); i++ } // for in for (var i in city){ console.log(city[i]); } </script> </body>
数组静态方法Array.isArray()：判断是否为数组
<body> <script> var city = ["shanghai","guangzhou","beijing"] console.log(typeof(city));//object console.log(Array.isArray(city));//true </script> </body>
push()/pop()方法：改变原数组末尾增加或删除
<body> <script> var city = ["shanghai","guangzhou","beijing"] //push city.push("nanjing"); city.push("fujian","xiamen");//向尾部添加一个或多个 console.log(city); //pop var deleteend = city.pop(); console.log(deleteend);//"xiamen" console.log(city);//["shanghai", "guangzhou", "beijing", "nanjing", "fujian"] </script> </body>
shift()/unshift：改变原数组在数组起始位置添加或删除
<body> <script> var city = ["shanghai","guangzhou","beijing"]; //shift var shiftfirst = city.shift(); console.log(shiftfirst);//shanghai console.log(city);//["guangzhou","beijing"] //unshift city.unshift("hefei","chongqing"); console.log(city);// ["hefei", "chongqing", "guangzhou", "beijing"] </script> </body>
join按指定分隔符拼接数组成员，默认都是逗号
<body> <script> var city = ["shanghai","guangzhou","beijing"]; //join document.write(city.join());//shanghai,guangzhou,beijing document.write(city.join("|"));//shanghai|guangzhou|beijing document.write(city.join(""));//shanghaiguangzhoubeijing //join可以把数组拼成字符串，split可以把字符串拆成数组 var result = city.join("|"); console.log(result); var newArr = result.split("|");// shanghai|guangzhou|beijing console.log(newArr);//["shanghai", "guangzhou", "beijing"] </script> </body>
concat数组合并
<body> <script> var city = ["shanghai","guangzhou","beijing"]; var contry = ["China","Japan"] //concat和+号区别 console.log(city + contry);//变为字符串了shanghai,guangzhou,beijingChina,Japan console.log(city.concat(contry));//还是数组["shanghai", "guangzhou", "beijing", "China", "Japan"] //使用concat数组追加,注意看下面例子 console.log(city.concat(1,2,3,[4,5,6]));// ["shanghai", "guangzhou", "beijing", 1, 2, 3, 4, 5, 6] </script> </body>
reverse翻转
<body> <script> var city = ["shanghai","guangzhou","beijing"]; console.log(city.reverse());//["beijing", "guangzhou", "shanghai"] //翻转字符串 var word = "apple"; console.log(word.split("").reverse().join(""));//elppa </script> </body>
indexof返回元素在数组中第一次出现的位置，没有则返回-1
<body> <script> var city = ["shanghai","guangzhou","beijing","shanghai"]; console.log(city.indexOf("shanghai"));//0 console.log(city.indexOf("nanjing"));//-1 //第二个参数为起始位置 console.log(city.indexOf("shanghai",2));//3 </script> </body>
Math对象
Math.abs（）绝对值
<body> <script> var num = -100; console.log(Math.abs(num)); </script> </body>
max和min返回最大最小值
<body> <script> console.log(Math.max(10,0,30,-5));//30 console.log(Math.max());//-Infinity </script> </body>
向上取整，向下取整
<body> <script> var num1 = 10.1; console.log(Math.floor(num1));//floor地板的意思，向地板取整，10 console.log(Math.ceil(num1));//ceil天花板的意思，向天花板取整，11 </script> </body>
random随机数
<body> <script> console.log(Math.random());//Math.random() >=0 && Math.random()<1 </script> </body>
Date对象
<body> <script> console.log(Date.now());//时间戳：是指格林威治时间1970年1月1日 00:00:00 到现在的总秒数 console.log(Date());//当前时间：Sun Apr 09 2023 12:56:46 GMT+0800 (中国标准时间) console.log(new Date().getDate());//一定要new一个出来才可以使用Date对象提供的一系列方法 var d = new Date(); console.log(d.getMonth() + 1); // 0表示1月 console.log(d.getDay()); // 获取星期几，周日是0，周一是1 console.log(d.getFullYear());//年份 // 今年剩余多少天 function leftDays(){ var today = new Date(); var endDays = new Date(today.getFullYear(),11,31,23,59,59,999); //最后一天的日期时分秒 return Math.floor((endDays.getTime() - today.getTime()) / (24 * 60 * 60 * 1000) ); } </script> </body>
DOM
DOM（文档对象模型）是js操作网页的接口，作用是把网页转换为js对象，从而可以通过脚本对网页元素进行操作
浏览器将HTML解析为一系列节点，再把节点组成DOM Tree，DOM的最小单位是节点node
节点类型有7种： Document：整个文档树的顶层节点；DocumentType：doctype标签；Element：网页标签；Attribute：网页属性（class=right）；Text：标签和标签包含的文本；Comment：注释；DocumentFragment：文档片段
document对象获取元素
<body> <div>Hello world</div> <div class="name">xiaojianjian</div> <div id="pc">haobaobao</div> <div class="one two">12</div> <div class="one two">13</div> <script> // document.getElementsByTagName搜索标签名 var divs = document.getElementsByTagName("div")[0]; // 把hello world改成hello divs.innerHTML = "Hello"; // document.getElementsByClassName类名 var names = document.getElementsByClassName("name")[0]; names.innerHTML = "bigjianjian"; //getElementById，id是唯一的所以不需要后面加下标 var pc = document.getElementById("pc"); pc.innerHTML= "huaibaobao"; //document.querySelector()方法接受一个CSS选择器作为参数，如果存在多个返回第一个 var one = document.querySelector(".one.two"); one.innerHTML = 14;//修改了第一个（原来12的位置） var two = document.querySelectorAll(".one.two")[1];//通过查询all来所有 two.innerHTML = 15; </script> </body>
document创建元素
<body> <div class = "test"></div> <script> var text = document.createElement("p");//创建一个p标签 var content = document.createTextNode("我是文本");//创建文本信息 //通过appendChild将内容或者子元素放入容器 text.appendChild(content); console.log(text); //<p>我是文本</p> //增加属性 var id = document.createAttribute("id"); id.value = "root"; //id的属性加入到容器中 text.setAttributeNode(id); //把这个我们text放入class = test中 var test = document.getElementsByClassName("test")[0];//先把容器读出来 test.appendChild(text);//div容器中就会加入p标签了 </script> </body>
Element对象属性
<body> <div class = "test" id = "box1">Hello</div> <script> var box = document.getElementById("box1"); //改变id属性 box.id = "box2"; //通过id找到className并修改 box.className = "test1 test2"; //追加className box.classList.add("addTest"); //移除classNmae box.classList.remove("test1"); //判读是否存在addTest属性 if (box.classList.contains("addTest")){ console.log("存在addTest"); } //toggle如果存在则移除，不存在则加入 box.classList.toggle("addTest"); //innerHTML box.innerHTML = "大家好"; //innerHTML和innerText区别：innerHTML可以识别标签，innerText作为一个字符串 var str = "<a href='https://www.cnblogs.com/yetangjian/p/17253215.html'>bokeyuan</a>"; box.innerHTML = str; //在创建一个div标签用innerText对比:innerHTML是可以点击的链接，innerText只是一个字符串 var newDiv = document.createElement("div"); var content = document.createTextNode("我是文本"); newDiv.appendChild(content); var setId = document.createAttribute("id"); setId.value = "text"; newDiv.setAttributeNode(setId); var getBody = document.getElementsByTagName("body")[0]; getBody.appendChild(newDiv); var newId = document.getElementById("text"); newId.innerText = str ; </script> </body>
CSS操作
最简单的方法，直接添加元素节点属性style
<body>
<div class="box1" id="box"></div>
<script>
var box = document.getElementById("box");
box.setAttribute("style","background-color: red;height: 200px");
</script>
</body>
通过节点的style属性
<body>
<div class="box1" id="box"></div>
<script>
var box = document.getElementById("box");
box.style.height = "300px";
box.style.background = "red";
</script>
</body>
还有一种写法
<body>
<div class="box1" id="box"></div>
<script>
var box = document.getElementById("box");
box.style.cssText = "height: 500px;background: red;"
</script>
</body>
事件处理
html事件
<body> <button onclick="clickHandler()">按钮</button> <script> function clickHandler(){ console.log("点击按钮") } </script> </body>
DOM0事件
<body> <button id="btn">按钮</button> <script> //DOM0事件 优点HTML和js是分离的，Html事件没有分离 var btn = document.getElementById("btn"); btn.onclick = function(){ console.log("点击按钮") } </script> </body>
DOM2事件
<body> <button id="btn">按钮</button> <script> //DOM2事件：优点可以增加多个事件，只要添加一个addEventListener var btn = document.getElementById("btn"); btn.addEventListener("click",function(){ console.log("点击按钮") }) </script> </body>
鼠标事件
<style> .box1{ height: 200px; width: 200px; background: red; } </style> <body> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <button id="btn3" onmouseup="clickHandler('onmouseup')">按钮3</button> <button id="btn4" onmousedown="clickHandler('onmousedown')">按钮4</button> <button id="btn5" class="box1" onmousemove="clickHandler('onmousedown')">按钮5</button> <script> var btn1 = document.getElementById("btn1"); btn1.addEventListener("click",function(){ console.log("单机") }) var btn2 = document.getElementById("btn2"); btn2.ondblclick = function(){ console.log("双击"); } function clickHandler(event){ switch(event){ case "onmousedown": console.log("鼠标按下"); break; case "onmouseup": console.log("鼠标抬起"); break; case "onmousedown": console.log("鼠标正在移动"); break; } } </script> </body>
除了上方列举的这些，还有其他一些鼠标事件例如：onmouseenter，mouserover鼠标进入；onmouseleave，mouseout鼠标离开等等
那么onmouseenter和mouserover区别在于只在父元素添加事件，是否会在子元素上触发，同理鼠标离开也是
Event事件
<body> <button id="btn">按钮</button> <a href="https://www.cnblogs.com/yetangjian/p/17320268.html" id="ytj">yetangjian</a> <script> //event事件其实就是函数的参数 var btn = document.getElementById("btn"); btn.onclick = function(event){ console.log(event); //有两个常用属性Target和type console.log(event.target);//点击哪里显示哪个节点 <button id="btn">按钮</button> event.target.innerHTML= "点击过了"; //监听到以后就可以去操作他了 console.log(event.type);// click } var ytj = document.getElementById("ytj"); //点击a标签不跳转 ytj.onclick = function(e){ e.preventDefault();//阻止默认事件 console.log("点击A标签"); } </script> </body>
阻止事件冒泡
<body> <style> .root{ height: 200px; width: 200px; background: red; } .box{ height: 100px; width: 100px; background: blue; } </style> <div class="root" id="root"> <div class="box" id="box"></div> </div> <script> //分别给root和box添加点击事件 //这时候点击蓝色会打印root和box因为他会事件向上传递 var root = document.getElementById("root") var box = document.getElementById("box") root.onclick = function(){ console.log("root"); } //如果我们想点击蓝色只答打印蓝色，就需要添加阻止冒泡 box.onclick = function(e){ e.stopPropagation();//阻止冒泡 console.log("box"); } </script> </body>
键盘事件
<body> <input type="text" id="username"> <script> var username = document.getElementById("username"); //按下 username.onkeydown = function(e){ console.log("正在输入中...") } // 抬起 //event唯一表示keyCode 例如回车是13 username.onkeyup = function(e){ console.log(e.target.value); if (e.keyCode == 13){ console.log("输入完成"); } } // keypress按下除ctrl alt shift meta以外的键触发 username.onkeypress = function(e){ console.log(e.target.value); } </script> </body>
表单事件类型
<body> <input type="text" id="username"> <script> var username = document.getElementById("username"); username.oninput = function(e){ console.log(e.target.value);//读取数据 } username.onselect = function(){ console.log("鼠标选中了"); } //change在你回车或者失去焦点才会触发 username.onchange = function(e){ console.log(e.target.value); } </script> </body>
触发在表单上的事件
<body> <form id="myform" onsubmit="submitHandle()"> <input type="text" id="username"> <button id="formReset">重置</button> <button>提交</button> </form> <script> var formReset = document.getElementById("formReset"); var myform = document.getElementById("myform"); formReset.onreset = function(){ myform.reset();//表单回到原始状态 } //提交 注意都是作用在表单上的 function submitHandle(){ console.log("提交"); } </script> </body>
事件代理
由于事件会向上冒泡传播的父节点，所以我们可以子节点的监听定义在父节点上，有父节点统一处理事件。
<body> <style> .box1{ width: 100px; height: 100px; background-color: blue; } .box2{ width: 300px; height: 300px; background-color: blueviolet; } </style> <div class="box2"> <div class="box1"></div> </div> <script> var box2 = document.getElementsByClassName("box2")[0]; box2.onclick = function(e){ console.log(e.target.className);//在父节点监听就只可以知道点击了那个className } </script> </body>
定时器
延时执行setTimeout
<body> <script> //setTimeout两个参数第一个参数是函数，第二个参数是毫秒数 var demo =function(){ console.log("打印完成"); } var timer = setTimeout(demo,3000); //取消定时器 clearTimeout(timer); //注意定时器中this，调用的是全局 // var name = "demo1"; // var user = { // name : "demo2", // getName : function(){ // //this永远指向当前调用者 // console.log(this.name); // } // } // user.getName() // demo2 //一样的例子：如果我们用定时器 var name = "demo1"; var user = { name : "demo2", getName : function(){ //this永远指向当前调用者 setTimeout(function(){console.log(this.name)},3000) } } user.getName()//调用的是全局demo1 </script> </body>
间隔时间执行setInterval
<body> <script> var i = 0; //每一秒打印一条 setInterval(function(){ i++; console.log(i); },1000) </script> </body>
一个运用例子，实现一个动画效果
<style> .box1{ width: 100px; height: 100px; background-color: blue; opacity: 1; } </style> <body> <div class="box1"></div> <script> var box1 = document.getElementsByClassName("box1")[0]; var opacity = 1; var fade = setInterval(function(){ opacity -= 0.05; box1.style.opacity = opacity; if (box1.style.opacity < 0){ clearInterval(fade); } },100) </script> </body>
防抖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> h3{ height: 300px; } </style> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <script> //滚动事件 // window.onscroll = function(){ // var scrollTop = document.documentElement.scrollTop // console.log(scrollTop); // } //我们做一个优化，让短时间大量触发的同一时间，只会执行一次函数 function debounce(fn, delay){ var timer = null; return function(){ //timer存在就清空延时 if(timer){ clearTimeout(timer) } timer = setTimeout(fn, delay) } } window.onscroll = debounce(function(){ var scrollTop = document.documentElement.scrollTop; console.log(scrollTop); },200) </script> </body> </html>
节流
上面的防抖存在一个问题，如果一直按着不放，就无法触发；那如果我想要按着不放，也可以触发就要用到节流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> h3{ height: 300px; } </style> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <h3>yetangjian</h3> <script> //节流 function throttle(fn, delay){ var valid = true; return function(){ if(!valid){ return false; } //延时时间内valid都是false会被直接return 出去，到延时时间valid置为true触发setTimeout valid = false; setTimeout(function(){fn();valid=true;},delay) } } window.onscroll = throttle(function(){ var scrollTop = document.documentElement.scrollTop; console.log(scrollTop); },2000) </script> </body> </html>
作者： yetangjian
出处： https://www.cnblogs.com/yetangjian/p/17253215.html
关于作者： yetangjian
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 原文链接 如有问题， 可邮件（yetangjian@outlook.com）咨询.
