• jQuery 入门-----第一节：jQuery的概述

    文章目录

    学习目标

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

    1. jQuery 概述

    1.1 JavaScript 库

    仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

    JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
    简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
    比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

    1.2 常见的JavaScript 库

    • jQuery
    • Prototype
    • YUI
    • Dojo
    • Ext JS
    • 移动端的zepto
      这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

    1.3 jQuery 的概念

    jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。在这里插入图片描述

    • j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

    • jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

    • 学习jQuery本质： 就是学习调用这些函数（方法）。

    • jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

    1.4 jQuery 的优点

    • 轻量级。核心文件才几十kb，不会影响页面加载速度
    • 跨浏览器兼容。基本兼容了现在主流的浏览器
    • 链式编程、隐式迭代
    • 对事件、样式、动画支持，大大简化了DOM操作
    • 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
    • 免费、开源

    2. jQuery 的基本使用

    2.1 jQuery 的下载

    官网地址： https://jquery.com/
    版本：

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

    各个版本的下载：https://code.jquery.com/

    2.2 jQuery 的使用步骤

    1. 引入 jQuery 文件
    2. 使用即可

    2.3 jQuery 的入口函数

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

    • 1
    • 2
    • 3
    $(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});   

    • 1
    • 2
    • 3
    1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
    2. 相当于原生 js 中的 DOMContentLoaded。
    3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
    4. 更推荐使用第一种方式。
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        // $('div').hide();
        // 1. 等着页面DOM加载完毕再去执行js 代码
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        // 2.  等着页面DOM加载完毕再去执行js 代码
        $(function() {
            $('div').hide();

        })
    </script>
    <div></div>

</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    2.4 jQuery 的顶级对象 $

    1. $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
    2. $ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

    2.5 jQuery 对象和 DOM 对象

    1. 用原生 JS 获取来的对象就是 DOM 对象
    2. jQuery 方法获取的元素就是 jQuery 对象。
    3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

    注意：
    只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <script>
        // 1. DOM 对象：  用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);
        // 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
        $('div'); // $('div')是一个jQuery 对象
        $('span'); // $('span')是一个jQuery 对象
        console.dir($('div'));
        // 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
        // myDiv.style.display = 'none';DOM对象的隐藏方法
        // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

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

    • 因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
    1. DOM 对象转换为 jQuery 对象： $(DOM对象)
    $('div')   

    • 1
    1. jQuery 对象转换为 DOM 对象（两种方式）
    $('div') [index]       index 是索引号     

    • 1
    $('div') .get(index)    index 是索引号      

    • 1
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为 jQuery对象
        // (1) 我们直接获取视频，得到就是jQuery对象
        // $('video');
        // (2) 我们已经使用原生js 获取过来 DOM对象
        var myvideo = document.querySelector('video');
        // $(myvideo).play();  jquery里面没有play 这个方法，所以需要转换为DOM对象
        // 2.  jQuery对象转换为DOM对象
        $('video')[0].play()    //$('video')[0]表示把jQuery对象转化为DOM对象，然后在调用play方法
        $('video').get(0).play()
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
  • 相关阅读:
    魔改editormd组件，优化ToC渲染效果
    【UI设计】使用ps软件进行一些简单的操作
    Collection接口的常用方法
    Java对象数组练习
    Hive之DML操作
    9--RNN
    网课答案公众号搭建过程详解
    【产品经理修炼之道】- 需求挖掘之员工计件
    什么是S参数？它有哪些主要类型？
    客户案例｜用友NC财务系统上云
  • 原文地址：https://blog.csdn.net/qq_56897195/article/details/125393376