【jQuery】初识jQuery
乐正烨熠
一、什么是jQuery?
jQuery其实就是一个封装了很多方法的js库，我们学习jQuery其实就是学习这些方法如何使用。
二、为什么要学习jQuery？
因为原生js存在许多缺陷，而使用jQuery则避免甚至解决了这些缺陷。
- 原生js不能添加多个入口函数（window.onload),如果添加了多个，后面的就会把前面的覆盖，但jQuery可以有多个入口函数；
- 原生js的api名字都很长并且不好记，而jQuery的api名字更容易记忆；
- 原生js书写容易产生代码冗余，jQuery使用隐式迭代代码简洁；
- 原生js中有的属性或者方法存在浏览器兼容问题，jQuery帮我们解决了浏览器兼容问题；
- 原生js容错率比较低，当前面代码出现问题后，其后面的代码就无法执行，而jQuery容错率比较高，前面的代码出现了问题，后面的代码不受影响。
三、jQuery如何使用？
- 第一步：引入jQuery文件；
- 第二步：编写入口函数；
- 第三步：使用jQuery选择器找到你要操作的元素，调用jQuery的属性或方法操作它（添加属性，修改样式…）。
四、jQuery文件如何引用及其各个版本的区别？
1.引入方式
（1）在线引入
<!--压缩版-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--未压缩版-->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
（2）本地引入
可以从官网中下载对应版本的jQuery文件，然后在代码中引入
下载地址：https://jquery.com/download/
<!--src中为对应版本的相对路径-->
<script src="js/jquery-3.6.0.js"></script>
2.版本区别
- 1.x : 支持老浏览器，如IE6、7、8 目前已停止更新
- 2.x : 不支持老浏览器 目前已停止更新
- 2.x : 不支持老浏览器 更新中
每个版本又有压缩版和未压缩版：
- compressed：压缩版也叫精简版，去掉了格式，体积小，适用于发布；（.js）
- uncompressed：未压缩版也叫原版，有统一的格式，体积较大，方便阅读，适用于测试、学习和开发。(.min.js)
五、jQuery入口函数
// 第一种写法
$(document).ready(function(){
})
// 第二种写法（常用）
$(function(){
})
jQuery入口函数和window.onload的区别：
- window.onload入口函数不能写多个，但jQuery入口函数可以写多个；
- jQuery入口函数在页面上dom树加载完毕即可执行，而window.onload入口函数要等待页面上所有资源都加载完毕后执行。
六、jQuery中的$是什么？
jQuery文件是一个自执行函数，而引入一个js文件时会执行这个js文件中的代码，当你引入了 jQuery时， 这个自执行函数就被执行，而在这个子执行函数中有很重要的一句话，即 window.jQuery = window.$ = jQuery; 就是给window对象添加一个jQuery属性和$属性，jQuery和$是等价的,是一个函数。
$的使用：
- 函数参数传递的是一个匿名函数–入口函数；
- 函数参数传递的是一个字符串–选择器/创建标签；
- 函数参数传递的是dom对象–将dom对象转化成jQuery对象。
七、DOM对象和jQuery对象的区别及其相互转化
（1）DOM对象：原生js选择器获取到的对象；
（2）jQuery对象：jQuery选择器获取到的对象，是一个伪数组，实际上是对dom对象的一个包装集；
（3）区别：DOM对象只能调用dom方法或者属性，不能调用jQuery的属性或者方法；jQuery对象只能调用jQuery方法或者属性，不能调用dom的属性或者方法；
（4）DOM对象转化成jQuery对象：直接将获取到的dom对象当作参数传入$函数；
let btns = document.getElementsByTagName("button");
let $btns = $(btns);
（5）jQuery对象转化成DOM对象：
- 使用下标取出来；
- 使用jQuery的方法get()；
let $btns = $("button");
//方法一
let btn1 = $btns[0];
//方法二
let btn2 = $btns.get(1);
代码实例：灯的开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关案例</title>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.js"></script>-->
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<button>开灯</button>
<button>关灯</button>
<br/>
<img src="statics/cute.jpg" />
<script>
$(function(){
let btns = document.getElementsByTagName("button");
//使用dom对象绑定点击事件
btns[0].onclick = function (){
//使用jQuery对象设置样式
$("body").css("backgroundColor","white");
}
//使用jQuery对象绑定点击事件
$(btns[1]).click(function (){
//使用dom对象设置样式
document.getElementsByTagName("body")[0].style.backgroundColor="black";
/*
* 注意这里使用document.getElementsByTagName("body")[0]而不是document.getElementsByTagName("body")
* 因为getElementsByTagName取出的是一个伪数组 其长度为1 第0个元素为我们需要的body元素
* 如果直接为伪数组设置样式的话会报错：Cannot set property 'backgroundColor' of undefined
* */
});
});
</script>
</body>
</html>
类似资料：