jQuery简介
jQuery是一套兼容多浏览器的javascript脚本库。
核心理念是写得更少，做得更多。
使用jQuery将极大的提高编写javascript代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，“如虎添翼”。同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery，一切so easy。"——因为我们已经站在巨人的肩膀上了。
jQuery在2006年1月由美国人John Resig 在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
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)
- 完整版:jquery-3.6.0.js -->学习版本(学习源码想高手学习是最好学习方法)
- 压缩版:jquery-3.6.0.min.js -->开发版本(压缩版，减少传输)
目前使用版本: jquery-3.6.0.js
优点
- 提供了强大的功能函数
- 解决浏览器兼容性问题
- 实现丰富的UI和插件
- 纠正错误的脚本知识
安装
因为下载的jQuery为一个js文件，安装即在我们的页面引入即可。
<script src="./jquery文件/jquery-3.6.0.js" type="text/javascript"></script>
jQuery核心
$符号在jQuery 中代表对jQuery对象的引用，"jQuery"是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。
只有jQuery对象才能调用jQuery提供的方法。
即：
$ <==> jQuery
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#sp1 let dom1 =document.getElementsByTagName('sp1'); console.log(dom1); //HTMLCollection(0) []
获取一个不存在的dom对象
通过id查找，返回null。
通过标签查找返回一个空数组。
let dom2 = document.getElementById('sp2'); console.log(dom2); //null let dom3 = document.getElementsByTagName('sp2'); console.log(dom3); //HTMLCollection(0) []
jQuery对象的获取
可以说是Dom对象的扩充，在jQuery的世界中将所有的对象,无论是一个还是一组,都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集。
通过id选择器来获取对象
使用jQuery获取的对象是一个包装集。
//jquery对象获取 let jsd = $("#sp1"); console.log(jsd); //jQuery.fn.init(1) [span#sp1]
获取一个不存在的jQuery对象
通过id选择器查找，返回一个空的包装集对象。
let jsd2 = $("#sp2"); console.log(jsd2); //jQuery.fn.init
DOM对象与jQuery对象的转换
dom对象转jQuery对象
Dom对象转为jQuery对象，只需要利用$()方法进行包装即可：
//1.dom=>jquery let dom = document.getElementById('sp1'); console.log(dom); //span#sp1 let dom_jquery = $(dom); console.log(dom_jquery); //jQuery.fn.init(1)[span#sp1]
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
jQuery选择器
和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找定位元素，称为jQuery选择器，选择器可以说是最考验一个人jQuery功力的地方。通俗的讲, Selector选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且jQuery包装集的形式返回。
jQuery选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下：
基础选择器
| 选择器 | 名称 | 举例 |
| id选择器 | #id | $(""#testDiv")选择id为testDiv的元素 |
| 元素名称选择器 | element | $(“div”)选择所有div元素 |
| 类选择器 | .class | $(".blue")选择所有class=blue的元素 |
| 选择所有元素 | * | $("*")选择页面所有元素 |
| 组合选择器 | selector1,selector2,selectorN | $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 |
实例：
html：
<div id="box1"> <div id="box2"> <span class="sp1">我是span标签</span> <p id="blue">蓝色</p> </div> </div>
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)]
层次选择器
| 选择器 | 名称 | 举例 |
| 后代选择器 | ancestor descendant | $("#parent div")选择id为parent的元素的所有div元素 |
| 子代选择器 | parent > child | $("#parent>div")选择id为parent的直接div子元素 |
| 相邻选择器 | prev + next | $(".blue + img")选择css类为blue的下一个img元素 |
| 同辈选择器 | prev ~ sibling | $(".blue ~ img")选择css类为blue的之后的img元素 |
实例：
html：
<div id="box1"> <div id="box2"> <span class="sp1">我是span标签</span> <p id="blue">蓝色</p> </div> </div>
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)]
表单选择器
| 选择器 | 名称 | 实例 |
| 表单选择器 | :input | 查找所有的input元素:$(":input")，注意:会匹配所有的input、textarea、select和button元素。若加冒号：则只选择input标签的表单。 |
| 文本框选择器 | :text | 查找所有文本框:$(":text") |
| 密码框选择器 | :password | 查找所有密码框:$(":password") |
| 文本框选择器 | :text | 查找所有文本框:$(":text") |
| 密码框选择器 | :password | 查找所有密码框:$(":password") |
| 提交按钮选择器 | :submit | 查找所有提交按钮:$(":submit") |
| 图像域选择器 | :image | 查找所有图像域: $(":image") |
| 重置按钮选择器 | :reset | 查找所有重置按钮:$(":reset") |
| 按钮选择器 | :button | 查找所有按钮:$(":button") |
| 文件域选择器 | :file | 查找所有文件域: $(":file") |
这里就不一一演示了，大家可以动手试试。
使用jQuery操作DOM
jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。常用的从几个方面来操作：
- 查找元素(选择器已经实现)
- 创建节点对象
- 访问和设置节点对象的值以及属性
- 添加节点;
- 删除节点;
- 删除、添加、修改、设定节点的CSS样式等。
注意:以下的操作方式只适用于jQuery对象。
