jQuery学习

TIP

最后更新时间:2019年09月27日

字数:

学习资源

jQuery 简介

JS 库

  • js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可

jQuery 库

  • jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率

jQuery CDN

CDN的全称是Content Delivery Network,即内容分发网络

CDN大致原理(百度百科)

  • 基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。
  • 通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
  • 其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

常见jQuery各个版本的CDN

jQueryCDN

3.3.1

<!-- 链接 -->
https://cdn.bootcss.com/jquery/3.3.1/jquery.js
<!-- 引入标签 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<!-- min版本 -->
<!-- 链接 -->
https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
<!-- 引入标签 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

1
2
3
4
5
6
7
8
9
10
11

入口函数

我们都知道,网页加载是需要时间的,如果网页未加载完毕,我们就进行一些操作,可能会达不到我们希望的效果,所以我们的一些操作是需要在文档(document)加载完毕后,再继续进行的

文档加载顺序

文档加载的顺序为:从上往下, 边解析边执行

  • css并不会阻塞DOM树的解析
  • css加载会阻塞DOM树渲染
  • css加载会阻塞后面js语句的执行
  • js执行会阻塞DOM树的解析和渲染

CSS优化建议

  • 使用CDN(因为CDN会根据你的网络状况,替你挑选最近的一个具有缓存内容的节点为你提供资源,因此可以减少加载时间)
  • 对css进行压缩(可以用很多打包工具,比如webpack,gulp等,也可以通过开启gzip压缩)
  • 合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的,不过要注意一个问题,就是文件更新后,你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
  • 减少http请求数,将多个css文件合并,或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

JavaScript优化建议

  • 将所有<script>标签放置在页面底部,紧靠关闭标签</body>的上方
  • 将脚本成组打包
    • 页面的<script>标签越少,页面的加载速度就越快,响应也更迅速
    • 不论外部脚本文件还是内联代码都是如此
  • 使用非阻塞方式下载Javascript:
    • 为<script>标签添加defer属性
      • 延迟脚本
      • js脚本会被延迟到整个页面都解释完毕后(浏览器遇到</html>标签后)再运行
    • 为<script>标签添加async属性
      • 异步脚本
      • 异步脚本一定会在页面的load事件前执行
    • 动态创建<script>元素,用它下载并执行代码
    • 用XHR对象下载代码,并注入到页面
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
1
2

TIP

  • defer属性只适合引用外部脚本文件,不能保证按顺序执行脚本,建议只有一个脚本引用使用defer属性

  • async属性只适合引用外部脚本文件,不能保证按顺序执行脚本,请确保脚本之间不含依赖

  • 使用defer属性引入的脚本会比使用async属性引入的脚本先执行

window.onload

  • window.onload 是原生的JS的入口函数
window.onload = function () {
  alert("window.onload");
}
1
2
3

TIP

原生js的入口函数,页面上所有内容加载完毕, 才执行

不仅要等文本加载完毕, 而且要等图片也加载完毕, 才执行函数

jQuery 入口函数

$(document).ready(function () {
  alert("入口函数");
})

// 简写形式
$(function () {
  alert("入口函数");
});
1
2
3
4
5
6
7
8

TIP

文档加载完毕, 图片不加载的时候, 就可以执行这个函数

$(window).ready(function () {
  alert("入口函数");
})
1
2
3

TIP

文档加载完毕, 图片也加载完毕的时候, 再执行这个函数

区别一:书写个数不同

  • JavaScript的入口函数只能出现一次, 出现多次会存在事件覆盖的问题
  • jQuery的入口函数, 可以出现任意多次, 并不存在事件覆盖问题

区别二:执行世纪不同

  • JavaScript的入口函数
    • 在所有的文件资源加载完成后, 才执行
    • 这些文件资源包括:页面文档、外部的JS文件、外部的CSS文件、图片等
    • 类似$(window).ready()
  • jQuery的入口函数:
    • 在文档加载完成后就执行
    • 文档加载指的是:DOM树加载完成后, 就可以操作DOM了
    • 不用等到所有的外部资源都加载成功

$ 和 jQuery

选择器

jQuery 对象 和 DOM 对象

事件