💻博主现有专栏：
C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习等
🥏主页链接：Y小夜-CSDN博客
目录
🎯jQuery介绍
🎃了解jQuery
🎃jQuery的特点
🎃配置jQuery环境
🎯jQuery入口 函数
🎃jQuery入口函数的作用
🎃jQuery入口函数的三种写法
🎃jQuery入口函数和window.onload的区别
🎯jQuery对象与原生DOM对象
🎃什么是jQuery对象
🎃jQuery对象与原生DOM对象的联系与区别
🎃jQuery对象与原生DOM对象的转换
🎃jQuery与JavaScript的混合使用
🎯jQuery选择器
🎃什么是jQuery选择器
🎃jQuery选择器的优点
🎃jQuery选择器的种类
🎯jQuery介绍
🎃了解jQuery
jQuery是一个快速、简洁的JavaScript类库，即js文件，由John Resig（约翰.瑞思格）在2006年1月首次发布。
jQuery以简洁的语法和跨平台的兼容性，有效的提高了程序开发效率。在遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作时备受JavaScript开发人员的推崇。
🎃jQuery的特点
jQuery 的理念: write less,do more(写得少, 做得多)
🎃配置jQuery环境
（1）进入jQuery官方网站jQuery下载最新的jQuery库文件
(2)jQuery版本
- jQuery 1.x：兼容IE6/7/8，官方只做BUG维护，不再更新；
- jQuery 2.x：不兼容IE6/7/8，官方也只做BUG维护，不再更新；
- jQuery 3.x：不兼容IE6/7/8，官方继续更新，只支持最新的浏览器，更加精简（在国内不流行，因为国内使用jQuery的主要目的是兼容IE6-8浏览器）。
jQuery压缩版本：
使用于生产环境，去掉了注释、换行、空格等与逻辑无关的内容删除，并进行一些优化，文件比较小，但不宜阅读。 jQuery非压缩版本：使用于学习与开发环境，源码清晰，易阅读。
(3)jQuery文件不需要安装，把下载的js文件放在网站上的一个公共位置，当某个页面上使用jQuery时，只需在相关的HTML文档中引入该库文件即可，就可以使用jQuery的功能。
<script src=“jquery-1.12.4.js" type="text/javascript"></script>另外，一些CDN（内容分发网络）也提供了jQuery文件，可以直接引入：
<script src=“https://code.jquery.com/jquery-3.6.0.js"></script>
🎯jQuery入口 函数
<head>
<meta charset="UTF-8">
<title>体验jQuery</title>
<script src="libs/jquery-1.12.4.js"></script>
<script>
/*window.onload=function(){ document.getElementsByTagName('button')[0].onclick=function(){alert("hello,jQuery!");}
} */
$(document).ready(function(){
$("button").click(function(){alert("hello,jQuery!");});
});
</script>
</head>
🎃jQuery入口函数的作用
在上面例子的代码中，有一段jQuery特有的代码：
$(document).ready(function() {
// 程序段
})
这段代码类似于Javascript中通常使用的代码：
window.onload=function(){
// 程序段
}
作用：用于在页面加载完毕之后执行相应的程序段
🎃jQuery入口函数的三种写法
1.$(document).ready(function(){
//程序段
})
2.$().ready(function(){
//程序段
})
3.$(function(){
//程序段
})
🎃jQuery入口函数和window.onload的区别
- 执行时机不同
- window.onload必须在页面全部内容(包括图片、文件)加载完毕后执行。
- $(document).ready()在网页结构加载完毕后就执行，执行效率高于window.onload。
- 执行数量不同
- 如果页面包含多个window.onload或者$(document).ready()时， window.onload只执行最后一个，而$(document).ready()在页面加载完成后全部执行
🎯jQuery对象与原生DOM对象
由于jQuery本身就是在Javascript语言基础上进行封装的，因此jQuery代码本质上也是Javascript代码，二者经常相互混合使用。但它们之间又有一定的区别，因此在使用时必须分清哪些是jQuery对象，哪些是原生DOM对象。
🎃什么是jQuery对象
- jQuery对象是使用jQuery中的方法获取页面中的元素返回的对象。
- jQuery对象是jQuery独有的，如果一个对象是jQuery对象，就可以使用jQuery里的方法。
- 利用jQuery对象能够更加方便的操作HTML文档。
🎃jQuery对象与原生DOM对象的联系与区别
- jQuery对象与原生DOM对象的联系
jQuery对象是DOM对象的一个集合，即jQuery对象是对DOM对象的封装，是一个伪数组，里面存放了一堆DOM对象。
- jQuery对象与原生DOM对象的区别
- DOM对象可以调用DOM对象的方法和属性。例如:var td=document.getElementById("test"); //td是DOM对象 td.innerHTML=“aa”; //innerHTML是DOM对象的属性
- jQuery对象是jQuery独有的，jQuery对象只可以使用jQuery里的方法。例如： $(“#test”).html(“aa”) //设置ID为test的元素内的html代码为aa。 其中$(“#test”)返回的jQuery对象，html()是jQuery对象的方法，同时在调用html()后返回的依然是该jQuery对象，因此可以用链式操作继续操作该对象。例如： $("#test").html("aa").css("backgroundColor","#999") //设置ID为test的元素内的html代码为aa,并把该元素的背景色设置为"#999"。
- 原生DOM对象不能进行链式操作。
- jQuery对象无法使用原生DOM对象的任何方法，原生DOM对象也不能使用jQuery里的方法。比如：$("#test").innerHTML
document.getElementById(“test”).html()之类的写法都是错误的。
- 建议变量约定：如果存储的是 jQuery 对象, 那么要在变量前面加上 $
var $obj1 = jQuery 对象
var obj = DOM 对象
🎃jQuery对象与原生DOM对象的转换
jQuery 对象不能使用 原生DOM 中的方法, 但如果对 jQuery 对象的方法不熟悉，或jQuery中没有封装想要的方法, 不得不使用 原生DOM方法的时候, 有如下两种方法进行转换:
jQuery 对象是一个伪数组对象, 可以通过下标的形式得到对应的 DOM对象。 var $mm=$(“#msg”); //jQuery对象
var m=$mm[0]; //DOM对象
例如：
$("li"); //获取页面中的所有<li>集合对象。
$("li")[0]; //返回集合中的第一个对象，该对象是一个DOM对象
alert($(“li”)[0].innerHTML) //返回第1个列表项的内容
使用jQuery本身提供get(index)方法得到相应的 原生DOM 对象 参数index是相应索引号位置的DOM对象。
例如：
$("li"); //jQuery对象
$("li").get(0); //DOM对象
alert($("li").get(0).innerHTML) ) //返回第1个列表项的内容
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").get(0).innerHTML;获取元素
$("div").eq(3)[0].innerHTML;
对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包括起来，就可以获得一个 jQuery 对象。即：$(DOM对象)
例如：
$(document.getElementById("msg")) 转换后就可以使用 jQuery 中的方法了
🎃jQuery与JavaScript的混合使用
(1)网页中引入jQuery库文件后，仍然还可以使用JavaScript编写代码，两者并不冲突。不过为了充分发挥jQuery的优势，一旦涉及文档操作、事件处理、动画特效、Ajax交互等内容，就应该尽可能使用jQuery命令。
(2)虽然jQuery命令成为了程序的主体部分，但是“数据类型”、“变量”、“运算符”、“表达式”、“控制语句”、“对象”、“数组”、“函数”等等这些JavaScript基本语法依旧会穿插在整个程序中，是不可缺少的。
🎯jQuery选择器
🎃什么是jQuery选择器
jQuery选择器是jQuery提供的一组可以更加方便的获取到页面元素的方法。注意jQuery选择器返回的是jQuery对象。
jQuery选择器的语法格式为：$(selector)
$("div") $("#p1") $(".dd")
jQuery选择器完全继承了CSS选择器的风格，基本兼容了从CSS1到CSS3的绝大部分的选择器。
jQuery选择器的写法与CSS选择器的写法相似，但两者作用不同。
CSS选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为。而且jQuery中设计操作CSS样式的功能比单纯的CSS功能更强大，浏览器的兼容性更好。
🎃jQuery选择器的优点
- 简洁的书写 $() $(“选择器”)
- 支持CSS1到CSS3选择器，它还有独有的选择器，对页面元素的选择更加灵活。
🎃jQuery选择器的种类
- 基本选择器
- 层次选择器
- 过滤选择器
- 表单选择器
- 表单对象属性过滤选择器
