JS 入门到精通

最新推荐文章于 2023-05-15 15:05:00 发布

是我来晚了！

最新推荐文章于 2023-05-15 15:05:00 发布

阅读量482

点赞数 2

分类专栏：前端文章标签： javascript js css python java

本文链接：https://blog.csdn.net/weixin_51927215/article/details/116134795

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

JS

1、引入方式 — 外联式
2、引入方式 — 内嵌式
3、JS 基本数据类型及变量
4、JS - BOM
5、JS - DOM
6、获取元素节点
7、JS 事件
8、画板案例
9、留言板案例
10、浏览器默认行为

1、引入方式 — 外联式

新建 JS 文件

alert("hello world")

新建 Html 文件
在头部引入 JS 文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="1.js"></script>
</head>
<body>

</body>
</html>

2、引入方式 — 内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		alert("hello world")
	</script>
</head>
<body>

</body>
</html>

在浏览器中打开

在这里插入图片描述
特别注意

type="text/javascript" 说明当前 script 标签中文本的类型
所有 JS 代码写在 script 标签
script 放在 head 标签中
可以引入多个 script 标签，多个 script 标签顺序执行
JS 代码可以引入外部文件
如果当前 script 标签作用是引入外部文件，那么这个 script 标签中就不能再写入代码了

3、JS 基本数据类型及变量

基本数据类型

	数字 number（实数）
	字符串 string
	布尔值 bool 		
    特殊数据类型 null-空 undefined-未声明

变量起名根据标识符

由数字、字母、下划线、$组成
不能以数字开头
区分大小写
标识符必须见名知意

4、JS - BOM

BOM 就是浏览器的对象模型，浏览器可以通过调用系统对话框，向用户显示信息

系统提供三个函数

	window.alert("hello world")
	window.confirm("选择确定或取消")
	window.prompt("请输入数据","1314521")
	// windwo.prompt("文字标识","默认值")

新建 Html 文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.alert("hello world")
		window.confirm("选择确定或取消")
		window.prompt("请输入数据","1314521")
	</script>
</head>
<body>

</body>
</html>

在浏览器中打开（浏览器会依次弹出三个对话框）

在这里插入图片描述

特别注意（自定义弹出内容）

先定义变量（susu）并且初始化赋值（xiaoke）
弹出（susu）变量对应的数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		var susu = "xiaoke"
		window.alert(susu)
	</script>
</head>
<body>
	<div id="div1">susu</div>
</body>
</html>

特别注意（弹出变量数据类型）

弹出变量内容（alert 变量）
弹出变量类型（alert typeof 变量）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		var susu = "xiaoke";
		var qiqi = 12;
		window.alert(typeof susu);
		window.alert(typeof qiqi);
	</script>
</head>
<body>
	<div id="div1">susu</div>
</body>
</html>

在浏览器中打开

在这里插入图片描述

5、JS - DOM

先看一段代码

在标签（script）下定义了变量（susu）
在身体部分（body）定义了一个盒子（ID 为 div1）
我们称这为通过 ID 获取节点（此处节点为一个元素）
元素（标签 + 内容）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		var susu = document.getElementById("div1");
		alert(susu);
	</script>
</head>
<body>
	<div id="div1">susu</div>
</body>
</html>

在浏览器中打开（发现提示 null 空值）

在这里插入图片描述
因为代码是从上而下执行的，所以此时为空值

window.onload = function() 的作用是使其中的代码在 body 之后执行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var susu = document.getElementById("div1");
			alert(susu);
		}
	</script>
</head>
<body>
	<div id="div1">susu</div>
</body>
</html>

在浏览器中打开

在这里插入图片描述
更多的属性

标签（tagName）
ID 名（id）
类名（class）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var susu = document.getElementById("div1");
			alert(susu);
			alert(susu.tagName);
			alert(susu.id);
			alert(susu.className);	
		}
	</script>
</head>
<body>
	<div id="div1" class="love">susu</div>
</body>
</html>

6、获取元素节点

	id 属性： document.getElementById() 
	tagName 标签名：document.getElementsByTagName() 
	name 属性：document.getElementsByName() 
	class 属性：document.getElementsByClassName()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var d1 = document.getElementById("div1");
            // 1. 在控制台输出对应节点的内容
            console.log(d1.innerHTML);
            // 2. 表示第二个 div 标签
            var d2 = document.getElementsByTagName("div")[1];
            console.log(d2.innerHTML);
        }
    </script>
</head>
<body>
    <div id="div1">aaa</div>
    <div>bbb</div>
</body>
</html>

在浏览器中打开

在这里插入图片描述
通过节点获取标签的颜色及设置颜色

将获取的节点 id:div1 ，赋值给变量 d1
通过命令 console.log 向控制台写入数据
通过命令 变量.style.color 获取颜色及设置颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var d1 = document.getElementById("div1");
            console.log(d1.style.color);
            var d2 = document.getElementsByTagName("div")[1];
            d2.style.color = "red";
        }
    </script>
</head>
<body>
    <div id="div1" style="color: rgb(43, 43, 170);">keke</div>
    <div>i love you</div>
</body>
</html>

在浏览器中打开

在这里插入图片描述
特别注意

命令 变量.style.color 只能获取行内颜色
如果碰到内嵌样式，则需要通过命令 getComputedStyle(d2)["color"] 来获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    	<!-- 1. 第二个盒子（div）内嵌样式 -->
    	#div2{
    		color: red;
    	}
    </style>

    <script>
        window.onload = function(){
            var d1 = document.getElementById("div1");
            console.log(d1.style.color);
            var d2 = document.getElementsByTagName("div")[1];
            console.log(d2.style.color);
            console.log(getComputedStyle(d2)["color"]);
        }
    </script>
</head>
<body>
	<!-- 2. 第一个盒子（div）行内样式 -->
    <div id="div1" style="color: rgb(43, 43, 170);">keke</div>
    <div id="div2">i love you</div>
</body>
</html>

在浏览器中打开

在这里插入图片描述
通过父节点获取

父类节点 ul[0] 赋值给变量 ul1
获取父类节点的所有子类节点，通过命令 ul1.childNodes 并赋值给变量 lis
命令 lis.length 可以查询出子类节点的个数，通过循环我们将子类节点输出在控制台上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    	window.onload = function(){
        	var ul1 = document.getElementsByTagName('ul')[0];
        	var lis = ul1.childNodes;
        	alert(lis.length);
        	for(var i=0;i<lis.length;i++)
        	{
        		console.log(lis[i]);
        	}
        }
    </script>
</head>
<body>
	<ul>
		<li>aaaa</li>
		<li>bbbb</li>
		<li>cccc</li>
		<li>dddd</li>
	</ul>
</body>
</html>

在浏览器中打开

在这里插入图片描述
简单介绍

在这里插入图片描述

7、JS 事件

7.1、JS 事件（鼠标）

简介

js 事件是用来获取事件的详细信息，如鼠标位置、键盘按键等
主要分为：鼠标事件、键盘事件、表单事件
组成：on + 事件名称

鼠标事件

onclick //鼠标点击事件 
ondblclick //鼠标双击事件 
onmousedown //鼠标上的按钮被按下了
onmouseup //鼠标按下后，松开时激发的事件 
onmouseover //当鼠标移动到某对象范围的上方时触发的事件 
onmousemove //鼠标移动时触发的事件 
onmouseout //当鼠标离开某对象范围时触发的事件

鼠标事件属性

e.clientX //鼠标距离可视区的左边距离 
e.clientY //鼠标距离可视区的上边距离 
e.pageX //鼠标距离页面的左边距离 
e.pageY //鼠标距离页面的上边距离 
e.offsetX //鼠标距离事件源的左边距离 
e.offsetY //鼠标距离事件源的上边距离

鼠标事件示例

定义一个盒子（宽和高均为 300 px，背景颜色为绿色）
通过节点获取一个元素并且赋值给一个变量（div1）
通过变量绑定鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    	window.onload = function(){
    		var div1 = document.getElementById('div1');
    		div1.onclick = function(e){
    			// window.event 窗口事件（参数）
    			console.log("点击 div1 盒子");
    		}
    		div1.ondblclick = function(e){
    			console.log("双击 div1 盒子");
    		}
    		div1.onmouseover = function(e){
    			console.log("鼠标在 div1 盒子上面");
    		}
        }
    </script>
</head>
<body>
	<div id="div1" style="background-color: green;width: 300px;height: 300px;"></div>
</body>
</html>

在浏览器中打开

在这里插入图片描述
鼠标属性示例

改变盒子的高度（3000 px）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    	window.onload = function(){
    		var div1 = document.getElementById('div1');
    		div1.onclick = function(e){
    			// window.event 窗口事件（参数）
    			console.log(e.clientX,e.clientY);
    			console.log(e.pageX,e.pageY);
    			console.log(e.offsetX,e.offsetY);
    		}
        }
    </script>
</head>
<body>
	<div id="div1" style="background-color: green;width: 300px;height: 3000px;"></div>
</body>
</html>

在浏览器中打开

在这里插入图片描述

7.2、JS 事件（键盘）

键盘事件

onKeyPress //当键盘上的某个键被按下并且释放时触发的事件 
onKeyDown //当键盘上某个按键被按下时触发的事件 
onKeyUp //当键盘上某个按键被按放开时触发的事件

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            document.onkeypress = function(e){
                console.log("键盘按住且松开");
            }
            document.onkeydown = function(e){
                console.log("键盘松住");
            }
            document.onkeyup = function(e){
                console.log("键盘松开")
            }
        }
    </script>
</head>
<body>

</body>
</html>

在浏览器中打开

在这里插入图片描述
快捷键触发

输出控制台三个布尔值
顺序为（alt，shift，ctrl）按键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            document.onkeydown = function(e){
                console.log(e.altKey,e.shiftKey,e.ctrlKey);
            }
        }
    </script>
</head>
<body>

</body>
</html>

在浏览器中打开

在这里插入图片描述

7.3、JS 事件（表单）

表单事件

onblur //当前元素失去焦点时触发的事件 
onfocus //当某个元素获得焦点时触发的事件
onchange //当前元素失去焦点并且元素的内容发生改变而触发的事件 
onsubmit //提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var text = document.getElementById("text");
            text.onblur = function(e){
                console.log("失去焦点");
            }
            text.onfocus = function(e){
                console.log("获取焦点");
            }
        }
    </script>
</head>
<body>
    <input type="text" name="" id="text" value="i love you">
</body>
</html>

在浏览器中打开

在这里插入图片描述

8、画板案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    	window.onload = function(){
    		var div1 = document.getElementById('div1');
    		var h11 = document.getElementById("h11");
    		div1.onmousemove = function(e){
    			// window.event 窗口事件（参数)
    			var x = e.offsetX;
    			var y = e.offsetY;
    			//  鼠标在盒子里面移动 示数为距离源（盒子）的距离
    			h11.innerHTML = x + "," + y;
    		}
    		// 鼠标移出盒子 示数消失
    		div1.onmouseout = function(e){
    			h11.innerHTML = "";
    		}
        }
    </script>
</head>
<body>
	<div id="div1" style="width: 300px;height: 300px;border: 1px solid black;">
		<h1 id="h11" style="color: pink"></h1>
	</div>
</body>
</html>

在浏览器中打开

在这里插入图片描述

9、留言板案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            // 获取三个节点
            var div1 = document.getElementById('div1');
            var text = document.getElementById("text");
            var button = document.getElementById("button");
            // 绑定按钮点击事件
            button.onclick = function(e){
                console.log("按钮点击激发事件：" + text.value);
                // var text = "";
                // 点击后 将文本框的内容同步到盒子中
                div1.innerHTML += (text.value+"<br>");
            }
            // 绑定键盘回车事件
            text.onkeydown = function(e){
                if(e.keyCode == 13){
                    // 回车后 将文本框的内容同步到盒子中
                    console.log("回车激发事件：" + text.value);
                    div1.innerHTML += (text.value+"<br>")
                }
            }
        }
    </script>
</head>
<body>
    <!-- 盒子内容超出自动出现滚动条（overflow） -->
    <div id="div1" style="border: 2px solid black;width: 300px;height: 300px;overflow: auto;"></div>
    <input type="text" name="" id="text" value="i love you">
    <input type="button" name="" value="打猪" id="button">
</body>
</html>

在浏览器中打开

在这里插入图片描述

10、浏览器默认行为

阻止浏览器跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var link = document.getElementById("a1");
            link.onclick = function(e){
                console.log("可以重复查询点击次数，不会受到页面跳转的影响")
                e.returnValue = false;
                // return false;
            }
        }
    </script>
</head>
<body>
    <a href="" id="a1">当前页面</a>
</body>
</html>