HTML基础P2 | JS基础讲解
什么是JS
JS是一个网页的脚本语言，你可以理解为在HTML中写类似于JAVA等高级编程语言的代码，使得网页可以实现一些包含逻辑处理的交互操作
简单上手例子
接下来，给大家一个简单的小例子来感受一下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JsDemo</title>
</head>
<body><script>alert("Hello JavaScript!")</script>
</body>
</html>
我们可以发现，网页在加载时就弹出来了一个弹窗，这就是我们JS的作用
引入方式
行内样式
直接在一个标签内给它写一个js的属性，如：
<input type="button" value="点我一下" onclick="alert('你点了我')">内部样式
例如上述给出来的例子，使用<script></script>标签写在内部
外部样式
使用<script src=""></script>样式标签引入外部js，如：
<script src="hello.js"></script>基础知识
声明变量
| 关键字 | 解释 | 示例 |
| var | 早期JS中声明变量的关键字，作用域在该语句所在函数内 | var name = 'zhangsan'; |
| let | ES6中新增声明变量的关键字，作用域为该语句所在的代码块 | let name = 'zhangsan'; |
| const | 声明变量后，不能修改变量值 | const name = 'zhangsan'; |
数据类型
| 数据类型 | 描述 |
| number | 数字，不区分整数和小数 |
| string | 字符串，需要用单引号或者双引号包裹起来 |
| boolean | 布尔类型，true为真，false为假 |
| undefined | 表示变量未初始化 |
语法格式
//创建函数
function 函数名(形参列表) {
函数体
return 结果;
}
//调用函数
函数名(形参列表);
<script>function hello() {console.log("hello");}hello();
</script>提示
当然，JS中还包含了很多其它内容，但是本博客只是粗略地介绍了一下什么是JS，剩下的如对象啊，数组啊之类的其余内容在此不过多赘述
JQuery
什么是JQuery
由于原生JS在实践过程中非常的冗余复杂，因此一种新的JS框架应运而生，即JQuery，它可以简化我们对于JS的应用和代码
如何使用JQuery
我们在使用JQuery前必须要先引入它，在引入它之前我们必须先下载一个JQuery的js文件，大家可以去它的官网：jQuery 进行下载，下载完成后我们使用外部样式方式引入这个js
<script src="jquery-3.7.1.min.js"></script>注意：我们下载的是minified的
语法格式
$(selector).action()
- $()是一个函数，它是JQuery提供的一个全局函数，用于选择和操作HTML元素
- Selector选择器，用来“查询”和“查找”HTML元素
- action操作，执行对元素的操作
JQuery选择器
| $("*") | 选取所有元素 |
| $(this) | 选取当前HTML元素 |
| $("p") | 所有<p>元素 |
| $("p:first") | 选取第一个p元素 |
| $("p:last") | 最后一个<p>元素 |
| $(".box") | 所有class = "box"元素 |
| $("#box") | id = "box"的元素 |
| $(".intro, .demo") | 所有class = "box"且 class = "demo"的元素 |
| $("p .intro") | class = "intro"的<p>元素 |
| $("ul li:first") | 选取第一个<ul>元素的第一个<li>元素 |
| $(":input") | 所有<input>元素 |
| $(":text") | 所有type = "text"的<input>元素 |
| $(":checkbox") | 所有type = "checkbox"的<input>元素 |
JQuery事件
- 事件源：哪个元素触发的
- 事件类型：是点击，选中，还是修改？
- 事件处理程序：进一步如何处理，往往是一个回调函数
点击事件代码
$("p").click(function() {//动作发生后执行的代码
})常见事件有
| 事件 | 代码 |
| 文档就绪事件（完成加载） | $(document).ready(function) |
| 点击事件 | $(selector).click(function) |
| 双击事件 | $(selector).dbclick(function) |
| 元素的值发生改变 | $(selector).change(function) |
| 鼠标悬停事件 | $(selector).mouseover(function) |
操作元素
| JQuery方法 | 说明 |
| text() | 设置或返回所选元素的文本内容 |
| html() | 设置或返回所选元素的内容（包括HTML标签） |
| val() | 设置或返回表单字段的值 |
注意：text()用于行内元素，val()用于表单元素，示例如下所示：
获取元素内容
<body><div id="test"><span>你好</span></div><input type="text" value="hello"><script>$(document).ready(function () {var html = $("#test").html();console.log("html内容为：" + html);var text = $("#test").text();console.log(text);var text = $("input").val();console.log(text);})</script>
</body>设置元素内容
<body><div id="test"></div><div id="test2"></div><input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>我是h1</h1>');$("#test2").text('<h1>设置text</h1>');$("#text").val("设置内容");})</script>
</body>我们可以发现，html()中可以正常解析为h1，而text中只是单纯把所有内容渲染在网页上
添加元素
| 方法 | 说明 |
| append() | 在被选元素的结尾插入内容 |
| prepend() | 在被选元素的开头插入内容 |
| after() | 在被选元素之后插入内容 |
| before() | 在被选元素之前插入内容 |
删除元素
| 方法 | 说明 |
| remover() | 删除被选元素（及其子元素） |
| empty() | 删除被选元素的子元素 |
综合案例
接下来我将会提供两个小案例，大家可以自己尝试一下~~
猜数字
如图所示，我们要实现，用户每一次加载界面之后会有一个1-100的随机数，用户在输入框中输入数字后，点击猜按钮，浏览器会反馈猜大了，猜小了或者猜对了，次数也会对应+1，点击重开就会重置
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字</title><script src="jquery-3.7.1.min.js"></script>
</head>
<body><button id="reset">重新开始一局游戏</button><br><span>请输入要猜的数字：</span><input type="text" id="guessNum"><button id="guess">猜</button><br><span>已经猜的次数：</span><span id="count">0</span><br><span>结果：</span><span id="result"></span><script>$(function() {var count = 0;var num = Math.floor(Math.random() * 100 + 1); //随机1-100的数字console.log(num);$("#guess").click(function() {count++;$("#count").text(count);let guessNum = $("#guessNum").val();if(guessNum < num) {$("#result").text("猜小了");$("#result").css("color", "red");} else if(guessNum > num) {$("#result").text("猜大了");$("#result").css("color", "red");} else {$("#result").text("猜对了");$("#result").css("color", "green");}})$("#reset").click(function() {num = Math.floor(Math.random() * 100 + 1);$("#guessNum").val("");$("#count").text(0);$("#result").text("");})})</script>
</body>
</html>表白墙
这个案例要实现，用户在三个输入框中分别输入内容并提交后，下方会显示形如A 对 B 说：xxx的 内容
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><script src="jquery-3.7.1.min.js"></script><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}.title {text-align: center;margin-top: 30px;}.note {color: grey;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;padding: 1px 0;}.row span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: palevioletred;border: none;}</style>
</head>
<body><div class="container"><div class="title"><h1>表白墙</h1></div><div class="note"><span>输入后点击提交，会将信息显示在表格中</span></div><div class="row"><span>谁：</span><input type="text" class="edit" id="from"></div><div class="row"><span>对谁：</span><input type="text" class="edit" id="to"></div><div class="row"><span>说什么：</span><input type="text" class="edit" id="say"></div><div class="row"><button class="submit" id="submit">提交</button></div></div><script>//点击事件获取数据$("#submit").click(function() {var from = $("#from").val();var to = $("#to").val();var say = $("#say").val();//构造html元素if(from != "" || to != "" || say != "") {var html = '<div class ="row">' + from + " 对 " + to + " 说：" + say + '</div>';}//将元素添加进去并置空$(".container").append(html);$("#from").val("");$("#to").val("");$("#say").val("");})</script>
</body>
</html>