你好，我是肖索琪
本文对应全套jQuery教程。 文章很长，忘记收藏以备将来使用了~
这是肖索奇在学习jQuery视频时精心整理的Markdown格式文件（我也想做免费教程，搜了下评论区，发现没有人留下Markdown格式的文章……）
对应视频链接
老师讲解得很好，很容易理解~
我在老师讲解的基础知识之前添加了百度百科、ChatGPT、自己的观点拓展等，并制作了一套精美的Markdown格式笔记，方便阅读和下载。 地址链接密码：2p7h
可以结合视频+笔记来学习jQuery，方便备考，效率更高（根据自己的习惯）
因为Markdown格式不方便大家下载图片，所以我使用OCR工具，结合对ChatGPT的理解，将图片内容的精华组织到文字中的注释中
扩展和补充
什么是 DOM 树
先说答案：也叫对象
在 JavaScript 中，对象是一种可以存储多个键名对的数据类型。 每个通配符对都包含一个属性名称和一个相应的值。 可以使用点或方括号访问对象中的属性。
例如：
var person = {
name: "Tom",
age: 25,
gender: "male"
};
console.log(person.name); // 输出 Tom
console.log(person["age"]); // 输出 25
里面的代码创建了一个名为 person 的对象，它具有三个属性：姓名、年龄和性别。 这些属性的值可以通过点或方括号访问。
另一方面，变量是用于存储特定值的标识符。 在 JavaScript 中，变量可以存储任何类型的值，包括字符串、数字、布尔值、对象等。有时，我们将对象存储在变量中，以便我们可以轻松访问对象的属性。
例如：
var person = {
name: "Tom",
age: 25,
gender: "male"
};
var personName = person.name;
console.log(personName); // 输出 Tom
里面的代码创建了一个名为person的对象，并将其存储在一个变量中。之后，将person对象的name属性的值存储在另一个变量personName中，并输出该变量的值
价值。 这里的person变量和personName变量是JavaScript中的变量，而不是对象。
vara=document.ElementById('text') 为什么a被称为dom对象？
在 JavaScript 中jquery 对象属性是，文档对象模型 (DOM) 是表示 HTML 或 XML 文档的标准对象集合。 通过 DOM，JavaScript 可用于访问和操作 HTML 或 XML 文档中的各种元素、属性和元素。
在您的代码中， document.getElementById('text') 返回一个表示具有指定 ID 的 HTML 元素的对象。 因此，当它的形参被赋予变量 a 时，a 就变成了 DOM 对象。 这个DOM对象可以用来进一步访问和操作HTML元素的各种属性和技能，比如改变样式、内容等等。
事实上，DOM对象是JavaScript中用来访问和操作HTML或XML文档的标准对象，但是document.getElementById()返回的对象也是一个DOM对象，所以在你的代码中，a也被称为DOM对象。
对于没学过js的人来说，了解那些对于理解jQuery有很大的帮助！
jQuery
dom 对象和 jQuery 对象
jQuery 中的 $ 是什么
总之，$好像是jQuery程序的符号
$() 函数实际上是 jQuery() 函数的简写，它接受一个 CSS 选择器字符串作为参数jquery 对象属性是，并返回一个包含匹配元素的 jQuery 对象。例如，$("p") 可以选择所有
元素。
除了选择元素之外，$() 函数还可以用于创建新的 HTML 元素、设置和获取元素的属性和样式、处理风暴、执行动画等等。 为此，$符号在jQuery中扮演着非常重要的角色，并在jQuery编程中被广泛使用。
引入 jQuery
要使用jQuery，首先要引入jQuery库。需要使用以下语句
$(document) 将 DOM 对象文档转换为 jQuery 对象。 $(document).ready()函数是在DOM对象加载后立即执行的函数。
$document.ready() 等价于 $(), jQuery(), window.jQuery()
所以 $(document).ready() 可以写成 $(function(){alert("HellojQuery")};
dom对象和jQuery对象之间的转换。
jQuery 变换 dom
// html标签定义一个
var domBtn = document.getElementById("btn");
var $btn = $(domBtn); // 前面的$btn 这个是自定义的名字 $ 不是必须的
//我是按钮
alert($btn.val());
jQuery 对象也可以转换为 dom 对象
function btnClick(){
// 定义的标签有
//
var obj = $("#txt")[0] // 从数组中获取下标是0的dom对象
var obj = $("#txt").get[0] // 从数组中获取下标是0的dom对象
var num = obj.value;
obj.value = num * num
}
为什么我们需要转换dom和jQuery？
3. Selector：是一个字符串，用于定位dom对象。 定位到dom对象后，就可以通过jQuery函数来操作dom了
选择器
标签选择器
例子：
//数组中有三个对象
var obj = $("div");
// 给所有div设置背景色
obj.css ("background","blue");
表单选择器
例子：
var obj = $(":checkbox") // 数组，有三个对象
for(var i = 0; i < obj.length; i++){
var dom = obj[i];
//需要jQuery，用我们前面的转换方式
var jobj =$(dom);
// 调用jQuery函数
alert("jQyery函数调用=" + jobj.val())
}
其他标签类似
组合选择器
扩张
* 表示选择所有DOM对象
筛选
定位到dom对象后，根据一些条件过滤dom对象。
公共选择器
表单属性过滤器
根据表单中dom对象的状态，定位到dom对象。
启用状态，启用
不可用状态禁用
选择状态，勾选，如radio、checkbox
$(":文本:启用")
$(":文本:禁用")
$(":复选框:选中")
扩张
在 HTML 中，元素用于创建各种表单控件，例如文本框、单选按钮、复选框等。当用户将数据输入到表单控件中时，这些数据通常会保存到控件的
在值属性中。
在 jQuery 中将 Storm 绑定到 dom 对象
功能
瓦尔
操作链表中DoM对象的value属性，
$(selector).val()：不带参数调用，读取链表中第一个DOM对象的value属性值
$(selector).val(value)：带参调用：为链表中所有DOM对象的value属性的值做统一的形参
文本
操作链表中所有DOM对象的【文本显示内容属性】
$(选择器).text()
无参数调用，读取链表中DOM对象的文本显示内容，将获取到的内容连接成字符串并返回
$(function(){
$("#btn1").click(function(){
//var() 获取的是dom数组的第一个对象的value属性值
// 下面定义的有三个input标签，有各自的value属性
var text = $(":text").val();
alert(text);
})
})
$(选择器).text(值)
有参数形式，统一参数化链表中所有DOM对象的文本显示内容
$("btn4").click(function(){
//设置div的文本值
$("div").text("新的div文本内容");
})
$(选择器).attr("属性名称")
获取DOM列表中第一个对象的属性值（attribute属性值）
$(selector).attr("属性名称", "值")
将链表中所有 DOM 对象的属性设置为新值
消除
$(selector).remove()：删除链表中所有DOM对象及其子对象
空的
$(selector).empty()：删除链表中所有DoM对象的子对象
附加
html
$(selector).html()：无参数调用方法，获取DOM列表中第一个元素的内容。
(selector).html(value)：带参数调用，用于设置DOM列表中所有元素的内容。
每个
each函数是对链表、json和dom链表等的遍历，对每个元素调用一次该函数。
句型一：$.each(要遍历的对象, function(index,element){handler})
句子模式2：jQuery object.each(function(index,element){handler})
句型：$.each（循环的内容，处理函数）：表示每个使用jQuery，循环链表，每个数组成员，
前面的“处理函数”会被执行一次。
$：相当于java的一个类名
each：是类中的静态方法。
静态方法调用，可以使用类名。 方法名称
处理功能
函数（索引，元素）：
索引和元素是具有自定义名称的自定义数组。
index：循环的索引（链表下标）
element：链表中的对象
循环普通链表，非dom
$("btn6").click(function(){
// 循
var arr = [1,2,3];
$.each(arr,function(index,element){
alert("循环变量："+index+"===数组成员"+element);
})
})
循环 JSON
$("$btn7").click(function(){
//循环json
var json ={"name:":"张三","age":20};
$.each(json,function(i,n){
alert("i是key="+i",n是值="+n)
})
})
循环 dom 链表
$("#btn8").click(function(){
//循环dom数组
var domArray = $(":text);
$.each(domArray,function(i,n){
//n是数组中的dom对象
alert("i="+i+",n="+n.value)
})
})
循环jquery对象
$("#btn9").click(function(){
$(":text").each(function(i,n){
// jquery对象就是dom数组
alert("i="+i+",n="+n.value);
})
})
定义无意中听到的元素
句子模式：$（选择器）。 窃听风暴名称（处理函数）：
说明：监听事件的名称为js事件中去掉on后的内容，js中onclick的监听事件名称为click
例如：
为页面所有按钮绑定onclick并关联处理函数funl
S(“按钮”).click(fun1)
给页面中所有tr标签绑定onmouseover，并关联处理函数fun2
$("tr").mouseover(fun2)
on() 绑定风暴
句型
$(selector).on(event, function) 时间名称和事件处理函数
利用jQuery的功能实现ajax请求的处理。
在jQuery之前，使用XMLHttpRequest做ajax，有4个步骤。 jQuery 简化了 ajax 请求的处理。
ajax请求的处理可以使用三个函数来实现。
1）$.ajax()：jQuery中ajax的核心函数。
2）$.post()：使用post方法发出ajax请求，向post发送请求
3）$.get()：使用get形式发送ajax请求。
$.ajax函数的使用
介绍$.ajax函数的使用。 函数的参数代表请求URL、请求形式、参数值等信息。
$.ajax() 参数是一个 json 结构。
例如
$.ajax( {名称:值， 名称1:值1..... } )
例如
$.ajax( { async:true ,
contentType:"application/json" ,
data: {name:"lisi",age:20 },
dataType:"json",
error:function(){
请求出现错误时，执行的函数
},
成功：函数（数据）{
//data为responseText，即jQuery处理后的数据。
},
网址：“bmiAjax”，
类型：“获取”
})
回顾ajax使用四个主要步骤：
