JavaScript基础1

JavaScript基本使用

JavaScript是一种可以和html标记语言混合使用的脚本语言，JavaScript 也是一种解释型语言编译型语言（有专门的编译器，因为编译型语言是一次性编译成机器语言的，所以可以脱离开发环境独立运行，而且通常运行效率较高。因此，它不需要编译。）

JavaScript用于页面特效，前后交互，以及用node.js来进行后台开发。
JavaScript可以写在<script>标签里，也可以写在外部的js文件内。

笑谈：JavaScript和Java

Javascript与Java是由不同的公司开发的不同产品。Javascript是Netscape公司的脚本语言；
而Java是SUN Microsystems 公司推出的新一代面向对象的程序设计语言。JavaScript 以交互式和动态的方式呈现网页。这允许页面对事件做出反应，展示特殊效果。
JavaScript 是动态类型语言；而 Java 是静态类型语言。JavaScript 是 HTML 中的默认脚本语言。

1、JS写在哪

  1. 写在 script 标签里面
1
2
3
4
5
6
7
<body>
<script>
    alert(123);
</script>
</body>

# alert是JS内置弹窗函数
  1. 写在外部的 js 文件内，然后引入

新建一个js文件：（不需要添加script标签）

1
2
3
<body>
<script src="xuyuan.js"></script>
</body>

2、JS 修改元素内容

  1. 首先获取id为xxx的元素，document.getElementById(“xxx”);
  2. var 是 js 定义变量的关键字
  3. innerHTML 和 innerText 可以修改/获取

补充：
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText指的是从起始位置到终止位置的内容,但它去除Html标签。
同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。

方法一：

1
2
3
4
5
6
7
<body>
<p id="txt">这是段落</p>
<script>
    var txtDom = document.getElementById('txt');
    txtDom.innerText = '我是我';
</script>
</body>

方法二：

1
2
3
4
5
6
7
8
9
10
11
<body>
<p id="p1">这是段落</p>
<button type="button" onclick="xuyuan()">点一下</button>
<script>
    function xuyuan() {
        document.getElementById("p1").innerHTML = "段落已被更改。";
    }
</script>
</body>

# onclick鼠标单击，function功能，document文件，getElementById取元素名字，innerHTML内容

3、JS 获取元素

id

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
<p id="p1">这是段落</p>
<script>
    var ppt = document.getElementById('p1');
    ppt.innerText = '我是我';
</script>
</body>
## innerText修改文本内容

第二种：给p标签加div，加一个var对象
<body>
<div id="div1">
    <p id="p1">这是段落</p>
</div>
<script>
    var box = document.getElementById('div1')
    var ppt = document.getElementById('p1');
//     ppt.innerText = '我是我';
    ppt.innerHTML = '我是他';

	console.log(box.innerText);
	// console.log(box.innerHTML);
</script>
</body>
### console.log在控制台进行打印
### box.innerText返回文本内容。。。box.innerHTML返回标签+文本内容

class

选择类不是唯一的，要加下标选择第几个

1
2
3
4
5
6
7
8
9
10
11
<body>
<div id="div1">
    <p id="p1" class="p2">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
</div>
<script>
    var box = document.getElementById('div1')
    var p11 = document.getElementsByClassName("p2");
    p11[1].innerHTML = "我是小可爱"
</script>
</body>

tagName标签名

选择标签不是唯一的，要加下标选择第几个

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<div id="div1">
    <p id="p1" class="p2">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
</div>

<script>
    var box = document.getElementById('div1')
    var p11 = document.getElementsByTagName("p");
    p11[0].innerHTML = "我是小可爱"
</script>
</body>

name属性

name属性

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<div id="div1">
    <p id="p1" class="p2" name="p3">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
</div>

<script>
    var box = document.getElementById('div1')
    var p11 = document.getElementsByName("p3");
    p11[0].innerHTML = "我是小可爱"
</script>
</body>

selector

通过CSS选择器：

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id="div1">
    <p id="p1" class="p2" name="p3">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
</div>

<script>
    var box = document.getElementById('div1');
    var p11 = document.querySelector("#p1")
    p11.innerHTML = "我是小可爱"
</script>
</body>
## 去掉下标，找#选择器

通过class

改class名字，只能获取一个，找下标也不行

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id="div1">
    <p id="p1" class="p2" name="p3">这是段落，举头望明月</p>
    <p class="p33">这是第二段段落，疑是地上霜</p>
    <p class="p33">这是第二段段落，疑是地上霜</p>
</div>

<script>
    var box = document.getElementById('div1');
    var p11 = document.querySelector(".p33")
    p11.innerHTML = "我是小可爱"
</script>
</body>

通过css获取所有：改下标，加下标，只能一次作用一个

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id="div1">
    <p id="p1" class="p2" name="p3">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
    <p class="p2">这是第二段段落，窗前明月光</p>
</div>

<script>
    var box = document.getElementById('div1');
    var p11 = document.querySelectorAll(".p2")
    p11[2].innerHTML = "我是小可爱"
</script>
</body>

JS获取元素支持复杂的CSS选择器，但是不能用伪类选择器，伪元素

JavaScript 简单事件

1、点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<body>
<div onclick="xu();">点击事件</div>
<script>
    function xu() {
        console.log("点击事件");
    }
</script>
</body>
# onclick鼠标单击， "xu();"函数名， function功能， console控制台， log日志
# 运行后，打开网页，检查，点开Console控制台，然后点击：点击事件
# 不常用





<body>
<div>点击事件</div>
<script>
    var box = document.querySelector('div');
    box.onclick = function () {
        console.log("单击");
    }
</script>
</body>
# 运行后，打开网页，检查，点开Console控制台，然后点击：点击事件
# var 语句用于声明变量。，box变量，document文档，querySelector选择器，onclick鼠标单击，function功能
# querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。






<body>
<div>点击事件</div>
<script>
    var box = document.querySelector('div');
    box.onclick = function () {
        console.log("单击");
    }
    box.ondblclick = function () {
        console.log("双击");
    }
</script>
</body>
# 运行后，打开网页，检查，点开Console控制台，然后点击：点击事件
# 复制单击事件，然后改onclick单击为ondblclick双击即可








案例：单击
<head>
    <script>
        function xu(){
	    document.getElementById("p1").innerHTML="单击事件";
	}
	</script>
</head>
<body>
<button onclick="xu()">单击</button>
<p id="p1"></p>
</body>
定义和用法
onclick 事件会在元素被点击时发生。

案例：双击
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<button ondblclick="onclick_test()">双击</button>
		<p id="p1"></p>
	</body>
	<script type="text/javascript">
		function onclick_test() {
			document.getElementById('p1').innerHTML = '双击事件';
		}
	</script>
</html>
ondblclick 事件会在对象被双击时发生。

2、鼠标事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
在head里面添加div盒子样式，方便观察：
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background: #2196F3;
			}
		</style>
	</head>
	<body>
		<div id="p1"></div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById('p1');
		// 鼠标划入事件
		box.onmouseover = function () {
			box.style.backgroundColor = 'pink';
		}
		
		// 鼠标移出事件
		box.onmouseout = function () {
			box.style.backgroundColor = 'blue';
		}
	</script>
</html>


'''
mouseenter：当鼠标移入某元素时触发。

：当鼠标移出某元素时触发。

mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。

mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。

mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。
'''

3、窗口变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在script中添加事件即可，监控窗口的变化：
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		window.onresize = function () {
			console.log('窗口发生改变了');
		}
	</script>
</html>

4、改变下拉框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
先在body里面添加一个下拉框：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<select>
			<option>北京</option>
			<option>上海</option>
			<option>广州</option>
			<option>深圳</option>
		</select>
	</body>
	<script type="text/javascript">
		var sel = document.querySelector('select');
		sel.onchange = function() {
			console.log('下拉框内容改变了')
		}
	</script>
</html>

# 运行后，打开网页，检查，点开Console控制台，然后选择下拉框，更换下拉框内容后会响应事件，不更换没有响应。
# var 语句用于声明变量。，sel变量，document文档，querySelector选择器，function功能
# querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
# onchange 事件会在域的内容改变时发生。

JavaScript 修改样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
单个样式修改：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div class="box">
			图灵课堂
		</div>
	</body>
	<script type="text/javascript">
		var obj = document.querySelector('.box');
		obj.style.color = 'red';
	</script>
</html>





多个样式修改:(接着添加)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div class="box">
			图灵课堂
		</div>
	</body>
	<script type="text/javascript">
		var obj = document.querySelector('.box');
		obj.style.cssText = "width:200px;height:200px;background:skyblue";
	</script>
</html>
# cssText的本质就是设置 HTML 元素的 style 属性值。
# cssText的返回值：在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号。

1、标签属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
先建立模型框架：
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: deepskyblue;
        }
        .text{
            width: 400px;
            height: 400px;
            background: red;
        }
    </style>
<body>
    <div class="box">属性操作</div>
    <script>
        // 获取元素
        var box = document.querySelector(".box")
        // JS操作标签属性(增删改查)
        // 增
        // 删
        // 改
        // 查
    </script>
</body>
### style建立两个样式备用。下方准备操作增删改查





然后操作增删改查：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
		    .box{
		        width: 100px;
		        height: 100px;
		        background: deepskyblue;
		    }
		    .text{
		        dth: 400px;
		        height: 400px;
		        background: red;
		    }
		    </style>
	</head>
	<body>
		<div class="box">属性操作</div>
	</body>
	 <script>
	        // 获取元素
	        var box = document.querySelector(".box")
	        // JS操作标签属性(增删改查)
	        // 增
			box.className = "box"
	        // 删
			 box.removeAttribute('class');
	        // 改
			box.className = "text";
	        // 查
			console.log(box.className)
	    </script>
</html>




接下来是属性的增删改查操作：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
		    .box{
		        width: 100px;
		        height: 100px;
		        background: deepskyblue;
		    }
		    .text{
		        dth: 400px;
		        height: 400px;
		        background: red;
		    }
		    </style>
	</head>
	<body>
		<div class="box">属性操作</div>
	</body>
	    <script>
	        // 获取元素
	        var box = document.querySelector(".box")
	        // JS操作标签属性(增删改查)
	        // 增
			box.setAttribute('hh', 'ww')
	        // 删
			box.removeAttribute("hh");
	        // 改
			box.setAttribute('hh','tt');
	        // 查
			console.log(box.hasAttribute('hh'));
	    </script>
</html>

JavaScript 数据类型

JS有六大数据类型：

  1. Number类型: 整数和小数
    NaN属性： not a number（属于数字类型，但不是数字）
    isNaN(): 用来检查参数是否是非数字值

  2. string类型： 字符串
    length属性： 查看长度

  3. Boolean类型: 布尔
    true和false 小写真假

  4. Undefined类型
    只有一个值：undefined，变量声明但未初始化，这个变量的值就是undefined

  5. Null类型
    js里null属于对象类型的，但是它不具有对象的共性，所以，单独归为一类。

  6. object类型
    js中对象类型是一组集合。

JavaScript 数字：

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<script>
var x = 3.14;
var y = 314;
var z1=123e4;
var z2=123e-4;
document.write(x + "<br>")
document.write(x + y + "<br>")
document.write(z1 + "<br>")
document.write(z2 + "<br>")
</script>
<!--z=123e5极大或极小的数字可以通过科学（指数）计数法来书写：-->
</body>

JavaScript 字符串：

1
2
3
4
5
6
7
8
9
10
11
<body>
	<script>
		var a="窗前明月光，";
		var b='疑是地上霜。';
		var c='举头望\"明月\"，';
		var d='低头思"故乡"。';
		document.write(a + "<br>" + b + "<br>")
		document.write(c + "<br>")
		document.write(d + "<br>")
	</script>
</body>

JavaScript 布尔：
布尔（逻辑）只能有两个值：true 或 false。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
	var x=true;
	var y=false;
	document.write(x + "<br>")
	document.write(y + "<br>")
</script>


案例：
<script>
	var x = 3.14;
	var y = 314;
	document.write(x == y + "<br>")
</script>

JavaScript 数组：
数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<body>
	<script>
		var i;
		var j = new Array();
    		j[0] = "北京";
    		j[1] = "上海";
    		j[2] = "广州";
		for (i=0;i<j.length;i++) {
		document.write(j[i] + "<br>");
		}
	</script>
</body>


// 缩减一下写法：
<body>
<script>
var i;
var j=new Array("北京","上海","广州");
for (i=0;i<j.length;i++) {
document.write(j[i] + "<br>");
}
</script>
</body>

// 直接赋值：
<body>
<script>
var i;
var j=["北京","上海","广州"];
for (i=0;i<j.length;i++) {
document.write(j[i] + "<br>");
}
</script>
</body>

JavaScript 对象：

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

对象属性有两种寻址方式：
第一种：document.write(tt.age + “ “)，直接对象名字点数组中的键位，找值
第二种：document.write(tt[“name”] + “ “)，直接对象名字点，中括号找下标，键位

1
2
3
4
5
6
7
8
9
10
11
<!--JavaScript 对象-->
<script>
var tt = {
	name : "栩源",
	age  : 18,
	sex  :  '男'
};
document.write(tt.age + "<br>");
document.write(tt["name"] + "<br>");
</script>
</body>

Undefined 和 Null

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

1
2
3
4
5
6
7
8
9
10
<body>
<script>
var i;
var j="栩源";
document.write(i + "<br>");
document.write(j + "<br>");
var j=null
document.write(j + "<br>");
</script>
</body>

Object 构造函数创建一个对象包装器

1
2
3
4
5
6
7
8
9
10
11
<body>
    <script>
        var a = {name:'栩源',age:18};
        var b = [1,2,3];
        console.log(typeof a);
        console.log(typeof b);
    </script>
</body>

# typeof，查看数据类型
# 从网页检查，查看控制台
#frontend #JS
JavaScript基础1
http://auspiow.github.io/blog/2025/02/05/JavaScript基础1/
作者
Auspiow
发布于
2025年2月5日
许可协议
AUSPIOW 2026 © ALL RIGHTS RESERVED.