JQueryAjax

JQuery&Ajax

jQuery 核心基础

核心特性

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

核心语法

文件引入

<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对象转换

/* Dom对象 转 Jquery对象 */
// Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var divDomToJquery = $(divDom);
console.log(divDomToJquery);/* Jquery对象 转 Dom对象 */
// 获取包装集对象中指定下标的元素，将jquery对象转换成dom对象
var divJqueryToDom = divJquery[0];
console.log(divJqueryToDom);

选择器：

// 基础选择器
$("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 操作：

操作元素属性

操作元素的属性

​ 属性的分类

	//固有属性：元素本身就有的属性（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；

1. 获取属性
   attr(“属性名”)
   prop(“属性名”)
2. 设置属性
   attr(“属性名”,“属性值”)
   prop(“属性名”,“属性值”)
3. 移除属性
   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({“具体样式名”:“样式值”,“具体样式名”:“样式值”}); 设置多个样式

创建/添加元素

创建元素

​ $(“内容”)

添加元素

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

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

3. 前追加同级元素
   before() 在指定元素的前面追加内容

4. 后追加同级元素
   after() 在指定元素的后面追加内容

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

删除元素

删除元素

​ remove()
​ 删除元素及其对应的子元素，标签和内容一起删除
​ 指定元素.remove();

​ empty()
​ 清空元素内容，保留标签
​ 指定元素.empty();

遍历元素

遍历元素

each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。

// 内容操作
$("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(){
​
​ });

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

Ajax 基础概念

核心定义

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

数据格式

• 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 对象、错误状态、错误信息）

$.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）：会阻塞浏览器，不推荐使用（影响用户体验）