JQuery 入门

最新推荐文章于 2025-08-15 09:50:45 发布

weixin_30902251

最新推荐文章于 2025-08-15 09:50:45 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/msj513/p/10181410.html

本文介绍了JQuery作为JavaScript工具库的特性与优势，包括简洁的选择器、强大的DOM操作、简化的Ajax操作等，并对比了JQuery的$(document).ready()与JavaScript的window.onload的执行顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是JQuery？

1.JQuery是对原生JavaScript二次封装的工具函数的集合。

注：使用JQuery，基本上都是完成函数的调用，函数的调用().

2.jquery是一个简洁高效的且功能丰富的JavaScript工具库。

注：本质上还是js,采用的还是原生js语法，只是js做了二次封装

优势

1. 简洁的选择器
2. 强大的DOM操作
3. 简化的Ajax操作
4. 开源可拓展性(丰富的插件)

引入jquery的方法

第一种：cdn服务加载，通过请求服务器来加载jquery。（可以通过JQuery cdn搜素到cdn地址）

<script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>

依赖库一般加载卸载head头处。

第二种：将相应jquery文件下载到本地，可以进行通过修改JQuery源码进行自定制。

注：从官网下载jquery.js文件。https://jquery.com/download/

jquery的$(document).ready(function(){})和JavaScript的window.onload的执行顺序

指的是在head头部加载jquery 代码在后，因为文档树没有生成，

所以逻辑并不成立，但是js中使用window.onload =function()来加载

而jquery使用的方法$(document).ready(function(){})来加载逻辑，一般来说

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        <!--window 是等待所有资源加载完成后再加载-->
        window.onload = function () {
            var div = document.querySelector('div');
            div.style.backgroundColor = "yellow";
            console.log(2)
        }
    </script>
    <script>
        <!--$(document).ready(function (){}）这是当文档树加载完成后就加载-->
        //所以一般而言先执行
        $(document).ready(function () {
            $('div').text("123");
            console.log(1)
        })


    </script>
</head>
<body>
    <!--指的是在head头部加载jquery 代码在后，因为文档树没有生成，-->
    <!--所以逻辑并不成立，但是js中使用window.onload =function()来加载-->
    <!--而jquery使用的方法$(document).ready(function(){})来加载逻辑，一般来说-->
    <div></div>
</body>
</html>