JavaScript 学习

语言规则

语句末尾要加 ;
流程控制的条件要加 ()

JS引入HTML

行内引入

<body>
	<input type="button" onclick="alert('行内引入js');"></input>
</body>

内部引入

<head>
	<script type='text/javascript'>
		alert("内部引入js");
	</script>
</head>

外部引入

外部引入时不需要加 <script> </script>

index.html

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

test.js

// 外部引入时，通常要等页面加载完成后进行操作
window.onload = function() {
	alert("外部引入js");
}

数据类型

基本数据类型：String、Number、Boolean、Nndefined、Null、Symbol

引用数据类型：Object、Array、Function

三种等号

= 赋值符
== 判断值是否相等
=== 判断值和类型是否都相等

let和const

let 声明的变量只在 let 命令所在的代码块内有效
const 声明一个只读的常量，一旦声明，常量的值就不能改变

变量声明

var name = "Toki";

undefined和null

<script>
	typeof undefined             // undefined
	typeof null                  // object
	null === undefined           // false
	null == undefined            // true
</script>

闭包

<script>
	var add = (function (a, b) {
		return function () {return a + b;}
	})(1, 2);

	add();      // 返回 3
</script>

`prototype` 原型对象

用于操作构造函数

<script>
	function Person(first, last, age, eyecolor) {
		this.firstName = first;
		this.lastName = last;
		this.age = age;
		this.eyeColor = eyecolor;
	}

	Person.prototype.name = function() {
		return this.firstName + " " + this.lastName;
	};
</script>

常用函数

<script>
	alert();			// 弹窗
	document.write();		// 在页面渲染之前将 HTML 代码写到文档
	console.log();			// 控制台输出
	typeof "Toki"			// 查看类型
</script>

DOM 操作

获取对应 id 的元素标签，并覆盖原来的文本内容

<script>
	document.getElementById("id").innerHTML = "新内容";
	document.getElementById('id').style.backgroundColor = 'red';
</script>

获取 表单 的方法

<script>
	// 获取 ID 为 form1 的表单
	var form1 = document.getElementById("form1");

	// 获取 name 为 form2 的表单
	var form2 = document.forms["form2"];

	// 获取第3个表单
	var form3 = document.forms[2];
</script>

获取 表单元素 的方法

<script>
	// 获取 name 为 username 的表单元素
	var form1 = document.forms["form1"];
	var objUsername = form1.elements["username"];

	// 获取第1个表单的元素
	var objUsername = form1.elements[0];

	// 获取第3个表单的元素
	var objUsername = form1.elements[2];

	// 获取 name 为 Toki 的所有元素
	var objToki = form1.elements["Toki"];
	alert(objToki.length);
	alert(objToki[1].value);
</script>

JS 事件

静态添加事件

<body>
    <input type="button" onclick="alert('当鼠标点击时弹窗');">
    <form method="post" onsubmit="alert('当表单提交时弹窗');"></form>
</body>

动态添加事件

<body>
    <input type="button" id="btn1">
    <input type="button" id="btn2">
</body>

<script>
	document.getElementById("btn1").onclick = function(){
		alert("点击了按钮1");
	}

	function test(){
		alert("点击了按钮");
	}
	document.getElementById("btn2").onclick = test;
</script>

事件

描述

onclick

当鼠标点击时

ondbclick

当鼠标双击时

onmouseover

当鼠标在元素上经过时

onmouseout

当鼠标在元素上离开时

onmousedown

当鼠标按下时

onmouseup

当鼠标松开时

onmousemove

当鼠标移动时

onkeydown

当键盘按键按下时

onkeyup

当键盘按键松开时

onkeypress

当键盘按键一直按着时

onsubmit

当表单提交时

onreset

当表单重置时

onfocus

当元素获得焦点时

onblur

当元素失去焦点时

onselect

当元素文本被选中时

onchange

当元素改变时

onload

浏览器已完成页面的加载

onunload

当页面退出时

onresize

当窗口或框架调整大小时

onerror

当加载文档或图片发生错误时

onabort

当图片加载中断时

PreviousJavaScript NextTypeScript

Last updated 3 years ago