Web前端之javascript

javascript

基本语法：

number 数字类型
string 字符串类型（”” ”)
null 空值
undefined 未定义
布尔类型 true false
var 表示任意类型

数组

var a=new Array();
var a=[];
var a=[1,2,3,4,5];

遍历数组：

for(var i = 0; i < a.length; i++) { 
    console.log(a[i]);
}

for(var i in a) { 
    console.log(a[i]);
}

添加元素：

.push(元素);尾
.shift(元素);头

删除元素：

.pop();尾
.shift();头
.splice(要删除元素的下标，要删除元素的个数);

排序：

.sort();
.sort((a,b)=>b-a);

对象（js对象属性可以动态添加）

var a=new Object();
简化：var a={属性名：属性值}

函数

function 函数名(a,b){
    return a+b;
}
匿名函数：var sum=function(a,b){
    return a+b;
}

日期

var date=new Date();
date.getFullYear();
date.getMonth();
date.getDate();

正则表达式

var reg=new RegExp();
简写：var reg=/正则表达式/;

是否全部是数字
var reg = /^[0-9]+$/;
reg.test("目标字符串");

验证是否是手机号码
var reg = /^1[35789][0-9]{9}$/;

替换功能：

var str="";
str.replace(/a+/, "A");  // 只会替换第一个匹配到的子串
str.replace(/a+/g, "A");  // 会替换所有匹配的子串

操作页面上的标签

查找页面标签：

document.getElementById("id值");

获取标签内容：

标签对象.innerText

获取属性：

标签对象.属性名

注：获取class属性—–标签对象.className
获取style样式—–标签对象.style.具体样式名
删除：父标签对象.removeChild(子标签对象）；

在html网页中使用js

<script>
    js代码
</script>

F12 控制台窗口

查找元素

document.getElementById(标签id值);
document.getElementsByTagName(标签名字);
父元素.getElementsByTagName(标签名字);
document.querySelector("选择器(#id值，.class值，元素）");    
document.querySelectorAll("选择器(#id值，.class值，元素）");

修改

内容：.innerText
.innerHTML
属性：.属性名="新值";
样式：.className="新class";
.style.具体样式名="新值";

新增

父元素.appendChild(子元素）；
document.createElement(“标签”）；

事件

鼠标单击事件：onclick
event.preventDefault();阻止标签的默认行为
event.stopPropagation();停止事件冒泡

this代表当前对象

BOM

.alert("提示的文字"); 弹出对话框窗口
.confirm("提示的文字"); 弹出确认框窗口 如果点击了确定，返回true，点击了取消返回false
.setTimeout(函数名称, 毫秒值); 延时执行一个函数
.setInterval(函数名称, 毫秒值); 根据时间间隔执行函数
.clearInterval() 取消间隔执行