JQuery 入门

什么是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>

结论：$(document).ready() 要早于 window.onload；

　　$(document).ready(): 文档树加载完毕即回调, 无需关系页面资源加载；

　　window.onload: 文档树及文档所需所有资源加载完毕才回调。

 

注：$(document).ready(function(){})还可以简写成$(function () {})

 

posted @ 2018-12-26 20:11  msjaxuexi  阅读(129)  评论(0)  编辑  收藏  举报