JavaScript基础知识点
JavaScript可以改变HTML的内容，可以分为三个部分：ECMAScript、BOM和DOM，其中BOM包含DOM。
ECMAScript
ECMAScript为JavaScript的语法部分。
变量的定义
javascript中所有的变量都用var来定义，无论是整数、小数、字符串、数组、对象等统统可以使用var来定义；并且在javascript中双引号和单引号都是表示字符串的，没有区别。
var a = 11;
var b = 1.2;
var c = 'zouzou';
var d = {1,5,6,"asd",true};
var e = new Date();
var f = true;
var a = "uuu";
运算符的使用
由于javascript可以用var定义所有类型的值，所以在运算时会有一些隐式的类型转换，如“+”，当两侧有字符串时，就会默认将另一侧转换为字符串类型。
var a = 12;
var b = 10;
alert(a + b);// 22
var c = "123";
alert(a+b+c);// 22123
alert(a+c+b);// 1212310
等值运算符：当两端类型不一致时，转化为number类型。
值得一提的是，当类型转换时，如果字符串中有字母等非数字字符，类型转化后为NAN，即为Not A Number。
var s=1; //1
var s1="1"; //1
var s2=true; //1
var s3="true"; //NAN
// console.log(s==s1); //T
// console.log(s==s2); //T
// console.log(s==s3); //F
// console.log(s1==s2);//T
// console.log(s1==s3);//F
// console.log(s2==s3);//F
等同符：两侧类型相同值为true，不同值为false。
console.log(s===s1); //F
console.log(s===s2); //F
console.log(s===s3); //F
console.log(s1===s2);//F
console.log(s1===s3);//F
console.log(s2===s3);//F
数组
在javascript中，数组可以存放任意类型的值，犹如java中的集合一般。
数组的定义：
var arr1 = new Array();
var arr2 = new Array(5);
//定义数组中的内容
var arr3 = new Array(1,1.2,true,'zou',new Date());
console.log(arr3);
var arr4 = [1,1.2,false,'zouzou'];
js中数组下标可以是不连续的，中间没有值的可以补充empty。
var arr = [];
arr[0] = 1;
arr[1] = 'zou';
arr[2] = true;
arr[6] = new Date();
js数组空间的扩张和收缩。
var arr = [1,1.2,'xsa'];
console.log("前：" + arr);
//后面下标内容补充空字符串
arr.length = 8;
//多余的内容会省去
arr.length = 1;
console.log("后：" + arr);
JS常用对象
Date日期对象：
var date = new Date();
//从1900年到2021年的时间
console.log(date.getYear());
console.log(date.getFullYear());
console.log(date.getMonth());
//星期
console.log(date.getDay());
console.log(date.getDate());
console.log(date.getHours());
//返回的是本地的时间
console.log(date.toLocaleString());
Math对象：
//获得随机数 0-1
console.log(Math.random());
//向上取整
console.log(Math.ceil(1.2));
//向下取整
console.log(Math.floor(1.9));
//四舍五入
console.log(Math.round(7.6));
//如何获得四位随机整数？
console.log(Math.floor(Math.random()*9000+1000));
String对象：
var str = "qin-gqingde-wozoul";
//从下标为3截取到末尾作为字符串
console.log(str.substr(3));
console.log(str.substr(2,5));
console.log(str.substring(2));
console.log(str.substring(2,3));
//字符串分割 返回的是一个数组
console.log(str.split("-"));
Global对象：
var a = "var yy = 'zouzou'";
//把长得像js字符串转成可以执行的js代码
eval(a);
var b = '123';
//判断是否为数字，是为false
alert(isNaN(b));
javascript常用事件
<!-- onclick 单击事件 -->
<button type="button" onclick="demo1()">单击事件</button>
<!-- ondblclick 双击事件 -->
<button type="button" ondblclick="demo1()">双击事件</button>
<!-- onkeydown: 键盘按下事件 onkeyup: 键盘弹起事件 -->
<input type="text" onkeydown="demo1()" onkeyup="demo2()" />
<!-- onmouseover:鼠标移上事件 onmouseout:鼠标移走事件 onmousemove:鼠标移动事件 -->
<div style="width: 200px; height: 200px; background-color: aqua;"
onmouseover="demo2()" onmouseout="demo1()" onmousemove="demo3()"></div>
<!-- 文本事件 onblur:失去焦点 onfocus:获得焦点 -->
<input type="text" onblur="demo1()" onfocus="demo2()"/>
<!-- onchange:内容值改变事件 -->
<select onchange="demo1()">
<option>--请选择--</option>
<option>河北</option>
<option>河南</option>
</select>
BOM
BOM是操作浏览器属性的方法。
BOM常用对象
Localtion对象：
//返回主机名和当前 URL 的端口号
console.log(window.location.host);
//ip地址
console.log(window.location.hostname);
//端口号
console.log(window.location.port);
//协议
console.log(window.location.protocol);
//地址
console.log(window.location.href);
//替换当前的url地址 --> 当前的页面 即跳转目标界面
window.location.href = "https://www.baidu.com";
//重新加载页面
window.location.reload();
history对象：
//url地址中历史记录前一个
window.history.back();
//url地址中历史记录后一个
window.history.forward();
//go函数可以写任意整数，正数为向历史记录的后面跳转两个页面
window.history.go(2);
Screen对象：操作屏幕属性
//得到显示器大小
var w = window.screen.width;
var h = window.screen.height;
console.log(w);
console.log(h);
Navigator对象：
//显示浏览器信息
console.log(window.navigator.userAgent);
BOM常用方法
window对象几种常用的弹窗方式：
//方式一：只含有确定按钮的弹框
alert("你好");
//方式二：含有取消按钮的弹框
var flag = window.confirm("确定选择吗？");
alert(flag);
//方式三：含有输入框的弹框
window.prompt("请输入昵称：","例如：李白");
setInterval方法和setTimeout方法的区别：一个是多次调用，一个是只调用一次。
//每间隔一秒就调用一次函数 --> 调用多次函数
var t = window.setInterval("demo2()",1000);
//一秒后调用函数 --> 只调用一次
window.setTimeout("demo2()",1000);
DOM：对HTML节点进行操作
DOM可以操作HTML节点对象，还可以操作它们的属性、文本值等等。
DOM获取元素对象的方式：
1.通过id获取元素对象
//通过id获得元素对象
var sp = document.getElementById("sp1");
console.log(sp);
2.通过标签名称获得元素对象
var sps = document.getElementsByTagName("span");
console.log(sps[3]);
3.通过class获得元素对象
var sps = document.getElementsByClassName("sp");
console.log(sps[0]);
4.通过标签的name属性获得对应元素，但是应该注意的是不是所有标签都有name属性。
var sps = document.getElementsByName("n");
console.log(sps[0]);
DOM获得节点的附近节点
值得注意的是，javascript中，文本也算节点，所以如果有换行的话得到的下一个节点会是文本节点。
//获得div元素对象
var d1 = document.getElementById("d1");
//获得d1下的所有子标签(空白文本也属于子节点)
var chs = d1.childNodes;
//获得span标签对象
var sp = document.getElementById("sp1");
//获得父节点
var p = sp.parentNode;
var sp = document.getElementById("sp1");
//获得当前标签的下一个标签 由于文本也算节点，所以直接使用nextSibling获取到的是空格文本。
var n1 = sp.nextSibling.nextSibling;
var n2 = sp.nextElementSibling;
//获得当前标签的上一个标签
var p1 = sp.previousSibling;
var p2 = sp.previousElementSibling;
DOM创建节点和删除节点
例子：
//创建一个p标签节点对象
var p = document.createElement("p");
p.innerText = "照片：";
//创建一个input标签
var inp = document.createElement("input");
inp.type = "file";
//创建一个button标签
var but = document.createElement("button");
but.innerText = "删除";
but.onclick = function() {
var flag = window.confirm("是否删除该节点？");
if(flag){
p.remove();
}
}
//指定标签之间的关系
p.appendChild(inp);
p.appendChild(but);
//最后把p标签追加到现有元素之后
// document.body.appendChild(p);
var p1 = document.getElementById("p_1");
//在指定元素之前追加元素
document.body.insertBefore(p,p1);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
