JQuery&Ajax

文章目录

JQuery&Ajax
- [jQuery 核心基础](#jQuery 核心基础)
- - 核心特性
  - 核心语法
  - - 文件引入
    - DOM和JQuery对象转换
    - **选择器**：
    - 表单选择器
    - [**DOM 操作**：](#DOM 操作：)
    - **事件处理**：
    - - 加载事件
      - 绑定事件
- [Ajax 基础概念](#Ajax 基础概念)
- - 核心定义
  - 数据格式
- [jQuery AJAX 核心方法](#jQuery AJAX 核心方法)
- - [1. 通用方法：` $.ajax({})\`](#1. 通用方法：`$ .ajax({})`)
  - 简化方法
  - 异步与同步

jQuery 核心基础

核心特性

DOM 操作简化：通过选择器快速定位元素，提供链式调用简化操作
事件处理：统一的事件绑定 / 解绑机制，解决浏览器兼容性问题
Ajax 封装：简化异步请求操作，提供统一的 API

核心语法

文件引入

html 复制代码

<script src="js/jquery-3.4.1.js（此处为js路径）" type="text/javascript" charset="utf-8"></script>
<!-- （$is not defined ）使用了jquery对象但是并没有引入 -->

注意：

DOM对象：通过js方式获取的元素对象（document）
Jquery对象：通过jquery方式获取的元素对象，返回的是jquery包装集，且下列所讲的jquery方法只能jquery对象使用（dom对象在转换为jquery对象后也可以使用）

场景	原生 JavaScript	jQuery
返回值	`null`（无任何属性 / 方法）	空的 jQuery 对象（保留所有 jQuery 方法）
调用方法 / 属性时的表现	直接报错（阻断代码执行）	无效果，但不报错（代码可继续执行）
判断元素是否存在的方式	`if (domElement !== null)`	`if ($jqElement.length > 0)`

DOM和JQuery对象转换

javascript 复制代码

/* Dom对象 转 Jquery对象 */
// Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var divDomToJquery = $(divDom);
console.log(divDomToJquery);

/* Jquery对象 转 Dom对象 */
// 获取包装集对象中指定下标的元素，将jquery对象转换成dom对象
var divJqueryToDom = divJquery[0];
console.log(divJqueryToDom);

选择器：

javascript 复制代码

// 基础选择器
$("p")          // 标签选择器  选择所有指定标签的元素对象
$(".class")     // 类选择器
$("#id")        // ID选择器  （如果有多个同名id，则以第一个为准）
$("div,p")      // 组合选择器  选择指定选择器选中的元素对象
$("*")			//通用选择器	  选择页面中的所有元素对象

// 层级选择器
$("父元素 指定元素") // 后代选择器	父元素 指定元素 （空格隔开）
$("父元素 > 指定元素")) // 子元素选择器	父元素 > 指定元素 （大于号隔开）[选择第一代指定元素]
$("元素 + 指定元素") //相邻选择器	元素 + 指定元素 （加号隔开）  [选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）]
$("元素 ~ 指定元素") //同辈选择器	元素 ~ 指定元素 （波浪号隔开） [所有同辈]

表单选择器

直接根据表单元素类型选取，语法为 $(":type")（注意冒号开头）

选择器	描述	示例
`:input`	选取所有表单元素（包括 `<input>`、`<textarea>`、`<select>`、`<button>`）	`$(":input")` 选取页面所有表单元素
`:text`	选取所有单行文本框（`type="text"`）	`$(":text")` 选取所有文本输入框
`:password`	选取所有密码框（`type="password"`）	`$(":password")` 选取密码输入框
`:radio`	选取所有单选按钮（`type="radio"`）	`$(":radio")` 选取所有单选按钮
`:checkbox`	选取所有复选框（`type="checkbox"`）	`$(":checkbox")` 选取所有复选框
`:submit`	选取所有提交按钮（`type="submit"`）	`$(":submit")` 选取提交按钮
`:reset`	选取所有重置按钮（`type="reset"`）	`$(":reset")` 选取重置按钮
`:button`	选取所有按钮（包括 `<button>` 标签和 `type="button"` 的 `<input>`）	`$(":button")` 选取所有按钮
`:file`	选取所有文件上传框（`type="file"`）	`$(":file")` 选取文件上传控件
`:textarea`	选取所有多行文本框（`<textarea>`）	`$(":textarea")` 选取文本域
`:select`	选取所有下拉选择框（`<select>`）	`$(":select")` 选取下拉菜单

根据表单元素的状态（如是否选中、禁用等）选取元素

选择器	描述	示例
`:checked`	选取所有被选中的表单元素（单选 / 复选框）	`$(":checkbox:checked")` 选取选中的复选框
`:selected`	选取所有被选中的下拉选项（`<option>`）	`$("select option:selected")` 选取选中的下拉项
`:enabled`	选取所有可用的表单元素（未被禁用）	`$(":input:enabled")` 选取可用的表单元素
`:disabled`	选取所有被禁用的表单元素（`disabled` 属性）	`$(":input:disabled")` 选取禁用的表单元素
`:focus`	选取当前获取焦点的表单元素	`$(":input:focus")` 选取获得焦点的输入框

DOM 操作：

操作元素属性

操作元素的属性

属性的分类
javascript 复制代码
	//固有属性：元素本身就有的属性（id、name、class、style）
	//返回值是boolean的属性：checked、selected、disabled
	//自定义属性：用户自己定义的属性
attr()和prop()的区别
复制代码
1. 如果是固有属性，attr()和prop()方法均可操作
2. 如果是自定义属性，attr()可操作，prop()不可操作
3. 如果是返回值是boolean类型的属性
	若设置了属性，attr()返回具体的值，prop()返回true；
	若未设置属性，attr()返回undefined，prop()返回false；
获取属性
attr("属性名")
prop("属性名")

设置属性
attr("属性名","属性值")
prop("属性名","属性值")

移除属性
removeAttr("属性名");

静态属性用 attr() ：操作 HTML 标签上定义的初始属性（如 src、class、自定义属性）
动态状态用 prop() ：操作元素的实时状态（尤其是布尔类型状态，如 checked、disabled、selected）或 DOM 对象的内置属性

总结：如果属性的类型是boolean（checked、selected、disabled），则使用prop()方法；否则使用attr()方法。

操作元素内容

操作元素的内容

html() 获取元素的内容，包含html标签（非表单元素）

html("内容") 设置元素的内容，包含html标签（非表单元素）

text() 获取元素的纯文本内容，不识别HTML标签（非表单元素）

text("内容") 设置元素的纯文本内容，不识别HTML标签（非表单元素）

val() 获取元素的值（表单元素）

val("值") 设置元素的值（表单元素）

操作元素样式

操作元素的样式

attr("class") 获取元素的样式名

attr("class","样式名") 设置元素的样式（设置样式，原本的样式会被覆盖）

addClass("样式名") 添加样式（在原来的样式基础上添加样式，原本的样式会保留，如果出现相同样式，则以样式中后定义的为准）

css() 添加具体的样式（添加行内样式）

css("具体样式名","样式值"); 设置单个样式

css({"具体样式名":"样式值","具体样式名":"样式值"}); 设置多个样式

创建/添加元素

创建元素

$("内容")

添加元素

前追加子元素

指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。

$(内容).prependTo(指定元素); 把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。

后追加子元素

指定元素.append(内容) 在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。

$(内容).appendTo(指定元素); 把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。

前追加同级元素

before() 在指定元素的前面追加内容

后追加同级元素

after() 在指定元素的后面追加内容

在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；
如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置

删除元素

删除元素

remove()

删除元素及其对应的子元素，标签和内容一起删除

指定元素.remove();

empty()

清空元素内容，保留标签

指定元素.empty();

遍历元素

遍历元素

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element是当前的元素，此时是dom元素。

javascript 复制代码

// 内容操作
$("p").html()       // 获取/设置HTML内容
$("p").text()       // 获取/设置文本内容

// 属性操作
$("img").attr("src") // 获取/设置属性
$("input").val()     // 获取/设置表单值

// 样式操作
$("div").addClass("active")  // 添加类
$("div").css("color", "red") // 设置CSS

事件处理：

加载事件

ready加载事件

预加载事件

当页面的dom结构加载完毕后执行

类似于js中load事件

ready事件可以写多个

语法：

$(document).ready(function(){

});

简写：

$(function(){

});

绑定事件

bind绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

语法：

$(selector).bind( eventType [, eventData], handler(eventObject));

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
$, eventData\]：传递的参数，格式：{名:值,名2:值2} handler(eventObject)：该事件触发执行的函数绑定单个事件 bind绑定 $("元素").bind("事件类型",fucntion(){ }); 直接绑定 $("元素").事件名(function(){ }); 绑定多个事件 bind绑定同时为多个事件绑定同一个函数指定元素.bind("事件类型1 事件类型1 ...",function(){ }); 为元素绑定多个事件，并设置对应的函数指定元素.bind("事件类型",function(){ }).bind("事件类型",function(){ }); 为元素绑定多个事件，并设置对应的函数指定元素.bind({ "事件类型":function(){ }, "事件类型":function(){ } }); 直接绑定指定元素.事件名(function(){ }).事件名(function(){ });$

javascript 复制代码

// 1.确定为哪些元素绑定事件
		//获取元素
//2.绑定什么事件（事件类型）
		//第一个参数：事件的类型
//3.相应事件触发的，执行的操作
		//第二个参数：函数
// 绑定事件
$("button").on("click", function() { ... })

// 简化写法
$("button").click(function() { ... })

// 解绑事件
$("button").off("click")

Ajax 基础概念

核心定义

AJAX ：异步 JavaScript 和 XML，用于在不刷新页面的情况下与服务器交换数据
- 异步：无需服务器返回结果，仍然进行其他操作
核心特点：异步请求、局部刷新、提升用户体验

数据格式

JSON：轻量级格式，键值对结构，是目前主流
json 复制代码
```
{ "name": "jQuery", "version": "3.6.0" }
```

jQuery AJAX 核心方法

1. 通用方法：`$.ajax({})`

最底层、最灵活的 AJAX 方法，可配置所有参数：

url：必需，请求的服务器地址
type：请求方式GET/POST
async：是否异步，默认是true表示异步
data：发送到服务器的数据（对象或字符串）
dataType ：指定服务器返回数据的类型，自动解析（无需手动 JSON.parse()）
contentType：设置请求头
success：请求成功时的回调函数（参数为服务器返回数据）
error：请求失败时的回调（参数：XMLHttpRequest 对象、错误状态、错误信息）

javascript 复制代码

$.ajax({
  url: "data.php",        // 请求地址
  type: "GET",            // 请求方法（GET/POST）
  data: { id: 1, name: "test" }, // 请求数据
  dataType: "json",       // 预期返回数据类型（json/text/html/xml）
  async: true,            // 是否异步（默认true）
  
  // 成功回调
  success: function(response) {
    console.log("请求成功：", response);
  },
  
  // 失败回调
  error: function(xhr, status, error) {
    console.log("请求失败：", error);
  },
  
  // 无论成功失败都会执行
  complete: function(xhr, status) {
    console.log("请求完成");
  }
});

简化方法

$.get();

语法：

$.get("请求地址","请求参数",function(形参){

});

$.post();

语法：

$.post("请求地址","请求参数",function(形参){

});

$.getJSON

语法：

$.getJSON("请求地址","请求参数",function(形参){

});

**注：**getJSON方式要求返回的数据格式满足json格式（json字符串），如果返回的数据不是json格式的，则无法获取

方法	用途	示例
`$.get()`	发送 GET 请求	`$.get("url", {id:1}, function(res){...}, "json")`
`$.post()`	发送 POST 请求	`$.post("url", {data: "test"}, function(res){...})`
`$.getJSON()`	加载 JSON 数据（GET）	`$.getJSON("data.json", function(res){...})`
`$.load()`	加载 HTML 并插入到元素	`$("#box").load("page.html #content")`

异步与同步

默认异步 （async: true）：脚本不等待请求完成，继续执行后续代码
同步请求 （async: false）：会阻塞浏览器，不推荐使用（影响用户体验）

JQuery&Ajax

文章目录

JQuery&Ajax

jQuery 核心基础

核心特性

核心语法

文件引入

DOM和JQuery对象转换

选择器：

表单选择器

DOM 操作：

操作元素属性

操作元素内容

操作元素样式

创建/添加元素

删除元素

遍历元素

事件处理：

加载事件

绑定事件

Ajax 基础概念

核心定义

数据格式

jQuery AJAX 核心方法

1. 通用方法：$.ajax({})

简化方法

异步与同步

1. 通用方法：`$.ajax({})`