前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- JS
- 视频：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
- 视频对应资源(在视频简介里面)
- 链接：【https://gitee.com/xiaoqiang001/java-script.git】
- 视频对应资源(百度网盘)
- 链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】
- 提取码：1234
1. JQuery 引入
JQuery 官网下载地址：https://jquery.com/download/
JQuery CDN 引入：
<!-- 未压缩版 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> <!-- 压缩版 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
2. JQuery 入口函数
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> // jquey 入口函数，会等页面加载完成再执行 $(document).ready(function(){ // ...... }) // 简写 $(function() { // ...... }) </script>
3. JQuery 对象
$ 是 JQuey 的别称。
$ 是 JQuey 的顶级对象，相当于原生 js 的 window。
原生 js 获取的元素对象为 DOM 对象，通过 JQuery 提供的方法获取的元素对象为 JQuery 对象，JQuey 对象是对原生 DOM 对象进行包装后产生的对象(伪数组形式存储元素对象)。
JQuey 对象只能使用 JQuey 提供的方法，DOM 对象只能使用原生 js 的方法。
4. JQuery 对象与 DOM 对象的转换
原生的一些方法和属性，JQuery 没有进行封装，使用这些方法和属性需要将JQuery 对象转化为 DOM 对象。
4.1 DOM 对象转换为 JQuery 对象
语法：
$(DOM对象)
<body> <div></div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(function() { var div = document.querySelector('div') console.log(div) var $div = $(div) console.log($div) }) </script>
4.2 JQuery 对象转换为 DOM 对象
语法：
// 方法1 $('div')[index] // index 为伪数组中元素对应的索引 // 方法2 $('div').get(index)
<body> <div></div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(function() { var $div = $('div') console.log($div) var div1 = $div[0] console.log(div1) var div2 = $div.get(0) console.log(div2) }) </script>
