什么是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>