03 - JQuery - 01.概述

LLLuycyxL

已于 2023-11-19 10:40:30 修改

阅读量45

点赞数

分类专栏：前端文章标签： jquery

于 2023-09-13 08:36:40 首次发布

本文链接：https://blog.csdn.net/weixin_44683513/article/details/132844606

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    jQuery 
概述 
JS 库 
即 library，一个 JS 文件。里面对原生 js 进行了封装，是一个封装好的特定的集合（方法和函数）。如 动画 animate、hide、show、获取元素等
常见的 JS 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的 zepto
 
jQuery 
快速的、简洁的 JS库
设计宗旨：“Write Less, Do More”
封装了 JS 常用的功能代码，优化了 DOM 操作、事件处理、动画设计、Ajax 交互
优点：
 1.轻量级。核心文件几十kb，不会影响页面加载速度
 2.跨浏览器兼容。基本兼容了现在主流的浏览器
 3.链式编程、隐式迭代
 4.对事件、样式、动画 支持，大大简化了 DOM 操作
 5.支持插件扩展开发。有丰富的第三方插件，如树形菜单、日期控件、轮播图等
 6.免费、开源
 
基本使用 
jQuery 的下载 
官网地址：https://jquery.com/、https://code.jquery.com/、https://jquery.com/download/
版本
 1x：兼容 IE678 等低版本浏览器，官网不再更新
 2x：不兼容 IE678 等低版本浏览器，官网不再更新
 3x：不兼容 IE678 等低版本浏览器，是官方主要更新维护的版本
production vs development
 production jQuery【代码被压缩过】【实际开发中使用】
 development jQuery【代码未被压缩过】
 
jQuery 的使用步骤 
步骤
 1.引入 jQuery 文件【复制】
 2.使用即可【新建、粘贴】
注意事项
 原生 js / js 库中，script 都得写在 DOM 元素下面
 jQuery 常用双引号 ""
 
jQuery 的入口函数 
$(function() { // 此处是页面 DOM 加载完成的入口 })【推荐】
 $(document).ready(function() { // 此处是页面 DOM 加载完成的入口 })<head>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        $(document).ready(function() {  // 法一
            $('div').hide();
        })
        $(function() {  // 法二
            $('div').hide();
        })
    </script>
    <div></div>
</body>
 
等 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成。相当于原生 js 中的 DOMContentLoaded，不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css 文件、图片加载完毕才执行内部代码
 
jQuery 的顶级对象 $ 
$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但常用 $
$ 是 jQuery 的顶级对象，相当于原生 js 中的 window，把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法
示例<head>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $(function() {
        });
        jQuery(function() {
            $('div').hide();
            jQuery('div').hide();
        });
    </script>
</body>
 
 
jQuery 对象和 DOM 对象 
原生 js 获取的对象是 DOM 对象，jQuery 方法获取的元素是 jQuery 对象
jQuery 对象本质：利用 $ 对 DOM 对象包装后产生的对象【伪数组形式存储】
jQuery 对象只能用 jQuery 方法，DOM 对象只能用原生的 js 属性和方法，不可混用<head>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <script>
        var myDiv = document.querySelector('div');
        var mySpan = document.querySelector('span');
        console.dir(myDiv);  // div

        $('div');
        $('span');
        console.dir($('div'));  // w.fn.init(1)

        // myDiv.hide();  // 错误
        // $('div').style.display = 'none';  // 错误
    </script>
</body>
 
DOM 对象 和 jQuery 对象之间可以相互转换
原生 js > jQuery，若要使用 jQuery 未封装的原生 js 的属性和方法，需将 jQuery 对象转换为 DOM 对象
DOM 对象 -> jQuery 对象
 $(DOM 对象)
 jQuery 对象 -> DOM 对象
 $('div')[index]
 $('div').get(index)<head>
    <script src="jquery.min.js"></script>
</head>

<body>
    <video src="mov.mp4" muted></video>
    <!-- 浏览器默认不播放视频，muted 属性静音播放 -->
    <script>
        $('video');

        var myVideo = document.querySelector('video');
        myVideo.play();  // 正确

        // DOM -> jQuery
        // $(myVideo).play();  // 报错，$(...).play is not a function，jQuery 中无 play()
        
        // jQuery -> DOM
        $('video')[0].play();  // 正确
        $('video').get(0).play()  // 正确
    </script>
</body>
 

                