二、jQuery基本使用
2.1 jQuery版本
jQuery版本有很多，分为 1.x、2.x、 3.x
- 1.x 版本：能够兼容 IE6, 7, 8 浏览器（不再更新版本）
- 2.x 版本：不兼容 IE6, 7, 8 浏览器（不再更新版本）
- 3.x版本：不兼容 IE6, 7, 8，更加的精简（在国内不流行，因为国内使用 jQuery 的主要目的就是兼容 IE6, 7, 8）
1.x 和 2.x 版本 jquery 都不再更新版本了，现在只更新3.x版本
2.2 jQuery下载
- production （压缩过的版本，体积小，上线用）——生产版（压缩版）
- develepment（未压缩版本，开发时使用，适合查找）——开发版（测试版）
2.3 使用 jQuery
- 在页面中引入 jQuery 库
<!-- 服务器本地库 --> <scriptsrc="./jquery-3.6.0.js"></script> <!--
CDN远程库
项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担
[https://www.bootcdn.cn/](https://www.bootcdn.cn/)：搜索`jQuery`，复制`<script>`标签到项目中即可使用
-->
- 在 script 标签中使用 jquery 语法即可，如：
<div>Content</div> <scriptsrc="./jquery-3.6.0.js"></script> <script> $('div').hide(); </script>
2.4 jQuery 闭包结构
打开jQuery库查看后 有一个基本架构如下
( function( global, factory ) { } )();
- 用一个函数域包起来，就是所谓的沙箱
- 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局
- 把当前沙箱需要的外部变量通过函数参数引入进来
- 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数。
jQuery 具体的实现，都被包含在了一个立即执行函数构造的闭包里面，为了不污染全局作用域，只在后面暴露 $ 和 jQuery 这 2 个变量给外界。
2.5 jQuery 的 2 把利器
// jQuery核心代码 (function(window){ varjQuery=function(){ returnnewjQuery.fn.init(); } window.$=window.jQuery=jQuery })(window)
jQuery 核心函数
简称：jQuery函数（$/jQuery），jQuery库向外直接暴露的就是$/jQuery
引入jQuery库后，直接使用即可
- 当函数用：$(xxx)
- 当对象用：$.xxx()
// jQuery函数：直接可用 console.log($, typeof$); // ƒ ( selector, context ) {} function console.log(jQuery===$); // true
jQuery 核心对象
简称：jQuery对象
得到jQuery对象：执行jQuery函数返回的就是jQuery对象
使用jQuery对象：$obj.xxx()
// jQuery对象：执行jQuery函数得到它 console.log($(), typeof$(), $() instanceofObject); // jQuery.fn.init {} "object" true
2.5.1 jQuery 函数的使用
作为一般函数调用：$(param)
1.参数为函数：当 DOM 加载完成后，执行此回调函数
2.参数为选择器字符：查找所有匹配的标签并将它们封装成jQuery对象
3.参数为 DOM 对象：将 dom 对象封装成jQuery对象
4.参数为 html 标签字符串（用得少）：创建标签对象并封装成jQuery对象
作为对象使用：$.xxx()
- $.each()：隐式遍历数组
- $.trim()：去除两端的空格
// 需求1.点击按钮：显示按钮的文本，显示一个新的输入框 // 1、参数为函数：当 DOM 加载完成后，执行此回调函数 $(function () { // 绑定文档加藏完成的监听 // 2、参数为选择器字符：查找所有匹配的标签并将它们封装成`jQuery`对象 $("#btn").click(function () { // alert(this.innerHTML); // this是什么？发生事件的dom元素（<button>） // 3、参数为 DOM 对象：将 dom 对象封装成`jQuery`对象 alert($(this).html()); // 4、参数为 html 标签字符串（用得少）：创建标签对象并封装成`jQuery`对象 $('<input type="text" name="msg3"><br/>').appendTo("div"); }); // 需求2.遍历输出数组中所有元素值 vararr= [3, 7, 4]; $.each(arr, function (index, item) { console.log(index, item); // 0 3 1 7 2 4 }); })
2.5.2 jQuery 对象的使用
理解
即执行jQuery核心函数返回的对象
jQuery对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）
jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作 dom
属性和方法
- 基本行为：操作标签的基本方法
- 属性：操作内部标签的属性或值
- CSS：操作标签的样式
- 文档：对标签进行增删改操作
- 筛选：根据指定的规则过滤内部的标签
- 事件：处理事件监听相关
- 效果：实现一些动画效果
这里我们先学习jQuery对象的基本行为，其他的不放在当前章节中
2.6 入口函数
一般代码写在页面底部，等元素加载完，才能执行 jQuery 代码，或者可以使用下方入口函数解决
<scriptsrc="./jquery-3.6.0.js"></script> <script> $(document).ready(function () { // }); </script>
等待页面 DOM 加载完毕后执行，相当于原生 js 中 DOMContentLoaded
或
<scriptsrc="./jquery-3.6.0.js"></script> <script> $(function(){ // }) </script>
或
<scriptsrc="./jquery-3.6.0.js"></script> <script> $().ready(function() { // }); </script>
jQuery 入口函数与 window.onload 的对比
- JavaScript 的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
- jQuery 的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
