关于jquery:全套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); // 输入 Tomconsole.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，