什么是JQuery
JQuert是一个简洁，快速并且功能丰富的JS框架，可以轻松的选择和控制HTML元素，可以显著的提高操作效率。
如何使用JQuery
首先是在HTML中写入下方代码：src 属性指明了JQuery库所在的URL
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>另一种方式方式是把JQuery下载到本地（建议）并且放在当前项目
JQuery语法
基础语法
$(Selector).action()Selector： 选择器1：用来查询元素
action：执行相应的操作
JQuery的代码一般写在 document ready 中，这是为了防止文档在完全加载之前运⾏jQuery代码
代码示例：
<body>
<button type="button">点我消失</button>
<script>
$(document).ready(function(){
$('button').click(function(){
$(this).hide();
});
});
</script>
</body>
点击后就会消失
详解： $(document).ready 的主要作用是等页面的全部元素加载完成后再开始执行代码内容，如果没有这个代码，那么有可能按钮还没加载出来，代码已经执行了
function(){ } 是我们进行操作后，需要执行的操作，例如 $('button').click(function(){
) 就是在我们点击 button 按钮之后，执行 $(this.hide())操作
JQuery选择器
JQuert事件
想要构建动态页面，当用户对页面进行操作的时候，就会产生一个个事件，这些事件都会被JS捕捉到，从而进行处理
事件由三部分组成：
1.事件源：哪个元素触发的
2.事件类型：是点击，选中还是修改等等
3.事件处理程序：如何进行处理
例如我们上面实现的隐藏 button 按钮，就是一个点击事件
常见事件：
操作元素：
示例：
获取元素内容：
<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 inputVal = $("input").val();
console.log(inputVal);
});
</script>我们打开控制台就可以看到运行结果：
详解：
代码中我们用 var 类型的数据来接收内容，用 console.log 方法来将内容打印到控制台上。
var 是 JavaScript 中用来声明变量的一个关键字，除了 var 还有 let 和 const
设置元素内容：
<div id="test"></div>
<div id="test2"></div>
<input type="text" value="">
<script>
$(document).ready(function(){
$("#test").html('<h1>设置html</h1>');
$("#test2").text('<h1>设置text</h1>');
$("input").val("设置内容");
});
</script>
.html() 方法传入参数的时候，会将参数内容作为HTML代码插入到元素内部。
.text() 方法会将参数当作纯文本处理。
.val() 为输入框设置初始值，赋值给表单的value属性。
获取CSS属性
<div type="font-size: 36px;"> 我是一个小文本</div>
<script>
$(function(){
var Size = $("div").css("font-size");
console.log(Size);
});
</script>
设置CSS属性
<div>我是文本</div>
<script>
$(function(){
$("div").attr("id","666");
var Size = $("div").attr("id");
console.log(Size);
});
</script>
attr() 和 css() 的区别
猜数字大小游戏：
<button type="button" id="reset">重开一局游戏</button>
<br>
<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数:<span id="count">0</span>
<br>
结果:<span id="result"></span>
<script>
$(function(){
var count = 0;
var guessNumber = Math.floor(Math.random()*100)+1;
console.log(guessNumber);
$("#button").click(function(){
count++;
$("#count").text(count);
var userGuess = parseInt($("#number").val());
if(userGuess == guessNumber){
$("#result").text("猜对了")
}else if(userGuess < guessNumber){
$("#result").text("猜大了")
}else{
$("#result").text("猜小了")
}
});
});
$("#reset").click(function(){
guessNumber = Math.floor(Math.random()*100)+1;
count = 0;
$("#count").text(count);
$("#result").text("");
$("#number").val("");
});
</script>表白墙：
</head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 400px;
margin: 0 auto;
}
h1 {
text-align: center;
padding: 20px 0;
}
p {
color: #666;
text-align: center;
font-size: 14px;
padding: 10px 0;
}
.row {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
span {
width: 100px;
line-height: 40px;
}
.edit {
width: 200px;
height: 30px;
}
.submit {
width: 304px;
height: 40px;
color: white;
background-color: orange;
border: none;
}
</style>
<body>
<div class="container">
<h1>表白墙</h1>
<p>输入后点击提交</p>
<div class="row">
<span>谁：</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>对谁说:</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>说什么</span>
<input type="text" class="edit">
</div >
<div class="row">
<input type="button" value="提交" class="submit">
</div>
</div>
<script>
$(function(){
$(".submit").click(function(){
var from=$('.edit:eq(0)').val();
var to=$('.edit:eq(1)').val();
var message=$('.edit:eq(2)').val();
console.log(from+"对"+to+"说"+message);
if(from == ''|| to =='' || message == ''){
return;
}
var html = '<div class="row">'+ from +'对' + to +'说'+ message + '<div>';
$('.container').append(html);
$(".text").val("");
});
});
</script>