定制小程序开发【jQuery从入门到精通】

jQuery简介

jQuery定制小程序开发是一套兼容多浏览器的javascript脚本库。
核心理念是写得更少，做得更多。
使用jQuery定制小程序开发将极大的提高编写javascript定制小程序开发代码的效率，定制小程序开发帮助开发者节省了大量的工作，定制小程序开发让写出来的代码更加优雅，更加健壮，“如虎添翼”。定制小程序开发同时网络上丰富的jQuery定制小程序开发插件也让我们的工作变成了"有了jQuery，一切so easy。"——定制小程序开发因为我们已经站在巨人定制小程序开发的肩膀上了。

jQuery在2006年1定制小程序开发月由美国人John Resig 在纽约的barcamp发布，定制小程序开发吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin定制小程序开发率领团队进行开发。如今，jQuery定制小程序开发已经成为最流行的javascript框架，在世界前10000定制小程序开发个访问最多的网站中，有超过55%在使用jQuery。

jQuery定制小程序开发下载与安装

下载

打开，点击Download jQuery按钮。

定制小程序开发点击第二个下载开发版：

定制小程序开发打开之后按下ctrl+s定制小程序开发进行保存即可。

版本说明

jQuery 2.x has the same APl as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8.(不支持ie678,定制小程序开发如果需要下载1.X)

1. 完整版:jquery-3.6.0.js -->学习版本(定制小程序开发学习源码想高手学习是定制小程序开发最好学习方法)
2. 压缩版:jquery-3.6.0.min.js -->开发版本(压缩版，减少传输)

定制小程序开发目前使用版本: jquery-3.6.0.js

优点

1. 定制小程序开发提供了强大的功能函数
2. 定制小程序开发解决浏览器兼容性问题
3. 定制小程序开发实现丰富的UI和插件
4. 定制小程序开发纠正错误的脚本知识

安装

因为下载的jQuery为一个js文件，安装即在我们的页面引入即可。

<script src="./jquery文件/jquery-3.6.0.js" type="text/javascript"></script>
1

jQuery核心

$符号在jQuery 中代表对jQuery对象的引用，"jQuery"是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。
只有jQuery对象才能调用jQuery提供的方法。
即：

$ <==> jQuery
1

DOM对象和Jquery包装集对象

明确DOM对象和jQuery包装集的概念,将极大的加快我们的学习速度。原始的DOM对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是DOM对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象。
只有jQuery对象才能使用jQuery提供的方法。

dom对象的获取

javascript中获取Dom对象，Dom对象只有有限的属性和方法。

通过js通过获取标签（getElementsByTagName）的对象为一个对象。

let dom = document.getElementById('sp1');console.log(dom); //span#sp1let dom1 =document.getElementsByTagName('sp1');console.log(dom1);  //HTMLCollection(0) []
1
2
3
4

获取一个不存在的dom对象

通过id查找，返回null。
通过标签查找返回一个空数组。

let dom2 = document.getElementById('sp2');console.log(dom2); //nulllet dom3 = document.getElementsByTagName('sp2');console.log(dom3); //HTMLCollection(0) []
1
2
3
4
5

jQuery对象的获取

可以说是Dom对象的扩充，在jQuery的世界中将所有的对象,无论是一个还是一组,都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集。

通过id选择器来获取对象
使用jQuery获取的对象是一个包装集。

//jquery对象获取let jsd = $("#sp1");console.log(jsd);  //jQuery.fn.init(1) [span#sp1]
1
2
3

获取一个不存在的jQuery对象

通过id选择器查找，返回一个空的包装集对象。

let jsd2 = $("#sp2");console.log(jsd2); //jQuery.fn.init
1
2

DOM对象与jQuery对象的转换

dom对象转jQuery对象

Dom对象转为jQuery对象，只需要利用$()方法进行包装即可：

//1.dom=>jquerylet dom = document.getElementById('sp1');console.log(dom);  //span#sp1let dom_jquery = $(dom);console.log(dom_jquery);  //jQuery.fn.init(1)[span#sp1]
1
2
3
4
5

jQuery对象转dom对象

jQuery对象转Dom对象，只需要取数组中的元素即可。

	let jsd = $("#sp1");	console.log(jsd);  //jQuery.fn.init(1) [span#sp1]	let jquery_dom = jsd[0];	console.log(jquery_dom); //span#sp1
1
2
3
4

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找定位元素，称为jQuery选择器，选择器可以说是最考验一个人jQuery功力的地方。
通俗的讲, Selector选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且jQuery包装集的形式返回。
jQuery选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下：

基础选择器

实例：

html：

<div id="box1">   <div id="box2">       <span class="sp1">我是span标签</span>       <p id="blue">蓝色</p>   </div></div>
1
2
3
4
5
6

jQuery查询：（使用之前记得引入jQuery）

//1.id选择器let box1 = $("#box1");console.log(box1);  //jQuery.fn.init(1) [div#box1]//2.class选择器let class1 = $(".sp1");console.log(class1);  //jQuery.fn.init(1) [span.sp1, prevObject: jQuery.fn.init(1)]//3.元素名称选择器let element1 = $("div");console.log(element1); //jQuery.fn.init(2) [div#box1, div#box2, prevObject: jQuery.fn.init(1)]//4.选择所有元素let all = $("*");console.log(all); //jQuery.fn.init(13) [html, head, meta, meta, meta, title, script, body, div#box1, div#box2, span.sp1, p#blue, script, prevObject: jQuery.fn.init(1)]//5.组合选择器let together1 = $("#box1,.sp1,#blue");console.log(together1); //jQuery.fn.init(3) [div#box1, span.sp1, p#blue, prevObject: jQuery.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

层次选择器

实例：

html：

<div id="box1">   <div id="box2">       <span class="sp1">我是span标签</span>       <p id="blue">蓝色</p>   </div></div>
1
2
3
4
5
6

jQuery查询：（使用之前记得引入jQuery）

// 1.后代选择器let allChild = $("#box1 *");console.log(allChild); //jQuery.fn.init(3) [div#box2, span.sp1, p#blue, prevObject: jQuery.fn.init(1)]// 2.子代选择器let childSelect = $("#box2 > *");console.log(childSelect); //jQuery.fn.init(2) [span.sp1, p#blue, prevObject: jQuery.fn.init(1)]//3.相邻选择器let nextSelect = $(".sp1 + p");console.log(nextSelect); //jQuery.fn.init(1) [p#blue, prevObject: jQuery.fn.init(1)]// 4.同辈选择器let sameLevel = $(".sp1 ~ *");console.log(sameLevel); //jQuery.fn.init(1) [p#blue, prevObject: jQuery.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

表单选择器

这里就不一一演示了，大家可以动手试试。

使用jQuery操作DOM

jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。常用的从几个方面来操作：

1. 查找元素(选择器已经实现)
2. 创建节点对象
3. 访问和设置节点对象的值以及属性
4. 添加节点;
5. 删除节点;
6. 删除、添加、修改、设定节点的CSS样式等。

注意:以下的操作方式只适用于jQuery对象。

操作元素属性

属性分类：

• 固有属性
  元素本身具有的属性为固有属性
• 返回值为boolean类型的属性
  checked，selected，disabled
• 自定义属性
  用户自己定义的属性

获取元素属性

实例：

html：

<input type="checkbox" checked="选中" id="ip1" name="chk1" myself="suliang">男<input type="checkbox" id="ip2" name="chk2">女
1
2

jQuery查询获取元素属性：（使用之前记得引入jQuery）

//获取标签let ip1 = $("#ip1");let ip2 = $("#ip2");//1.获取固有元素属性nameconsole.log(ip1.attr("name")); //chk1console.log(ip1.prop("name")); //chk2//2.获取返回值为boolean类型的元素属性 checkedconsole.log(ip1.attr("checked"));  //checkedconsole.log(ip1.prop("checked")); //true//未选中console.log(ip2.attr("checked"));  //undefinedconsole.log(ip2.prop("checked")); //false//3.选择自定义元素属性console.log(ip1.attr("myself")); //suliangconsole.log(ip1.prop("myself")); //undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

从上述实例可以看出：

两者区别：

1. 若是固有属性：attr和prop都返回具体的值
2. 若是返回值为boolean类型的属性：
   设置了属性值：attr返回具体的值，prop返回true。
   没有设置具体的值：attr返回undefined，prop返回false
3. 若是自定义属性：attr返回具体的值，prop返回undefined

设置元素属性

同样使用attr和prop来进行操作：

语法：
attr("属性名“,"属性值")
prop("属性名","属性值")

实例：

HTML：

<input type="checkbox" checked="选中" id="ip1" name="chk1" myself="suliang">男<input type="checkbox" id="ip2" name="chk2">女
1
2

jQuery查询设置元素属性：（使用之前记得引入jQuery）

//获取标签let ip1 = $("#ip1");let ip2 = $("#ip2");//1.设置固有元素属性nameip1.attr("name","su");console.log(ip1.attr("name")); //suip1.prop("name","liang")console.log(ip1.prop("name")); //liang// //2.设置返回值为boolean类型的元素属性 checkedip2.attr("checked","checked")console.log(ip2.attr("checked"));  //checkedip2.prop("checked",true)console.log(ip2.prop("checked")); //true//3.选择自定义元素属性ip1.attr("myself1","xiaohu")console.log(ip1.attr("myself1")); //xiaohuip1.prop("myself2","xiaoming")console.log(ip1.prop("myself2")); //xiaoming 虽然可以显示，但网页源码并无这项属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

从上述实例可以看出：

两者区别：

1. 若是固有属性：attr和prop都可以进行修改
2. 若是返回值为boolean类型的属性：两者都可以操作：使用prop操作时，属性值需设置为true或false
3. 若是自定义属性：attr可以直接操作，prop操作后网页无显示。

移除元素属性

移除元素属性，我们需要使用remove方法：

语法：
removeAttr("属性名")

实例：

HTML：

<input type="checkbox" checked="选中" id="ip1" name="chk1" myself="suliang">男<input type="checkbox" id="ip2" name="chk2">女
1
2

jQuery查询移除元素属性：（使用之前记得引入jQuery）

//获取标签let ip1 = $("#ip1");let ip2 = $("#ip2");//移除固有属性和自定义属性console.log(ip1.attr("name"));  //chk1ip1.removeAttr("name");console.log(ip1.attr("name")); //undefined
1
2
3
4
5
6
7
8

操作元素样式

对元素的样式进行操作，我们可以使用如下方法。

实例：

HTML：

 <div class="box1">     <p class="blue lager">苏凉</p>     <p class="pink">刘亦菲</p> </div>
1
2
3
4

jQuery查询操作元素样式：（使用之前记得引入jQuery）

 //获取divlet box = $(".box1");//获取p标签let p1 = $(".blue,.lager");let p2 = $(".pink");//1.获取样式名console.log(p1.attr("class")); //blue lager//2.修改样式值p2.attr("class","blue");console.log(p2.attr("class")); //blue//3.添加样式p2.addClass("lager");console.log(p2.attr("class")); //blue lager//4.添加具体样式//添加一个p1.css("color","yellow")//添加多个p1.css({"font-size":"35px","background-color":"lightblue"});console.log(p1.attr("style")); //color: yellow; font-size: 35px; background-color: lightblue;//5.移除样式console.log(p2.attr("class"));//blue lagerp2.removeClass("blue");console.log(p2.attr("class")); //lager
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

操作元素内容

其中前四个方法针对非表单元素，而最后两个针对表单元素：

• 常见的表单元素:
  文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select等可以在页面上操作的元素。
• 常见的非表单元素:
  div、span、 h1~h6、 table、tr、 td、p1等

实例：
HTML：

<div id="html">111</div><div id="html2"></div><p id="text"></p><p id="text2"></p><input type="text" value="suliang" id="ip1">
1
2
3
4
5

jQuery查询修改/获取元素内容：（使用之前记得引入jQuery）

//1.html()修改元素内容，识别html标签，非表单元素//修改内容//带有html标签$("#html").html("<h1>带有html标签(h1)</h1>");//获取let html = $("#html").html();console.log(html); //<h1>带有html标签(h1)</h1>//不带html标签$("#html2").html("不带html标签");let html2 = $("#html2").html();console.log(html2); //不带html标签//2.text()修改元素内容，不识别html标签，非表单元素//修改内容$("#text").text("不带html标签");//获取let text = $("#text").text();console.log(text); //不带html标签// d当修改的内容包含html标签时，页面不识别$("#text2").text("<h1>带有html标签(h1)</h1>");let text2 = $("#text2").text();console.log(text2); //<h1>带有html标签(h1)</h1>//3.val()获取/修改表单元素的值//获取let value = $("#ip1").val();console.log(value); //suliang//修改$("#ip1").val("苏凉");let value2 = $("#ip1").val();console.log(value2); //苏凉
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

图例：

创建元素

在jQuery中创建元素很简单，直接使用核心函数即可：$("创建的元素")

//创建元素let span = "<span>创建一个span元素</span>";console.log(span); //<span>创建一个span元素</span>// 转换为jQuery对象console.log($(span)); //jQuery.fn.init(1) [span]
1
2
3
4
5

添加元素

实例：
HTML：

<span id="ig">IG</span><span id="edg">EDG</span><div id="rng">    <span>gala</span></div>
1
2
3
4
5

CSS：

#ig{   padding: 5px;   background-color: lightblue;}#edg{    padding: 5px;    background-color: gray;}span{    margin: 10px;}#rng{    margin-top: 10px;    background-color: red;}.fpx{    padding: 5px;    background-color: lightgreen;}.we{    padding: 5px;    background-color: lightyellow;        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

jQuery查询添加元素：（使用之前记得引入jQuery）

//子级元素追加//前追加 prepend//创建元素let span1 = "<span>ming</span>";let span2 = "<span>xiaohu</span>";// 1指定位置.prepend(内容) $("#rng").prepend(span1);//2.$(内容).prependTo(指定位置)$(span2).prependTo($("#rng"));//后追加 append//创建元素let span3 = "<span>wei</span>";let span4 = "<span>breath</span>";//1.指定位置.append(内容)$("#rng").append(span3);//2.$(内容).appendTo(指定位置)$(span4).appendTo($("#rng"));//同级追加//前追加 before//创建元素let span5 = "<span>FPX</span>";let span6 = "<span>WE</span>";//1.前追加$("#edg").before(span5);$("#ig + span").addClass("fpx");//2.后追加$("#edg").after(span6);$("#edg + span").addClass("we")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

图例：

删除元素

实例：

//1.remove() 删除标签和内容$(".green").remove();//2.empty() 删除内容$(".blue").empty();
1
2
3
4
5

原图：

删除了EDG和FPX的标签及内容（remove()）,删除了RNG和IG的内容（empty())

遍历元素

• each()
  $(selector).each(function(index,element)):
  遍历元素参数function为遍历时的回调函数
  index为遍历元素的序列号，从0开始。
  element是当前的元素，此时是dom元素。

实例：

//遍历元素$("span").each(function(index,element){    //索引    console.log(index);    //元素    console.log(element);    //元素    console.log(this);    //转换为jQuery对象    console.log($(this)); })
1
2
3
4
5
6
7
8
9
10
11

注意：用此方法遍历出来的元素为DOM对象，若需要使用jQuery方法，则需要转换为jQuery对象。

jQuery事件

read加载事件

我们知道页面加载是由上而下顺序执行的，当我们将js写在页面头部时，就需要先等页面加载之后js才会生效。

• 预加载事件
• 当页面的dom结构加载完毕后执行
• 类似于js中onload事件
• ready事件可以写多个

语法：$(document).read(function(){}) 或$(function(){})

实例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="./jquery文件/jquery-3.6.0.js" type="text/javascript"></script>    <script>        $(document).ready(function(){            console.log($("#p1").attr("id"));  //p1        });        //另一种简写        $(function(){            console.log($("#p1").attr("id")); //p1        })    </script></head><body>    <p id="p1"></p></body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

bind绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

为元素绑定单个事件

• 语法：
  bind绑定：$(元素).bind(事件类型,function(){})
  直接绑定：$(元素).事件类型(function(){})

实例：
HTML：

<button id="btn1">按钮一：绑定单个事件（bind绑定）</button><button id="btn2">按钮一：绑定单个事件（直接绑定）</button>
1
2

//1.绑定单个事件$("#btn1").bind("click",function(){    alert("bind绑定！")})$("#btn2").click(function(){    alert("直接绑定！")})
1
2
3
4
5
6
7
8

为元素绑定多个事件

语法：

1. 同时为多个事件绑定同一函数：
   $(元素).bind(事件1 事件2...,function(){})
2. 为元素绑定多个事件并设置对应函数
   $(元素).bind(事件1,function(){}).bind(事件2,function(){})
3. 为元素绑定多个事件并设置对应函数(键值对的形式)
   $(元素).bind({事件1:function(){},事件2:function(){}})
4. 为元素直接绑定多个事件并设置对应函数
   $(元素).事件1(function(){}).事件2(function(){})

实例：
HTML：

<button id="btn3">按钮三：绑定多个事件</button><button id="btn4">按钮四：绑定多个事件</button><button id="btn5">按钮五：绑定多个事件</button><button id="btn6">按钮六：绑定多个事件（直接绑定）</button>
1
2
3
4

jQuery查询绑定元素：（使用之前记得引入jQuery）

// 1.同时为多个事件绑定同一函数`$(元素).bind(事件1 事件2...,function(){})`$("#btn3").bind("click mouseout",function(){    alert("为一个元素绑定多个事件！！")})// 2. 为元素绑定多个事件并设置对应函数 `$(元素).bind(事件1,function(){}).bind(事件2,function(){})`$("#btn4").bind('click',function(){    alert("被单击了！")}).bind('mouseout',function(){    alert("鼠标移开了！")})//3. 为元素绑定多个事件并设置对应函数(键值对的形式) `$(元素).bind({事件1:function(){},事件2:function(){}})`$("#btn5").bind({    click:function(){        alert("被单击了！");    },    mouseout:function(){        alert("鼠标移开了！")    }})// 4.  为元素直接绑定多个事件并设置对应函数  `$(元素).事件1(function(){}).事件2(function(){})`$("#btn6").click(function(){    alert("被单击了！")}).mouseout(function(){    alert("鼠标离开了！")})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

jQuery Ajax

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）

• Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
• 使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
• Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

$.ajax

jquery调用ajax方法:

格式: $.ajax({});

• 参数:
  type:请求方式GET/POST
  url:请求地址url
  async:是否异步，默认是true表示异步
  data:发送到服务器的数据
  dataType:预期服务器返回的数据类型
  contentType:设置请求头
  success:请求成功时调用此函数
  error:请求失败时调用此函数

$.ajax({	type:"get",    url:"file:///D:/HTMLtest/jQuerylearn/js/information.json",    dataType:"json",    success:function(data){        console.log('data');    }})
1
2
3
4
5
6
7
8

$.get

语法: $.get("请求地址","请求参数" , function(形参){});

实例：

$.get("js/information.json",{},function(data){    console.log(data);})
1
2
3

$.post

语法: $.post("请求地址","请求参数" , function(形参){});

$.post("js/information.json",{},function(data){    console.log(data);})
1
2
3

$.getJSON

语法: $.getJSON("请求地址","请求参数" , function(形参){});

$.getJSON("js/information.json",{},function(data){    console.log(data);})
1
2
3

注: getJSON方式要求返回的数据格式满足json格式(json字符串)，若不是json格式，则不返回数据。