目录
变量：
变量定义：
<script> var p_1 = undefined; // 值为 undefined, 类型为 undefined,表示该变量是没有设置值的变量 var p_2; // 值为 undefined(空), 类型是 undefined，表示该变量是没有设置值的变量 var p_3 = null; // 值为 null(空), 但类型为对象，表示该变量没有指向任何东西 // null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。 // undefined：是所有没有赋值变量的默认值，自动赋值。 </script>
变量的声明：
<script> "use strict"; // 使用严格模式，在严格模式中，代码编写须按照严格标准执行，强烈推荐，可避免一些意外的错误 let x = 10; // 声明一个变量，这个变量只在其所在的代码块中有效 const y = 20; // 声明一个常量，常量的值不可修改 var z = 10; // 声明一个变量，这个变量可在子集中调用，差不多可以理解为声明全局变量 </script>
运算符:
运算符 描述 例子 === 绝对等于（值和类型均相等） 5 === 5 返回 True
5 === "5" 返回 Flase
!== 不绝对等于（值和类型有一个不相等，或两个都不相等） 5 !== "5" 返回 True
5 !== 5 返回 Flase
&& and (两边为 True 则为 True ) (5 < 10 && 5 > 1) 为 true || or （只要有一个为 True 就为 True ) (1==5 || 3==5) 为 false ! not ( 取反，不为真则为真） !(1==2) 为 true
try..
<script> try { if(1 === "1") throw "值是空的"; // 可能会报错的语句，报错后将 throw 语句后的信息传给 catch } catch(err) { // 上述代码报错后执行该段代码 message.innerHTML = "错误: " + err + "."; } finally { // 该段代码将在程序的最后允许一次，不管有无报错都会运行 document.getElementById("demo").value = ""; } </script>
输出：
document.write() 将其内的语句写入到文档中，可写标签，页面会对其进行渲染执行 window.alert() 将其内的文字以弹窗的形式显示出来 console.log() 将其内的文字输出到控制台中 .innerHTML 获取指定标签的值，可对其进行替换写入操作，可写标签，会自动渲染 <h1 id="myH1"></h1> <p id="myP"></p> <script> document.getElementById("myP").innerHTML = "text"; // 获取到id为myp的元素对象，将其的内容改为text,可在此插入任何元素标签等，页面都会进行渲染 document.write("<h5>您的浏览器支持JavaScript脚本!</h5>"); // 将自定内容写入到该网页中，页面会对其进行渲染 // window.alert("警告窗口") // 页面弹窗 console.log("text") // 将自定内容输出到控制台中 </script>
字符串：
.length 获取到这个变量的长度 .charCodeAt(3) 返回指定索引位置字符的 Unicode 值 .match('he'/i) 返回指定索引位置字符的 Unicode 值 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分 split() 把字符串分割为子字符串数组 substr() 从起始索引号提取字符串中指定数目的字符 substring() 提取字符串中两个指定的索引号之间的字符 toLowerCase() 把字符串转换为小写 toUpperCase() 把字符串转换为大写 trim() 移除字符串首尾空白
DOM：
获取元素：
<script> var x = document.getElementById("main"); // 获取id为 main 的元素对象 var y = x.getElementsByTagName("p"); // 查找id为 main 中所有的 p 标签 var z = document.getElementsByClassName("intro");// 获取class为intro的所有 var myNodelist = document.querySelectorAll("p"); // 获取所有 p 元素 // TagName 和 ClassName 和 querySelectorAll 的使用 var my = document.getElementsByTagName("p"); var i; for (i = 0; i < my.length; i++) { myCollection[i].style.backgroundColor = "red"; } my[1] // 获取到 my中的第二个标签 </script>tagname 和 classname，返回的是 htmlcollection 类型，是伪数组而不是真数组，故不能使用数组的方法。我们可以使用数组原型配合 slice 方法，利用 call，apply，bind 方法将伪数组转为真数组。
<script> var yy = Array.prototype.slice.call(y) // 返回的是数组list形式 console.log(Array.prototype.slice.apply(y)) console.log(Array.prototype.slice.bind(y)()) </script>
改变属性：
语法: 元素对象.要改的属性 = 新的属性值
<img id="ie" src="aa.jpg"> <script> document.getElementById("ie").src="qw.jpg"; // 拿到id为 ie的元素，将其的src改为qw </script>
this
在事件中，this 表示他自己， 在对象中，this 表示对象自己，可以通过this调用该对象内的属性，相当于python的self一样 在外部定义的，this 表示windows对象自己，也相当于python中的self一样
if语句：
<script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time<10) { document.write("<b>早上好</b>"); } else if (time>=10 && time<20) { document.write("<b>今天好</b>"); } else { document.write("<b>晚上好!</b>"); } </script>
循环:
<button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction(){ var x; var txt=""; var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){ txt=txt + person[x]; } document.getElementById("demo").innerHTML=txt; } </script> <script> cars=["BMW","Volvo","Saab","Ford"]; for (var i=0,l=cars.length; i<l; i++){ document.write(cars[i] + "<br>"); } </script>
函数的定义:
<script> // 定义一个函数，使用该函数需要传入两值，返回两值的和 var myFunction = new Function("a", "b", "return a + b"); var x = function (a, b) {return a + b}; const z = (x, y) => { return x + y }; // function是关键字，myfunction是函数名，a/b是形参，定义一个函数 function myFunction(a, b) { return a * b; } </script>
类：
<script> // 类定义 class Animal { constructor() { ... } method_1() { ... } method_2() { ... } }; // 类继承 class Dog extends Animal { constructor() { ... } method_1() { ... } method_2() { ... } }; </script><p id="demo"></p> <p id="demo2"></p> <script> // 创建类 class Run { constructor(name) { // 创建一个类，该类需要传入一个name this._sitename = name; } set sitename(x) { this._sitename = x; // 调用该方法修改指定变量的值 } get sitename() { return this._sitename; //调用该方法获取指定变量的值 } } let noob = new Run("---"); // 实例类，传入指定值给name noob.sitename = "RUN"; // 调用set sitename方法 document.getElementById("demo").innerHTML = noob.sitename; // 调用get sitename方法 // 继承类 extends -- 创建no类继承run类 class no extends Run { constructor(age) { super(age) // 将值传给父类 this.age = age; } show() { return this.sitename + '--' + this.age; // 返回 调用父类的指定函数+age } } let noob2 = new no(5); document.getElementById("demo2").innerHTML = noob2.show(); </script>
静态方法：
<script> class Runoob { constructor(name) { this.name = name; } static hello() { // 创建静态方法，静态方法只能调用类时调用，不可在实例后调用 return "Hello!!"; } } let noob = new Runoob("--"); // 可以在类中调用 'hello()' 方法 document.getElementById("demo").innerHTML = Runoob.hello(); // 不能通过实例化后的对象调用静态方法 // document.getElementById("demo").innerHTML = noob.hello(); // 以上代码会报错 </script>
事件:
onchange HTML 元素被改变时触发 onclick HTML 元素被点击时触发 onmouseover 鼠标移到指定的元素上时触发 onmouseout 鼠标移开指定的元素上时触发 onkeydown 用户按下键盘按键时触发 onload 浏览器已完成页面的加载时触发 onunload 浏览器被关闭时触发 onmousedown 当元素被按住时触发 onmouseup 当元素被松开时触发 当按钮被点击时获取到指定id的元素，将其的内容改为时间
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button> <p id="demo"></p>
当按钮被点击时将按钮自己的内容改为时间
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
当按钮被点击时调用指定函数
<button id="n1" onclick="alert('Hello World!')">调用指定函数</button>
监听：
监听事件，三个参数("监听的事件","执行的函数","执行冒泡还是捕获")
- 冒泡：如果将p元素置于div元素中，两元素都设有事件，那会先执行里面的p元素事件在执行div事件
- 捕获：如果将p元素置于div元素中，两元素都设有事件，那会先执行div事件在执行里面的p元素事件，True为捕获，Float为冒泡。
- 可同时给一个元素设置多个监听事件，不会覆盖已存在的事件。
<script> var x = document.getElementById("myBtn"); x.addEventListener("click", function(){ alert("Hello World!"); }); x.addEventListener("click", myFunction,True); </script>移除事件：
获取到指定对象，将其的指定事件移除
<script> document.getElementById("myDIV").removeEventListener("mousemove", myFunction); </script>
标签的添加、删除、和替换：
<script> var para = document.createElement("p"); // 创建一个 p 标签 var node = document.createTextNode("这是一个新的段落。"); // 创建一个文本信息 para.appendChild(node);// 将文本信息添加到 p 标签内 var element = document.getElementById("div1"); element.appendChild(para); // 将标签添加到指定标签内 var child = document.getElementById("p1"); element.insertBefore(para, child); // 将标签置于指定标签的上方 element.removeChild(child); // 删除 id=p1 的标签 element.replaceChild(para, child); // 将child指向的标签替换成para指向的标签 </script>
异步：
<script> setTimeout(print, 3000); // 生出一个子线程，该线程会在三秒后执行指定函数 new Promise(function (resolve { // Promise异步函数，该函数执行结束后会自动执行.then resolve(333); // 将指定值传给then }).then(function (value) { // 执行接收输出变量 console.log("a / b = " + value); }).catch(function (err) { // 当报错时打印错误 console.log(err); }).finally(function () { // 执行结束后执行输出结束 console.log("End"); }); </script>window.confirm("text"); // 弹出确认框 prompt("请输入你的名字","Harry Potter"); // 弹出输入框,("提示信息","默认值") setInterval(function(){alert("Hello")},3000); // 每隔三秒，执行一次指定函数<p id="demo"></p> <button onclick="myStopFunction()">停止</button> <script> var myVar=setInterval(function(){myTimer()},1000); //每隔一秒调用一次 mytimer函数 function myTimer(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } function myStopFunction(){ clearInterval(myVar); // 结束myvar的自动调用 } </script><script> var myVar; function myFunction(){ myVar=setTimeout(function(){alert("Hello")},3000); // 三秒后调用指定函数 } function myStopFunction(){ clearTimeout(myVar); // 清除myvar的调用 } </script>
正则：
修饰符 描述 i 对大小写不敏感的匹配。 g 全局匹配（查找所有匹配而非在找到第一个匹配后停止） m 多行匹配。 将字符串内的指定字符进行替换 .replace()，不区分大小写
<p id="demo"></p> <script> document.getElementById("demo").innerHTML='替换 "microsoft" 为 "Runoob" '.replace(/microsoft/i, "Runoob"); </script>
搜索字符串中指定字符的起始位置 .search(/Run/i)
<p id="value_3">Visit Run!</p> <script> document.write(document.getElementById("value_3").innerHTML.search(/Run/i)); </script>
其他方法介绍:
typeof:
<script> document.write(typeof "asd") // 结果: string ,返回指定变量的类型 </script>
json：
<script> var obj = JSON.parse('{ "name":"Run" , "url":"www.aa.com" }'); // 将字符串转化成对象 var str_pretty1 = JSON.stringify({"name":"asd", "site":"aaa"}) // 将 json 类型对象转化成字符串 json类型的字符串 </script>
定位跳转失效标签：
<a href="javascript:void(0);">点我没有反应的!</a> // 点击该链接时，由于返回为零，所以没有反应 <a href="#pos">点我定位到指定位置!</a> //点击该链接时，跳转到id=pos的元素处 <a href="javascript:void(alert('Warning!!!'))">点我!</a> // 该函数无返回值
获取浏览器的尺寸:
<p id="demo"></p> <script> var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; x=document.getElementById("demo"); x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。" screen.availWidth // 可用的屏幕宽度 像素值 screen.availHeight // 可用的屏幕高度 像素值 </script>其他方法:
Math.random(); // 返回 0-1 内的随机数 Math.round(2.5); // 将传进来的值进行四舍五入 Math.max(); // 获取传进去的值的最大值 Math.min(); // 获取传进去的值的最小值
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 （80 或 443）
- location.protocol 返回所使用的 web 协议（http: 或 https:）
<div id="example"></div> <script> txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>"; txt+= "<p>浏览器名称: " + navigator.appName + "</p>"; txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>"; txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>"; txt+= "<p>硬件平台: " + navigator.platform + "</p>"; txt+= "<p>用户代理: " + navigator.userAgent + "</p>"; txt+= "<p>用户代理语言: " + navigator.language + "</p>"; document.getElementById("example").innerHTML=txt; </script>
1357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
