大家好，我是小索奇
学了一下午的jQuery，我做出了“最好的笔记”
虽说jQuery已经过时了，但一些项目用的也是旧版的技术、很多高校也正在教这一老套的jQuery技术...
了解一下有益无害~
本篇文章对应jQuery全套教程，文章篇幅较长，可以收藏备用哈
这是小索奇在学习jQuery期间精心整理的markdown格式文件（我也想白嫖教程啊，可是翻遍了评论区，没有发现一个人留下了markdown格式的文章，干脆自己做吧...
下载链接
https://wwvd.lanzoul.com/iUpep0xlqfri
密码:2p7h
所以我勇敢的站了出来，为大家准备一份教程-附带笔记...
因为没有发现一个人做了markdown格式笔记并分享出来，所以才敢说，"最好的笔记"...
当然，只是开个玩笑~
对应视频教程链接
https://www.bilibili.com/video/BV1Jg4y1B7n4/?spm_id_from=333....
拓展 & 补充
DOM树是什么
- DOM对象：浏览器根据html标签生成的IS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
- 它将HTML文档以树状结构直观的表现出来，所以我们称之为文档树或DOM树
- 描述网页内容关系的名词
- DOM树直观的体现了标签与标签之间的关系
- 虽然在html中是标签，但是在JS中获取过来就是DOM对象object
- DOM核心思想：把网页内容当做对象来处理
js中什么叫做对象，创建一个变量也叫对象吗？
答案是：也叫对象
在JavaScript中，对象是一种数据类型，它可以存储多个键值对。每个键值对都包含一个属性名和一个相应的值。可以通过点号或方括号来访问对象中的属性。
例如：
var person = {
name: "Tom",
age: 25,
gender: "male"
};
console.log(person.name); // 输出 Tom
console.log(person["age"]); // 输出 25上面的代码创建了一个名为person的对象，该对象有三个属性：name、age和gender。可以通过点号或方括号来访问这些属性的值。
另一方面，变量是用于存储特定值的标识符。在JavaScript中，变量可以存储任何类型的值，包括字符串、数字、布尔值、对象等。有时候，我们会将一个对象存储在一个变量中，这样可以方便地访问该对象的属性。
例如：
var person = {
name: "Tom",
age: 25,
gender: "male"
};
var personName = person.name;
console.log(personName); // 输出 Tom上面的代码创建了一个名为person的对象，并将其存储在变量中。然后，将person对象的name属性的值存储在另一个变量personName中，并输出该变量的
值。这里的person变量和personName变量都是JavaScript中的变量，而不是对象。
var a=document.ElementById('text')为什么a叫做dom对象？
在JavaScript中，文档对象模型（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
jQuery是js库，
- 库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方， 放的用js代码写的function
dom对象和jQuery对象
- 我们常用的alert是属于BOM-操作浏览器的
- DOM是操作网页内容的
dom对象：使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
比如：var obj= document.getElementById("txt1"); obj是dom对象，也叫做js对象可以用obj.value等;（后面会将）
jQuery对象： 使用jQuery语法表示对象叫做jQuery对象， 注意：jQuery表示的对象都是数组。
例如 var jobj = $("#txt1") , jobj就是使用jQuery语法表示的对象。 也就是jQuery对象。 它是一个数组。
现在数组中就一个值。
jQuery中$是什么
简要来说$其实就是jQuery程序的标志
$() 函数实际上是 jQuery() 函数的缩写形式，它接受一个CSS选择器字符串作为参数，并返回一个包含匹配元素的jQuery对象。例如，$("p") 可以选取所有 元素。
除了选择元素之外，$() 函数还可以用于创建新的HTML元素、设置和获取元素的属性和样式、处理事件、执行动画等等。因此，$符号在jQuery中扮演着非常重要的角色，被广泛应用于jQuery编程中。
引入jQuery
使用jQuery,首先要将jQuery库引入。需要使用如下语句
$(document)是将DOM对象document转换为jQuery对象。$(document).ready()函数是当DOM对象加载完毕后，马上执行的函数。
$document.ready()与$()、jQuery( )、window.jQuery()是等价的
所以$(document).ready()可以写成$(function() {alert("Hello jQuery")};
dom对象和jQuery对象相互的转换。
jQuery转换dom
- 用jQuery函数$()把DOM对象转换为jQuery
// html标签定义一个
var domBtn = document.getElementById("btn");
var $btn = $(domBtn); // 前面的$btn 这个是自定义的名字 $ 不是必须的
//我是按钮
alert($btn.val());jQuery对象也可以转为dom对象
- 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get{0).
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的转换？
- 目的是要使用对象的方法，或者方法。
当你的dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jQuery提供的函数，必须是jQuery对象才可以。
3.选择器： 就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jQuery的函数操作dom
选择器
- class选择器， 语法： $(".class样式名)
- class表示css中的样式， 使用样式的名称定位dom对象的。
标签选择器
- 语法： $("标签名称")
- 使用标签名称定位dom对象的
例：
//数组中有三个对象
var obj = $("div");
// 给所有div设置背景色
obj.css ("background","blue");表单选择器
- 使用 < input >标签的type属性值，定位dom对象的方式。
- 语法： $(":type属性值")
- 例如： $(":text") ,选择的是所有的单行文本框，
- $(":button") ,选择的是所有的按钮。
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单
举例：
var obj = $(":checkbox") // 数组，有三个对象
for(var i = 0; i < obj.length; i++){
var dom = obj[i];
//需要jQuery，用我们前面的转换方式
var jobj =$(dom);
// 调用jQuery函数
alert("jQyery函数调用=" + jobj.val())
}其它的标签都是类似
组合选择器
- 是多个被选对象间使用逗号分隔后形成的选择器，可以组合id,clss,标签名等。
- 语法：("id,.class,标签名")
拓展
*表示选取所有DOM对象
过滤器
在定位了dom对象后，根据一些条件筛选dom对象。
- 过滤器有是一个字符串，用来筛选dom对象的。
- 过滤器不能单独使用， 必须和选择器一起使用。
常用选择器
- 过滤器有是一个字符串，用来筛选dom对象的。
- 过滤器不能单独使用， 必须和选择器一起使用。
选择第一个first,保留数组中第一个DOM对象
语法：$("选择器：first")
选择最后一个last,保留数组中最后D0M对象
语法：$（"选择器:last“)
选择数组中指定对象
语法：$(“选择器 eq : (数组索引)"）
选择数组中小于指定索引的所有D0M对象
语法：$("选择器：lt（数组索引）")
选择数组中大于指定索引的所有DOM对象
语法：$(“选择器 : gt (数组索引)")
表单属性过滤器
根据表单中dom对象的状态情况，定位dom对象的。
启用状态， enabled
不可用状态 disabled
选择状态 ， checked ， 例如radio， checkbox
- 选择可用的文本框
$(":text:enabled")
- 选择不可用的文本框(后面有介绍text函数)
$(":text:disabled")
- 复选框选中的元素
$(":checkbox:checked")
拓展
在HTML中， 元素用于创建各种表单控件，例如文本框、单选按钮、复选框等。当用户在表单控件中输入数据时，这些数据通常会被保存到该控件的
value 属性中。
jQuery中给dom对象绑定事件
- $（选择器）.事件名称（事件的处理函数)
- $（选择器）：定位dom对象，dom对象可以有多个，这些dom对象都绑定事件了
- 事件名称：就是js中事件去掉on的部分，例如js中的单击事件onclick（）
- jQuery中的事件名称，就是click,都是小写的。
函数
val
操作数组中DoM对象的value属性，
$（选择器）.val ()：无参数调用形式，读取数组中第一个DOM对象的value属性值
$（选择器）.val (值)：有参形式调用：对数组中所有DOM对象的volue属性值进行统一赋值
text
操作数组中所有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属性值）
- 比如($("img").attr("src")); 获取的是img标签的src属性的路径
$（选择器）.attr(“属性名”，“值”)
对数组中所有DOM对象的属性设为新值
- 可以利用此函数切换路径改变图片等内容
- 操作文本用text，其它属性的设置建议用attr函数
remove
$（选择器）.remove（）：将数组中所有DOM对象及其子对象一并删除
empty
$（选择器）.empty（）:将数组中所有DoM对象的子对象删除
- 仅删子对象，父对象还留着
append
- 为数组中所有DOM对象添加子对象$（选择器），append("我动态添加的div"
html
- 设置或返回被选元素的内容(innerHTML).
$（选择器）.html（）:无参数调用方法，获取DOM数组第一个匹元素的内容。
（选择器）.html（值）：有参数调用，用于设置DOM数组中所有元素的内容。
each
each函数是对数组，json和dom数组等的遍历，对每个元素调用一次函数。
语法1：$.each(要遍历的对象，function(index,element){处理程序})
语法2:jQuery对象.each(function(index,element){处理程序})
语法： $.each( 循环的内容， 处理函数 ) ：表示使用jQuery的each，循环数组，每个数组成员，
都会执行后面的“处理函数”一次。
$: 相当于是java的一个类名
each:就是类中的静态方法。
静态方法调用，可以使用 类名.方法名称
处理函数
function(index, emelent) :
index, element都是自定义的形参， 名称自定义。
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
例如：
为页面中所有的button绑定onclick,并关联处理函数funl
S("button").click(fun1)
为页面中所有的tr标签绑定onmouseover,.并关联处理函数fun2
$("tr").mouseover(fun2)
on()绑定事件
- on()方法在被选元素上添加事件处理程序。该方法给API带来很多便利，推荐使用该方法
语法
$(选择器).on(event,function)时间名称和事件的处理函数
- event:事件一个或者多个，多个之间空格分开
- function:可选，规定当事件发生时运行的函数。
- 事件名称就是js去掉on的部分，例如js中的onclick，这里就是click
- 这个可以代替onclick
使用jQuery的函数，实现ajax请求的处理。
没有jQuery之前，使用XMLHttpRequest做ajax ， 有4个步骤。 jQuery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。
1） $.ajax() : jQuery中实现ajax的核心函数。
- ajax()是一个函数的名称
和循环使用一样，$：相当于java一个类名，each：静态方法调用，可以使用类名.方法名称
2） $.post() : 使用post方式做ajax请求，对post发请求
3） $.get() : 使用get方式发送ajax请求。
- $.post()和$.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(){
请求出现错误时，执行的函数
},
success:function( data ) {
// data 就是responseText, 是jQuery处理后的数据。
},
url:"bmiAjax",
type:"get"
}
)
回忆ajax使用四大步骤：
- 创建异步对象var xmlHttp=new XMLHttpRequestO
绑定事件
- xmlHttp.onreadystatechange=function()(获取服务器端返回的数据，更新dom}
- 初始化请求参数xmIHttp.open(get,url,true)
- 发送请求xmlHttp..send()
以上这些操作全都融入到了一个$.ajax()函数当中
拓展讲义
$.ajax() 是 jQuery 中 AJAX 请求的核心方法，它可以通过传入一个 JSON 对象来设置请求参数。具体语法如下：
$.ajax({
name1: value1,
name2: value2,
...
});其中，name 表示参数名，value 表示参数值。常用的参数说明如下：
async: 布尔值，表示请求是否异步处理，默认为 true。contentType: 发送数据到服务器时所使用的内容类型，默认为application/x-www-form-urlencoded。data: 规定要发送到服务器的数据，可以是字符串、数组或 JSON 对象。dataType: 期望从服务器响应的数据类型，常用的有xml、json、text、html等。error: 如果请求失败要运行的函数。success: 当请求成功时运行的函数。type: 规定请求的类型，常用的有GET和POST。url: 规定发送请求的 URL。
例如，以下代码实现了一个简单的 AJAX 请求：
$.ajax({
type: "GET",
url: "https://api.example.com/data",
// 期望浏览器返回json格式数据，现在用的几乎都是json
dataType: "json",
success: function(data) {
console.log(data);
},
error: function() {
console.log("请求失败");
}
});以上代码表示向 https://api.example.com/data 发送一个 GET 请求，期望返回 JSON 格式的数据。如果请求成功，则将返回的数据打印到控制台上；如果请求失败，则输出"请求失败"。
$.ajax() 是 jQuery 中 AJAX 请求的核心方法，它可以通过传入一个 JSON 对象来设置请求参数。具体语法如下：
javascript复制代码$.ajax({
async: true,
contentType: "application/json",
data: {name: "lisi", age: 20},
dataType: "json",
error: function() {
// 请求出现错误时执行的函数
},
success: function(data) {
// 请求成功时执行的函数，data 是处理后的数据
},
url: "bmiAjax",
type: "get"
});json结构的参数说明：
async: 布尔值，表示请求是否异步处理，默认为 true，表示异步请求的，可以不写async这个配置项- xmlHttp.open(get,url,true),第三个参数一样的意思。
contentType: 一个字符串，发送数据到服务器时所使用的内容类型， 可以不写，默认为application/x-www-form-urlencoded。- 例如你想表示请求的参数是json格式的， 可以写application/json
data: 规定要发送到服务器的数据，可以是字符串、数组或 JSON 对象，表示请求的参数和参数值。 常用的是json格式的数据dataType: 期望从服务器响应的数据类型，常用的有xml、json、text、html等。- 当我们使用$.ajax()发送请求时， 会把dataType的值发送给服务器， 那我们的servlet能够读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以返回你需要的数据格式。
error: 如果请求失败要运行的函数。- error:function() { 发生错误时执行 }
success: 当请求成功时运行的函数。- 使用XMLHttpRequest对象， 当readyState==4 && status==200的时候就会用到它
url: 规定发送请求的 URL。type: 规定请求的类型，常用的有GET和POST，不用区分大小写，默认为 GET- 主要使用 的是这几个参数
url,data,dataType,success
$.ajax({
url: "url地址",
data: {数据},
dataType: "数据类型，如json等",
success: function(response) {
// 处理响应结果
alert(response);
}
});以上代码表示向 bmiAjax 发送一个 GET 请求，期望返回 JSON 格式的数据。如果请求成功，则将处理后的数据作为参数传递给 success 函数；如果请求失败，则执行 error 函数。
拓展 & 回忆
readyState==4和status==200是AJAX请求的两个判断条件，表示以下含义：
readyState==4：指XMLHttpRequest对象的状态为4，即已完成请求。当AJAX请求发送到服务器端后，会接收到一个XMLHttpRequest对象，该对象的状态码有5种，分别为0、1、2、3、4。当状态码为4时，表示请求已经完成。status==200：指HTTP响应状态码为200，即请求成功。HTTP 200 OK是HTTP协议中最常见的一种状态码，表示请求成功并返回所请求的数据。
因此，当这两个条件同时满足时，说明AJAX请求已经成功返回了数据，并且可以进行后续的处理操作。
- 在idea中使用
jQuery的话文件夹经常命名为js，在web/js/引进即web/js/jQuery-xxx，