一、jQuery介绍

1、js工具库

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

2、下载

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

3、使用前先引入jquery

  1. 引入开发版
  2. 在head中使用script结合src
  3. console.log($);
    打印函数则引入成功

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

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

二、jQuery使用三部曲

1、获取元素
  1. 在jquery中怎么等一个异步处理完再进行下一步 jquery 异步请求_html(js对象)
  2. 遍历：each
    名称.function(index,item){ $(item)}
2、绑定事件
  1. 支持直接使用事件名，也支持多个事件执行
$("span:first-of-type").click(function(e){
            console.log(this,e);
        })
this是js的用法，可用$(this)改为jQuery
  1. 可直接使用on方法，开启事件
    可以传入匿名参数： $(“p”).on(“click”,function(e){
    也可以传入有名参数： $(“.targe”).on(“mouseenter”, event1);
  2. off方法，关闭事件
    可以传入匿名参数
    也可以传入有名参数：$(“.targe”).off(“mouseup”,event2);
    使用有名函数可对同一对象的同一事件进行开关
  3. 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()
  1. 样式css
    css(“属性名”)：获取
    css(“属性名”,“属性值”)：获取设置
  2. 动画
  • 显示与隐藏
  • show()
  • hide()
  • toggle()
  • 自定义：animate({ }, time, function(){ })
4、其他
  1. 相关元素
  • 父：parent()
  • 子：childern()
  • 上一个：prev()
  • 下一个：next()
  • 同级别的其他：siblings()
  1. 创建与删除

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是创建内容
在jquery中怎么等一个异步处理完再进行下一步 jquery 异步请求_jQuery_02{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();