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

一、jQuery介绍

1、js工具库

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

2、下载

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

3、使用前先引入jquery

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

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

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

$(function(){ "加载内容" })

$的最后面和function后不能写分号;

二、jQuery使用三部曲

1、获取元素

( " 选择器 " ) 查找：找到的是 j Q u e r y 对象（字典），不是 j s 对象 j Q u e r y 转 j s ： g e t （ 0 ） j s 转 j Q u e r y ： ("选择器") 查找：找到的是jQuery对象（字典），不是js对象 jQuery转js：get（0） js转jQuery： ("选择器")查找：找到的是jQuery对象（字典），不是js对象jQuery转js：get（0）js转jQuery：(js对象)
遍历：each
名称.function(index,item){ $(item)}

2、绑定事件

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

html 复制代码

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

复制代码

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

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

3、修改、获取

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

4、其他

相关元素
- 父：parent()
- 子：childern()
- 上一个：prev()
- 下一个：next()
- 同级别的其他：siblings()
创建与删除

A.appendTo(B)：

返回A

A是创建内容

html 复制代码

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

A.append（B）

返回A

B是创建内容
( ' < d i v c l a s s = " i t e m " > (`<div class="item"> ('<divclass="item">{datas[i].project}`).appendTo(".items");
目标元素.remove(): 移除

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

三、jQuery与服务器交互

1、form表单

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

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

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

2、Ajax异步刷新

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

3、其他

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