乐趣区

关于jquery:全套jQuery学了一下午我敢说这一定是最好的笔记

jiezi

大家好，我是小索奇

学了一下午的 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，
退出移动版