什么是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 () {})