HTML 中的 jQuery 事件处理与 Ajax 异步请求

一、jQuery介绍

1、js工具库

jQuery 是一个快速、简洁且功能丰富的 JavaScript 库，它使得在网页中使用 JavaScript 更加容易和便捷。

2、下载

1. https://jquery.com/download/：
   • 生产版本，压缩过的，体积小：后缀名min.js
   • 开发版本，未压缩，体积大，可以看源码：后缀名js
2. https://www.jquery123.com

3、使用前先引入jquery

1. 引入开发版
2. 在head中使用script结合src

3. console.log($);
   打印函数则引入成功

4、文档加载完毕后再执行

$(function(){ “加载内容” })
$的最后面和function后不能写分号;

二、jQuery使用三部曲

1、获取元素

1. $("选择器")查找：找到的是jQuery对象（字典），不是js对象jQuery转js：get（0）js转jQuery：$(js对象)
2. 遍历：each
   名称.function(index,item){ $(item)}

2、绑定事件

1. 支持直接使用事件名，也支持多个事件执行

$("span:first-of-type").click(function(e){
            console.log(this,e);
        })

this是js的用法，可用$(this)改为jQuery

2. 可直接使用on方法，开启事件
   可以传入匿名参数： $(“p”).on(“click”,function(e){
   也可以传入有名参数： $(“.targe”).on(“mouseenter”, event1);
3. off方法，关闭事件
   可以传入匿名参数
   也可以传入有名参数：$(“.targe”).off(“mouseup”,event2);
   使用有名函数可对同一对象的同一事件进行开关
4. one：只能执行一次；$(“.targe”).one(“mousedown”, event3);
   • 例：
   • js所有事件：事件名不带on
   • $(this).click(function(e){ })
   • $(this).on(“事件名”,函数名)
   • $(this).off(“事件名”,函数名)：不带函数名，则关闭所有事件
   • $(this).one(“事件名”,函数名)：只执行一次

3、修改、获取

1. 内容
   text（）
   $(“a”).text()
   html()
   如果没有实参就是获取，有实参就是设置
2. 属性
   • 普通属性
     attr（“属性名”）：获取
     attr（“属性名”，“属性值”）：设置
   • 类名属性
     hasClass()
     addClass()
     removeClass()
     toggleClass()
3. 样式css
   css(“属性名”)：获取
   css(“属性名”,“属性值”)：获取设置
4. 动画
   • 显示与隐藏
     • show()
     • hide()
     • toggle()
   • 自定义：animate({ }, time, function(){ })

4、其他

1. 相关元素

   • 父：parent()
   • 子：childern()
   • 上一个：prev()
   • 下一个：next()
   • 同级别的其他：siblings()

2. 创建与删除

A.appendTo(B)：
- 返回A
- A是创建内容

$("p:nth-of-type(2)").append(
            `<div>
            <a href="https://jd.com">123</a>
            </div>`
        )

A.append（B）
- 返回A
- B是创建内容
$(‘<divclass="item">${datas[i].project}`).appendTo(“.items”);

目标元素.remove(): 移除
目标元素.empty(): 删除目标元素所有子元素

三、jQuery与服务器交互

1、form表单

作用： Form表单用于向服务器提交数据，允许用户输入和选择数据并将其发送到服务器进行处理。

应用场景： Form表单常用于用户注册、登录、搜索功能以及数据提交等场景中的数据收集和交互。

概括： Form表单用于收集用户数据并提交至服务器，适用于用户输入、数据交互、搜索等场景。

2、Ajax异步刷新

1. Ajax的中文名为“异步JavaScript和XML”
2. A作用：通过异步数据交互实现【页面局部刷新】
   适用于动态加载数据、表单验证与提交、局部更新页面内容等场景
3. $.ajax({ })
   • url：服务器地址
   • method
     • get
     • post
   • data向服务器提交的数据
     • data：{} 【使用字典提交】
   • success
     • 请求成功服务器向客户端返回的数据
     • success：function(res){}【后面为匿名函数，参数为返回内容】
     • dataType: “json”：编码转为json

3、其他

1. 跨域
   解决方法：dataType:“jsonp”
2. 时间戳
   13位：例：&=1711676386714；
   jQuery中的写法：&=${new Date().getTime()}
   new Date().getTime()
3. 输入input标签中的内容，并获取：keyup， val
   $(“input”).keyup(function(){
   let send_info = $(this).val();