深萌图谱

JavaScript学习记录

我是真滴懒。

# JavaScript编写位置

让我康康！

<head>部分

<script>
    document.write("写在这儿");
</script>

<button>标签内

<button onclick="alert('wow');">Click me</button>

<a>标签内

<a href="javascript:alert('wow');">Click me</a>

放到外部文件内并引入

<head>
<script type="text/javascript" src="script.js"></script>
</head>

# Number

让我康康！
 最大值 ：Number.MAX_VALUE

 最小值 ：Number.MIN_VALUE

若Number所表示的数大于最大值， typeof 则会返回Infinity。Infinity本身也是Number类型。

NaN是一种特殊的Number，表示Not_a_Number.

# 运算符

让我康康！
var result = 131+"12";
// String 13112
var result = 131 -"1";
// Number 130
var a=1;
console.log(a++);
// 1
var a=true;
a=!a;
// a=false  !可以对一个值进行非运算，对布尔值进行取反运算。
var b=2;
b=!b;
console.log(b);
//b=false  对非布尔值进行取反会将它先变为布尔值再进行取反
var result = NaN && 1;
// NaN 与运算，若第一个为true，则必然返回第二个。若第一个为false，则返回第一个值。
var result = NaN || 1;
//1  或运算，若第一个值为false，则返回第二个。若第一个值为true，则返回第一个。

# 条件运算符

让我康康！
var max = a > b ? a : b;
//a和b中大的那一项会赋给max

# 对象对象对象

让我康康！
var obj = new Object();
obj.name = "theFirstObjInewed";
obj.date = "2021年8月15日";
console.log(obj);
delete obj.name;
//删除obj的name属性

若要使用特殊属性名，则应该写成 obj[“^$#%^$”] 而不是 obj. ^$#%^$  

对象内可以套对象

var obj1 = new Object();
var obj2 = new Object();
obj1.ob = obj2;
obj2.name = "OBJ2NAME";
console.log(obj1.ob.name);
//输出OBJ2NAME
var n = "^%$%#^";
var obj = new Object();
console.log(obj[n])
console.log(obj["^%$%#^"]);
//这两个是一样的

检查对象中是否有某种属性， console.log(“name” in obj) 

新建对象的常用方式

var obj = {
    name: "1",
    date: "2",
    "1223ad": "3",
    test:{name:"4"}
}
console.log(obj.test.name);

# 函数

让我康康！
(function () {
    alert("立即执行");
})();

对象的属性也可以是对象

var obj = new Object();
obj.fun1 = function(){alert("我是一个函数")};
obj.fun1();
//fun1就是obj对象的方法
 var 声明会被提前，其他的不会提前。虽然声明提前了，但赋值还是需要执行到那一行再赋值。所以在写函数时，用 var fun = function(){}; 就要注意了。

但直接用function fun(){}来写的函数，会在所有代码被执行之前创建。

找变量的时候会先在自己的作用域找，若找不到会到上一级作用域找。或者加一个 window. 直接调用全局变量。

在函数中不使用 var 声明的变量，都会成为全局变量。

构造函数的写法和调用：

function Construct(){
}
var con = new Construct();

使用 对象 instanceof 构造函数 检查对象是否为这个构造函数的实例。

在构造函数内新增方法

function Construct(){
    this.Method1 = function(){};
    this.func = fun1;
}
function fun1(){
}

# 原型对象

让我康康！
function Class1(){
}
var aClass = new Class1();
Class1.prototype.a = 123456;
console.log(aClass.a);
//输出123456，如果fun1里有a，则不会去原型中找a。
//朝原型中写方法
Class1.prototype.say = function(){};
aClass.say();

# toString

让我康康！
var obj = {};
obj.toString = function () {
    return "Test";
}
document.getElementsByTagName("body")[0].innerText = obj.toString();

# 数组

让我康康！

使用 arr[arr.length] 可为数组新增元素在最后。

使用数组的 push() 方法能朝数组最后新增元素并返回数组长度，使用数组的 pop() 方法会删除并返回最后一个元素。使用数组的 unshift() 可以朝数组开头加入元素并返回长度。使用数组的 shift() 方法可以删除并返回数字第一个元素。

var arr = ["mario", "mro", "www"];
arr.forEach(function (a, b, c) { console.log(a); }); //返回正在遍历的元素
arr.forEach(function (a, b, c) { console.log(b); }); //返回正在遍历的元素的索引
arr.forEach(function (a, b, c) { console.log(c); }); //返回正在遍历的数组

若想从数组中取一些元素，需要用数组的 slice() 方法，需要注意的是， arr.slice(1,2) 是取第二个元素。只包括开始，不包括结束。 arr.slice(1,-1) 取得数字第二个元素到倒数第一个元素（不包含倒数第一个）。

 splice(a,b,”123″,””ghj) 方法能删除数组的元素并返回删除后的数组。a表示删除的开始位置，b表示删除的个数。之后的参数会被插入到数组a的位置。

 arr.concat(arr2,”abc”) 用来连接数组。使用 join(“连接符，不加默认为逗号。也可以加一个空串”) 方法，将数组转换为字符串，但不会对原数组产生影响。

使用 sort() 方法来对数组排序，不过是按照Unicode来排序，所以对数组排序是可能会得到错误的结果。使用 reverse() 方法来反转数组。

若要使用 sort() 来排序数字，可以使用以下方法：

var arr = [5, 2, 6, 87, 34, 7, 43, 4567, 45];
/*arr.sort(function (a, b) {
    if (a > b) {
        return 1;
    }
    else if (a < b) {
        return -1;
    }
    else {
        return 0;
    }
});*/
arr.sort(function (a, b) {
    return a - b; //升序
});
console.log(arr);

# 函数的Call和Apply

让我康康！
 function.apply(obj,[1,2,3]) 能传递两个参数，第一个是代替的this对象，第二个是数组。

 function.apply(obj,1,2,3) 能传递多个参数，第一个是代替的this对象，后面的为参数列表。

# 正则表达式

让我康康！
//var reg = new RegExp("m", "i");
var reg = /m/i;
console.log(reg.test("M"));
//有a或b
reg = /a|b/;
reg = /[ab]/;
//字符串包含小写字母
reg = /[a-z]/;
//字符串包含任意字母
reg = /[A-z]/;
//字符串是否包含abc、aec、aqc
reg = /a[beq]c/;
//除了ab
reg = /[^ab]/;
reg = /ab{3}/;
//b连续出现3次
reg = /(ab){3}/;
//ab连续出现3次

用正则表达式来拆分字符串

var str = "1uy3uy2iuy45uy2iuh54uyv21";
console.log(str.split(/[A-z]/));

找出某串字符串的所有字母

var str = "2eugyug45uyf3uytf23";
var res = str.match(/[a-z]/ig);
//若不加g（全局），则找到第一个字母e就会停止
reg = /ab{1,3}c/;
//字符串中出现abc abbc abbbc
reg = /ab{2,}c/;
//abbc 两个b及以上
reg = /ab{6}c/;
//abbbbbbc
reg = /^a/;
//是否以a开头
reg = /a$/;
//是否以a结尾
reg = /^a$/;
//既是开头又是结尾，就是"a"
reg = /^a|a$/;
//以a开头或者以a结尾

用正则表达式来检测手机号

1.以1开头 ^1
2.第二位是3到9  [3-9]
3.剩下九位无要求 [0-9]{9}
4.共11位 $
reg = /^1[3-9][0-9]{9}$/;

在正则表达式中，.表示任意字符，若想检测.，则需转义成\.

\w
- 任意字母、数字、_ 相当于[A-z0-9_]
\W
- 除了字母、数字、_ 相当于[^A-z0-9_]
\d
- 任意的数字 相当于[0-9]
\D
- 除了数字 相当于[^0-9]
\s
- 空格
\S
- 除了空格
\b
- 单词边界
\B
- 除了单词边界

创建一个正则表达式检测是否含有单词explod

reg = /\bexplod\b/;

去除字符串的空格

var str = "       m  ario     ";
str = str.replace(/^\s*/,""); //去除开头的多个空格
str = str.replace(/\s*$/,""); //去除结尾的多个空格
str = str.replace(/^\s*|\s*$/g,""); //去除开头和结尾的多个空格
str = str.replace(/\W/g,""); //去除所有空格

邮箱的正则表达式

任意字母下划线(3位以上) . 任意字母下划线 @ 任意字母数字 . 任意字母(2-5位) . 任意字母(2-5位)
\w{3,}    (\.\w+)*    @    [A-z0-9]+    \.    [A-z]{2,5}  \.  [A-z]{2,5}
后面两坨连在一起写成 (\.[A-z]{2,5}){1,2}
注意邮箱的开始和结束，有些字符串包含邮箱，但整个字符串不是邮箱。所以在正则便道上前后加上^和$
reg = /^\w{3.}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$;

# DOM

让我康康！

给某对象绑定一个事件

<!-- HTML -->
<button id="btn">I'm a button</button>
// JS
var ele = document.getElementById("btn"); //可以放在页面的下部，等页面加载完毕后再执行。也可以放在window.onload = function(){};里面
ele.onclick = function () {
    console.log("Hello");
}
等同于
<button id="btn" onclick="console.log('Hello');">I'm a button</button>

获取子节点和父节点

var ele = document.getElementById("list");
ele.getElementsByTagName() - 方法，返回当前节点的指定标签名后代节点
ele.firstElementChild - 属性，表示当前节点的第一个子元素
ele.lastElementChild - 属性，表示当前节点的最后一个子元素
ele.firstChild - 属性，表示当前节点的第一个子节点
ele.lastChild - 属性，表示当前节点的最后一个子节点

获取body可以用 var ele = document.body; 

获取html可以用 var ele = document.documentElement; 

查找使用某CSS的元素

document.querySelector("p");
//获取文档中第一个 <p> 元素
document.querySelector(".example");
//获取文档中class="example"的第一个元素
document.querySelector("p.example");
//获取文档中 class="example" 的第一个 <p> 元素
document.querySelector("a[target]");
//获取文档中有 "target" 属性的第一个 <a> 元素
https://www.runoob.com/jsref/met-document-queryselector.html

更多方法可以搜索Javascript参考手册，菜鸟教程的。

body元素是 document.body 

根据不同客户端使用不同CSS：

//判断移动端并使用对应的CSS
let styleSheet = document.getElementById('css'); //在HTML里添加一个<link rel="stylesheet" href="" id="css">，这一步获得这个元素，之后再根据不同客户端更换样式表。
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    styleSheet.setAttribute('href', './css/gisms_mobile.css');
} else {
    styleSheet.setAttribute('href', './css/gisms.css');
}

# 操作内联样式

让我康康！

内联样式有较高的优先级

ele.style.width = "300px";
ele.style.backgroundColor = "yellow";
//获取当前样式
getComputedStyle(ele,null).width;
//获取元素的内容区加内边距，只读。若要改的话只能用ele.style.width =
ele.clientWidth;
//获取元素的内容区、内边距和边框。
ele.offsetWidth;
//获取开启了定位的祖先元素，若所有元素都未开启定位，则返回body
var par = ele.offsetParent;
//获取相对于父元素的水平偏移
ele.offsetLeft;

# 事件对象

让我康康！

写事件的方式

//只能为事件绑定一个相应函数，会覆盖掉之前的响应函数。
ele.onscroll = function(event){
    }
//可以为事件绑定多个响应函数。
ele.addEventListener("scroll",function(){
    },false);

事件的冒泡，指事件向上传到，当某元素被触发时，其祖先元素也会被触发。若想停止，可以取消冒泡。 event.cancelBubble = true; 

取消事件的默认行为使用 event.preventDefault; 

键盘事件：

document.onkeydown = function (event) {
        if (event.key == "g") {
            alert("g");
        }
    }

# BOM

让我康康！
location = "https://gis.ms"
location.assign("https://gis.ms");

# 定时器

让我康康！
var i = 1;
    var timer = setInterval(() => {
        i++;
        console.log(i);
    }, 1000);
    clearInterval(timer);

延时器:隔三秒，只执行一次

var timer = setTimeout(() => {
    }, 3000);

# 类的应用

让我康康！

给元素改样式

var ele = document.getElementById("box1");
ele.className = "box2";
//移除样式则可以把box2改为空串
ele.className = ele.className.replace("box1", "");

# JSON

让我康康！

JSON -> JS OBJ：使用 JSON.parse(json); 

JS OBJ -> JSON：使用 JSON.stringify(obj); 

# 小功能

让我康康！

获取某一时间页面内的鼠标移动距离：

var preE, currentE;
var movementX = 0,
    movementY = 0,
    movementBoth = 0;
// 获取速度，currentE是html的e,preE是0.1s之前的html的e
setInterval(() => {
    if (preE && currentE) {
        movementX = Math.abs(currentE.screenX - preE.screenX);
        movementY = Math.abs(currentE.screenY - preE.screenY);
        movementBoth = Math.sqrt(Math.pow(movementX, 2) + Math.pow(movementY, 2));
    }
    preE = currentE;
}, 100);

根据不同客户端使用不用JS：

window.onload = function() {
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    //移动端JS
}
    else{
    //电脑端JS
}
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments