zoukankan      html  css  js  c++  java
  • 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 () {})

  • 相关阅读:
    AirtestIDE基本功能(二)
    AirtestIDE基本功能(一)
    Pycharm Debug功能详解
    AirtestIDE环境安装
    leetcode-338. 比特位计数
    leetcode-401. 二进制手表
    leetcode-392. 判断子序列
    leetcode-155. 最小栈
    leetcode-111. 二叉树的最小深度
    leetcode-110. 平衡二叉树
  • 原文地址:https://www.cnblogs.com/msj513/p/10181410.html
Copyright © 2011-2022 走看看