JQuery-EW帮帮网

1.引⼊依赖

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

参考地址: https://releases.jquery.com/

方式一：

进入网址选择minified

点击复制，直接粘贴

方式二：

，打开minified,保存到项目文件夹

2.JQuery 语法

jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作

$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.

Selector 选择器, ⽤来"查询"和"查找" HTML 元素

action 操作, 执⾏对元素的操作

JQuery 的代码通常都写在 document ready 函数中.

document：整个⽂档对象, ⼀个⻚⾯就是⼀个⽂档对象, 使⽤document表⽰.

3.JQuery 选择器

4.JQuery事件

JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.

⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽进⾏更复杂的交互操作

5.操作元素

1.获取、修改页面元素

三个简单的 获取元素 内容的JQuery⽅法

这三个⽅法即 可以获取 元素的内容, ⼜ 可以设置 元素的内容.

有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取

2.获取/设置元素属性

JQuery attr() ⽅法⽤于获取、修改属性值

3.获取/返回css属性

css() ⽅法设置或返回被选元素的⼀个或多个样式属性

4. 添加元素

添加 HTML 内容

5.删除元素

删除元素和内容，⼀般使⽤以下两个 jQuery ⽅法：

案例

1.猜数字

<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 () {
 // 随机⽣成⼀个 1-100 的数字
 var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数
 var count = 0;
 // click: 点击
 // 事件驱动（Event-Drive）：只要真正发⽣了点击事件时，才执⾏该函数
 $("#button").click(function () {
 count++;
 $("#count").text(count);
 var userGuess = parseInt($("#number").val());
 if (userGuess == guessNumber) {
 $("#result").text("猜对了");
 $("#result").css("color","gray");
 } else if (userGuess < guessNumber) {
 $("#result").text("猜⼩了");
 $("#result").css("color","blue");
 } else {
 $("#result").text("猜⼤了");
 $("#result").css("color","red");
 }
 });
 $("#reset").click(function(){
 guessNumber = Math.floor(Math.random() * 100) + 1
 count = 0;
 $("#count").text(count);
 $("#result").text("");
 $("#number").val("");
 });
 
 });
</script>

2.表白墙

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <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>
</head>
<body>
 <div class="container">
 <h1>表⽩墙</h1>
 <p>输⼊后点击提交, 会将信息显⽰在表格中</p>
 <div class="row">
 <span>谁: </span>
 <input class="edit" type="text">
 </div>
 <div class="row">
 <span>对谁: </span>
 <input class="edit" type="text">
 </div>
 <div class="row">
 <span>说什么: </span>
 <input class="edit" type="text">
 </div>
 <div class="row">
 <input type="button" value="提交" class="submit">
 </div>
 </div>
</body>
</html>
$(function () {
 // 给点击按钮注册点击事件
 $(".submit").click(function () {
 // 1. 获取到编辑框内容
 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;
 }
 // 2. 构造 html 元素
 var html = '<div class="row">' + from + '对' + to + '说: ' + message + 
'</div>';
 // 3. 把构造好的元素添加进去
 $('.container').append(html);
 // 4. 同时清理之前输⼊框的内容
 $(":text").val("");
 });
});

JQuery