jQuery认识

https://jquery.com/ jQuery网站

目标
能够说出什么是jQuery
能够说出jQuery的优点
能够简单使用jQuery
能够说出DOM对象和jQuery对象的区别

1.jQuery概述

1.1 js库
仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里查找就行

js库:即library,是一个封装好的特定的集合(方法和函数).
从封装一大堆函数的角度理解库。
这个库中封装了很多预先定义好的函数在里面,比如动画animate hide show

简单理解:就说一个JS文件,原生js代码进行了封装,存放到里面。
(可以快速使用这些封装好的功能

jQuery就说为了快速方便的操作DOM,里面基本都是函数(方法)。

常见的js库
jQuery Prototype YUI Dojo Ext JS 移动端的zepto

这些库都是对原生的js的封装,内部都是用js实现。

1.2jQuery的概念

jQuery是一个快速 简介的JS库
其设计的宗旨是write Less DO More 即写更少的代码

jQuery:j就说js;Query查询; 查询js,
把DOM操作做了封装 可以快速的查询使用里面的功能

jQuery封装了js常用的功能代码,优化了DOM操作 时间处理 动画设计 Ajax交互

学习jQuery本质:学习调用这些函数(方法)

优点：
轻量级 核心文件才几十kb 不会影响页面加载速度
跨浏览器兼容.基本兼容了现在主流的浏览器
链式编程 隐式迭代
对事件 隐式 动画支持 大大简化了DOM操作
支持插件扩展开发例如轮播图 日期控件
免费 开源

2.1 jQuery的下载

版本:
1x: 兼容IE 678等低版本浏览器,官网不再更新
2x: 不兼容IE 678等低版本浏览器,官网不再更新
3x: 不兼容IE 678等低版本浏览器,是官方主要更新维护的版本

2.2 jQuery的使用步骤

1.引入jQuery文件

https://jquery.com/  jQuery网站

Download the compressed, production jQuery 3.6.3

全选复制

创建JS文件 放入

<script src="jquery.min.js"></script>

2.3jQuery的入口函数

方式一
$(function(){
     ...//此处是页面DOM加载完成的入口
});

方式二
$(document).ready(function(){
     ... //此处是页面DOM加载完成的入口
})

1.等着DOM结构渲染完毕即可执行内部代码, 不必等到所有外部资源完成
  jQuery帮我们完成了封装

2.相当于原生js中的DOMContentLoaded

3.不同于原生js中的load事件是等页面文档 外部的js文件 css文件 图片加载完毕

4.推荐方式一

2.4 jQuery的顶级对象$

1.$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便 通常使用$

$(function () {            
    $('div').hide();
});

$(function () {
    $('div').hide(); 
});

2.$是jQuery的顶级对象,相当于原生jS中的window。
把元素利用$包装成jQuery对象,就可以调用jQuery方法

2.5 Query对象和DOM对象相互转换

1.用原生JS获取来的对象就是DOM对象

2.jQuery方法获取的元素就说jQuery对象

DOM对象与jQuery对象之间是可以相互转换的

因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装
要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用

1.DOM对象转换为jQuery对象：$(DOM对象)
        $('video');

2. jQuery对象转换为DOM对象
        $(Video)[index]
        $(Video).get[index]

    <video src="mov.mp4"></video>
    <script>
        // DOM对象转换为jQuery对象
        // 1.我们直接获取视频 得到jQuery对象
        $('video');

        // 2. jQuery对象转换为DOM对象
        $(Video)[0]
        $(Video).get[0]