【全套jQuery】学了一下午，我敢说这一定是最好的笔记！

大家好，我是小索奇

学了一下午的jQuery，我做出了“最好的笔记”

虽说jQuery已经过时了，但一些项目用的也是旧版的技术、很多高校也正在教这一老套的jQuery技术...

了解一下有益无害~

本篇文章对应jQuery全套教程，文章篇幅较长，可以收藏备用哈

这是小索奇在学习jQuery期间精心整理的markdown格式文件（我也想白嫖教程啊，可是翻遍了评论区，没有发现一个人留下了markdown格式的文章，干脆自己做吧...

下载链接

https://wwvd.lanzoul.com/iUpep0xlqfri

密码:2p7h

博主都在用Markdown语法来写文章？一文让你掌握

所以我勇敢的站了出来，为大家准备一份教程-附带笔记...

因为没有发现一个人做了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") 可以选取所有 <p> 元素。

除了选择元素之外，$() 函数还可以用于创建新的HTML元素、设置和获取元素的属性和样式、处理事件、执行动画等等。因此，$符号在jQuery中扮演着非常重要的角色，被广泛应用于jQuery编程中。

引入jQuery

使用jQuery,首先要将jQuery库引入。需要使用如下语句

<script type="text/javascript"src="js/jQuery-3.4.1.js"></script>

$(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标签定义一个<input type = "button" id = "btn" value = "我是按钮">
var domBtn = document.getElementById("btn");
var $btn = $(domBtn); // 前面的$btn 这个是自定义的名字 $ 不是必须的
//我是按钮
alert($btn.val());

jQuery对象也可以转为dom对象

• 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get{0).

function btnClick(){
// 定义的标签有<input type = "button" value = "计算平方" onclick = btnClick()>
// <input type = "txt" id = "txt" value = "整数"/>
    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") ,选择的是所有的按钮。

• 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>,均可做出相应选择。表单选择器是为了能更加容易地操作表单，

  表单选择器是根据元素类型来定义的

  <input type="text">

  <input type="password">

  <input type="radio">

  <input type="checkbox">

  <input type="button">

  <input type="file">

  <input type="submit">

  <input type="reset">

  $(": tr"不能用，tr不是input标签)

  • 它没有type属性值，只有type属性的时候，才能用表单选择器

  语法：$(":type 属性值"）

  例如：

  $(text")选取所有的单行文本框

  $("password")选取所有的密码框

  $(":radio")选取所有的单选框

  $(":checkbox")选取所有的多选框

举例：

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中，<input> 元素用于创建各种表单控件，例如文本框、单选按钮、复选框等。当用户在表单控件中输入数据时，这些数据通常会被保存到该控件的

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>我动态添加的div</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，