JQuery概述

最新推荐文章于 2023-09-08 11:48:28 发布

海伦•

最新推荐文章于 2023-09-08 11:48:28 发布

阅读量104

点赞数

分类专栏： ==========前端========= 面试文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_42794545/article/details/127048660

版权

==========前端========= 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

面试

9 篇文章 0 订阅

订阅专栏

之前也总是听说JQuery,只知道他与JS有很大的关系，但是之前遇到的项目一直使用VUE框架做的，很少接触到JQuery，直到前段时间遇到一个轻量级项目，它用的JQuery。下面来了解一下。

1 是什么

JQuery是一个快捷的简单的JS库，他的设计宗旨是“write less,Do More”，倡导用更少的代码做更多的事情。

J:JavaScript;
Query:查询。

JS把DOM操作进行了封装，更方便的查询和使用里面的功能。优化了如下功能：

DOM操作
时间处理
动画设计和Ajax交互

学习他的本质就是学习怎么调用里面的函数。

2 JQuery优点

轻量级，才几十kb，加载速度快
跨浏览器兼容
简化了事件、样式、动画支持、大大简化了DOM操作
支持插件扩展开发，有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等。
免费、开源

3 使用方法

官网地址：jQuery

视频教程：04-jQuery基本使用-入口函数_哔哩哔哩_bilibili

JQuery的基本使用方法案例：（隐藏div）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    
    <!-- 先有DOM再有JS -->
    <script>
        // $('div').hide();
        // 1.等着页面DOM加载完毕再去执行JS代码
        // $(document).ready(function(){
        //     $('div').hide();
        // })
        // 2.等着页面DOM加载完毕再去执行JS代码
        $(function(){
            $('div').hide();
        })
    </script>

    <div>

    </div>
</body>
</html>

$:JQuery的顶级对象，也可以JQuery代替