[JS]JQuery 引入、入口函数、JQuery 对象

2023-08-06 87

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： [JS]JQuery 引入、入口函数、JQuery 对象

前言

系列文章目录：

[目录]HTML CSS JS

根据视频和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>