浏览器平台的神。
0.1+0.2 != 0.3的神奇语言
包含ECMAScript(定义语法) dom(把html看做一棵文档树) bom(浏览器对象模型)
使用方法
写在html行内、用script标签、引入js文件。
最基本的语法
//我虽然写var，但你应该用let
var a = 10;
if (a === 10) {
console.log("yeah");
} else if (a === 15) {
console.log("?");
} else {
console.log("??");
}
for (var i=0; i<10; i++) {
console.log(i);
}字符串API
会java的基本不用学吧...
var len = str.length
name.toUpperCase()
name.toLowerCase()
var ch = str.charAt(12);
var idx1 = str.indexOf("a");
var idx2 = str.lastIndexOf("a");
var str1 = "abcde";
var str2 = str1.replace("cd","XXX");
var str1 = "一,二,三,四,五";
var arr = str1.split(",");数组
var arr = [1,2,3,4]; //没有类型限制 var arr = new Array(1, "a", false);
相关API
var str = arr.toString();
var arr = [1,2,3,4];
var str = arr.join("-"); /
var arr = [1,2,3,4];
var arrnew = arr.concat(5,6); //变成1 2 3 4 5 6
var arr = ['a','b','c','d','e','f','g','h'];
var arrnew = arr.slice( 2,4 ); //cd
var arr = [1,2,3,4];
arr.reverse(); //不用接值，直接就地修改。
var arr = [4,3,2,1];
arr.sort(func);
//可以传一个函数进去。数学类API
直接Math.sqrt(); 不用new什么。
在这里插入Number的介绍
var n = new Number( 12.345 ); var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入 console.log( n1 ); var x = new Number( 12.3 ); var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐 console.log( n2 );
正则
其实正则是语言无关的。
//开头结尾固定
var reg = /^$/
//匹配三位纯数字
var reg = /^\d{1,3}$/
var flag = reg.test(18)常用正则
日期时间
var time = new Date(); console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间) var year = time.getFullYear(); // 年份 var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1 var day = time.getDate(); // 几号 var hour = time.getHours(); // 几点 var mm = time.getMinutes(); // 分钟 var s = time.getSeconds(); //秒 var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒 var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒"; console.log( timestr );
函数
var func = function printLn() {
console.log("---");
}
func();
printLn();
var func2 = new Function("a", "b", "return a + b")
console.log(func2(1,2))一些常用的全局函数
isNaN：检查其参数是否是非数字值
eval：用来转换字符串中的运算
encodeURI 与 decodeURI：转码、解码。好像用处也不是特别大...
闭包
指的是在某个函数中访问另一个作用域内的数据。
function test1(){
var count = 0; //局部变量
function jia(){
return count+=1;
}
return jia;
}弹框API
普通弹框 alert();
控制台日志输出 console.log();
页面输出 document.write("<h2>我爱你中国</h2>");
确认框 confirm("确定删除吗？"); //可以获得一个yes 和 no 的框，可以接到bool形式的yes no值进行后续判断
输入框 prompt("请输入姓名："); //用户可以在里面输入数据Dom操作
访问
getElementById：通过id属性获得元素节点对象
getElementsByName：通过name属性获得元素节点对象集
getElementsByTagName：通过标签名称获得元素节点对象集
修改
通过访问方法得到一个dom对象之后，可以通过修改innerHTML字段的方法修改HTML，也可以通过修改style字段下的各种属性(obj.style.color obj.style.fontFamily ......)来修改这个dom对象。
添加 删除 替换节点
//添加
var img = document.createElement("img"); // <img>
var divs = document.getElementsByTagName("div");
divs[0].appendChild(img);
//删除
var img = document.getElementById("cat");
img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点
//替换
var imgold = document.getElementById("cat");
// 通过修改元素的属性，做的替换
var imgnew = document.createElement("img");
imgnew.setAttribute("src","../img/1.jpg");
imgold.parentNode.replaceChild( imgnew, imgold );事件
窗口事件
仅在 body 和 frameset 元素中有效。
onload 当文档被载入时执行脚本
<body onload="test()">
<script>
function test() {
document.write("哈哈哈哈");
}
</script>
</body>表单事件
仅在表单元素中有效。
onblur 当元素失去焦点时执行脚本
onfocus 当元素获得焦点时执行脚本
<body>
<script>
function a() {
console.log("获得焦点==被激活");
}
function b() {
console.log("失去焦点");
}
</script>
<form action="">
<p>帐号：<input onfocus="a()" onblur="b()" /></p>
<p>密码：<input /></p>
</form>
</body>鼠标事件
onclick 当鼠标被单击时执行脚本
ondblclick 当鼠标被双击时执行脚本
onmouseout 当鼠标指针移出某元素时执行脚本
onmouseover 当鼠标指针悬停于某元素之上时执行脚本
键盘事件
onkeydown 按下去
onkeyup 弹上来
<script>
window.onkeydown = function(){
if(event.keyCode == "13"){ // 回车键
alert("登录成功！");
}
}
window.onkeyup = function(){
console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发
}
</script>事件冒泡与事件捕获
假设我有两个div，并且都注册了点击事件。
并且两个div一大一小，大的套小的。
当我点击小的div时，大的div也会触发点击事件。
具体顺序呢？冒泡指从小到大（泡泡就是这样的），捕获指从大到小。
停止冒泡可以在子div里面调用e.stopPropagation();
如何指定要冒泡还是要捕获呢？取决于addEventListener函数最后的参数。最后的参数给true就是捕获。
OOP
JS的OOP是基于原型的。其实现在也支持class了，还是基于class的写法比较方便。
function userinfo(name , age){
this.name = name;
this.age = age;
this.say = function(){
console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
}
}
var user = new userinfo("詹姆斯",35);
user.say();var user = {
username : "孙悟空",
age : 527,
say : function(){
console.log("大家好，我叫："+ this.username +"，我今年"+this.age+"岁了！");
}
};
user.say();JSON
var json1 = { username: "吕布", age: 31 };
console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁");BOM
浏览器对象模型。
<button onclick="kai()">阿百</button>
<script>
function kai(){
window.open("https://www.baidu.com", "百度", "width=500, height=300, left=400");
}
</script>屏幕对象
console.log(window.screen.width + "|" + window.screen.height);
location
包含有关当前 URL 的信息，通常用来做页面跳转
<button onclick="test()">测试</button>
<script>
function test(){
console.log( "当前页面的URL路径地址："+ location.href );
location.reload(); // 重新加载当前页面（刷新）
location.href = "http://lagou.com"; // 跳转页面
}
</script>history
<button onclick="back()">返回</button>
<script>
function back(){
//history.go(-1); //上一级页面
history.back(); // 与go(-1)是等价的
}
</script>navigator 浏览器信息
<script>
var str = "";
str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>";
str += "<p>浏览器的名称："+ navigator.appName+"</p>";
str += "<p>浏览器的版本："+ navigator.appVersion+"</p>";
str += "<p>硬件平台："+ navigator.platform+"</p>";
str += "<p>用户代理："+ navigator.userAgent +"</p>";
str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>";
document.write(str);
</script>本地存储
关闭浏览器或标签页才删除数据
localStorage.setItem("name","curry");
localStorage.getItem("name");
localStorage.removeItem("name");
localStorage["a"] = 1;
localStorage.b = 2;
localStorage.setItem("c",3);
// 第一种方式读取
var a = localStorage.a;
console.log(a);
// 第二种方式读取
var b = localStorage["b"];
console.log(b);
// 第三种方式读取
var c = localStorage.getItem("c");
console.log(c);会话存储
关闭浏览器失效
<button onclick="dian()">点我</button>
<h3 id="result"></h3>
<script>
function dian(){
if( sessionStorage.getItem("clickCount") ){
sessionStorage.setItem("clickCount",
Number(sessionStorage.getItem("clickCount")) + 1);
}else{
sessionStorage.setItem("clickCount", 1);
}
document.getElementById("result").innerHTML = "已经点击了" + sessionStorage.getItem("clickCount") +"次！"
}
</script>计时器
timer = setInterval(func, time);
clearInterval(timer); //停止
setTimeout(func, time); //一次性的定时器
京公网安备 11010502036488号