本文介绍了jQuery的基本概念和发展历程，强调了其在前端开发中的重要性。重点讲解了jQuery的入口函数，包括引入时机、分析了$()与jQuery()的关系，以及不同用法，特别指出其与JavaScript加载机制的区别，帮助读者理解jQuery如何等待文档加载完成后再执行操作。
Jquery概述与入口函数
这两天我也是正式脱离了前端三驾马车 HTML,CSS,JavaScript的学习，来学习jQuery，旨在掌握这个经典前端类库的使用，以及分析通过分析源码来对之前的JavaScript面向对象有更深刻的理解和认识
1.Jquery概述
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
上段内容引用自百度百科 哈哈哈哈
1.1 jQuery发展历程
2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。
而到今年2020年6月中旬，jQuery的最新版本已经到了3.5.1，那其实jQuery的版本可以大致分为三种
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）国内多数网站还在使用1.x的版本
那么这里我就将选择1.12.4来进行学习，选择这个版本的原因因为首先我们从下往上学，可以了解高版本的jQuery来针对ES6了这些更新过的东西，他们做出的反应，其次现在国内大多数网站还是在使用1.x.x的版本所以我们也必须这样
1.2 Why jQuery?
在Vue与React没有发展起来的时候，几乎所有的项目都会用到jQuery那这是为什么？答案肯定不止是因为它所用的代码更少更简洁，如果只是这样jQuery应该早就在激烈的竞争中被干掉了，那它究竟解决了什么问题，这也是我要和你(对 没错 Viewers)我们一起要去看的事情，在jQuery的学习中我将深入刨析一些核心机制和重要函数，还请想学习jQuery的观众老爷持续跟进 如果觉得我写得好请关注我
2. jQuery入口函数
有很多文档直接就告诉你这个入口函数的写法就一笔带过无所谓了，对于后端攻城狮来说，这个没有问题，但是对于我们前端这是肯定不行的，最起码我们需要了解jQuery的入口函数的机制吧
2.1 jQuery引入时机
这里我下载了对应版本的源码，首先要在你想使用入口函数肯定是要吧jQuery的源码引入到页面中那么应该在哪里引入，很多人都搞不清楚，我应该在head引入更好呢，还是body中呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="Ronin">
<meta name="time" content="2020/6/15">
<meta charset="UTF-8">
<title>01</title>
<script src="JS/jquery.js"></script>
<style>
div{
background-color: black;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
$(document).ready(function () {
})
</script>
</body>
</html>
浏览器从上往下运行，如果你的核心js文件，何为核心js文件就是你的操作DOM的渲染数据等等的一系列文件，那就必须要在body中 并且是body的下面运行，因为那你随便写一个document.getElementById(‘box’)，浏览器从上至下在加载到head中的js文件时，body还没有被加载，所以没有box这个元素，后果肯定会报错。而我们的jQuery则不需要，因为它又没有操作你得DOM它只是封装了一些让你操作更便捷的对象 函数，所以在head中记载jQuery没有什么问题，在body中的script标签之前加载也没有问题，只要是在操作DOM的核心逻辑之前加载即可
2.2 入口函数分析
入口函数详解
// 1.第一种方式
$(document).ready(function(){
})
// 2.第二种方式
$(function(){
})
// 3.第三种方式
$(window).ready(function(){
})
首先说$()等同于jQuery(),是jQuery的顶级函数，这个顶级函数的作用是将一些例如Dom对象，普通JS对象或Dom数组等，转换成为jQuery对象
它的用法有七种
- jQuery(selector,context) : 给定一个css选择器和选择上下文，选中对应对象封装成为jQuery对象
- jQuery(html,ownerDocument) 、jQuery(html,props) : 用所提供代码生成HTML元素
- jQuery(element or elementsArray) : 传入元素，则封装，若传入元素数组则将元素数组内所有元素封装到同一个jQuery对象中
- jQuery(Object) : 如果传入的是一个object对象，则把该对象封装到jQuery对象中并返回。
- jQuery(callback) : 当传进去的参数是函数的时候，则在document对象上绑定一个ready事件监听函数，当DOM结构加载完成的时候执行
- jQuery(jQuery object) : 当传进去的参数是一个jQuery对象的时候，则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素
- jQuery() : 如果不传入任何的参数，则返回一个空的jQuery对象，属性length为0
那其实分析jQuery函数的用法和作用就是为我们的入口函数做铺垫、
有了顶级对象的知识我们就可以稍微的去做一点分析
$(document).ready(function(){
})
这个入口函数做了什么事情呢，将document做成一个jQuery的对象，.ready意为等待document加载完成，将会做出动作、
那如果js加载的默认动作是
window.onload = function () {
alert(1);
}
我们学过js中体系结构的都知道，document也是window的对象，那再jQuery中它只等待document的加载，而不雷同于js机制的等待window加载，它这么写的目的是为了等待文档加载完成我就开始我的操作，而不是去等待一些图片等的资源加载成功才开始操作
再有就是一个非常重要的一点，jQuery的入口函数，那不也是在js中进行加载吗，不是也就等于是
window.onload = function(){
$(document).ready(function){
}
}
实际上是因为，在提前加载jQuery的时候，jQuery就把window.onload给重载掉了所以我们在实际用的时候是只有jQuery的加载方式的
// 第二种方式
$(function(){
})
第二种方式也是第一种方式的简写版看之前关于顶级函数的内容中的
参数为函数时等于是在document上加了ready事件，完全等价
//第三种方式
$(window).ready(function(){
})
第三种方式是于原生js的机制相同的等待window加载完成，也就是除了文档树之外，还需要等待图片等资源加载完毕才会进行操作
扫一扫
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
