1.配置jQuery环境

1.1获取jQuery最新版本

进入jQuery的官方网址 http://jquery.com ,下载最新的jQuery库。

1.2 jQuery库类型说明

目前jQuery库分为三个大版本:

jquery-1.x版本,兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。一般项目来说,使用1.x版本就可以了,例如:jquery-1.11.3。

jquery-2.x版本,不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,例如:jquery-2.1.4。

jquery-3.x版本,不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本,目前该版本是官方主要更新维护的版本,例如:jquery-3.2.1。

jQuery官方手册:http://api.jquery.com

1.3 jQuery.js和jQuery.min.js的区别

jQuery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js,例如:

jquery.js是完整的未压缩的jQuery库,文件比较大,一般用于阅读学习源码或修改源码,一般不用于线上项目。

jquery.min.js是由完整版的jQuery库经过压缩得来,压缩后功能与未压缩的完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删除,并进行一些优化。这个版本一般用于网站引用使用(项目上线的时候使用),减小文件体积,降低网站流量,提升访问速度等。

1.4 在页面中引入jQuery

1.4.1 引入本地jQuery

先把我们已经下载好的jQuery源文件添加到我们的项目里面来,然后再我们的页面中引用jQuery文件。

<script src="jquery-1.11.3/jquery.min.js"></script>

1.4.2 CDN引入jQuery

CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

目前谷歌、微软和百度等的服务器都存有jQuery,下面我们就用百度静态资源公共库来为大家做演示。

<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>

2. 编写jQuery程序

在开始编写第一个jQuery程序之前,首先应该明确一点。在jQuery库中,$就是jQuery的一个简写的形式,例如$("#car")和jQuery("#car")是等价的,$.ajax和jQuery.ajax是等价的。如果没有特别说明,程序中的$符号都是jQuery的一个简写形式。

jQuery入口函数完整写法:

<head><meta charset="UTF-8"><title>Title</title><script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script><script>$(document).ready(function () { // 等待DOM元素加载完毕alert("Hello World"); // 弹出一个提示框});</script>
</head>

简化写法:

<head><meta charset="UTF-8"><title>Title</title><script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script><script>$(function () { // 等待DOM元素加载完毕alert("Hello World"); // 弹出一个提示框});</script>
</head>

以上两种jQuery的入口函数,类似于传统的JavaScript中的window.onload方法,不过与window.onload还是有一些区别。

| 描述 | window.onload | $(document).ready() | | :---: | :---: | :---: | | 执行时机 | 必须等待网页中所有的内容都加载完毕后(包括图片)才能执行 | 网页中所有DOM结构绘制完毕后就执行,可能DOM元素相关联的东西并没有加载完成(例如图片还没下载完成) | | 编写个数 | 不能同时编写多个 | 可以同时别写多个 |

jquery项目源码_第一个jQuery程序相关推荐

  1. java web开源项目源码_超赞!推荐一个专注于Java后端源码分析的Github项目!

    大家好,最近有小伙伴们建议我把源码分析文章及源码分析项目(带注释版)放到github上,这样小伙伴们就可以把带中文注释的源码项目下载到自己本地电脑,结合源码分析文章自己本地调试,总之对于学习开源项目源 ...

  2. GitHub上最火的22个Android开源项目源码(最少的一个也超过10k star)

    GitHub上最火的22个Android开源项目源码均超万星 chat图表 最全android工具类库 29.6k start Android智能下拉刷新框架-SmartRefreshLayout 2 ...

  3. 基于微信小程序共享停车位设计与实现SSM_car.rar(项目源码+数据库文件+微信小程序开发+后端java语言)

    主要功能实现了共享车位的创建,车位的管管理,创建车辆.车辆的管理.附近车位.显示车位的编号,车位的位置,车位的状态,车位.可以查看订单记录车位.停费时间,确认时间计费的时间.可以删除,订单也可以确认是 ...

  4. java web开源项目源码_适合Java新手的开源项目集合——在 GitHub 学编程

    作者:HelloGitHub-老荀 当今互联网份额最大的编程语言是哪一个?是 Java!这两年一直有听说 Java 要不行了.在走下坡路了.没错,Java 的确在走下坡路,未来的事情的确不好说,但是瘦 ...

  5. unity项目源码_在Unity中使用protobuf

    Protocol Buffers (通常简称为protobuf) 是Google开发的一种格式,这种格式与开发语言无关.与运行平台无关,用于序列化结构数据,并且很容易扩展.这种格式可以用于通信协议.数 ...

  6. delphi精品项目源码_项目是如何死掉的?太过真实!

    1.不可达到的目标 2.无法执行的计划 3.贫乏的项目资源 4.失控的变更管理 5.缺乏态度及立场 6.无能的团队建设 7.奖罚不清 8.缺乏风险管理 9.经验不足的乙方PM 10.经验不足的甲方PM ...

  7. android studio 项目源码_这个标星 2.3k+ 的项目带你 Android 源码分析从入门到放弃...

    上次写了一篇 Android 开发者的福利,介绍几款看源码的工具 ,这篇文章主要介绍了三款看 Android 源码的工具,后台有很多同学留言问,有没有分析源码的. 分析源码的文章也很多,但大多数文章不 ...

  8. flask项目源码_源码解读:Flask上下文与代理模式

    在上一节中,我跟大家一起深入了解了一下Python的「上下文管理器 」.而今天呢,还是和上下文有关的话题.只不过这里的上下文和上一节的内容有点不一样,上下文管理器是管理代码块级别的上下文,而今天要讲的 ...

  9. 安卓实训项目源码_综合性项目:在线学习考试系统

    此项目是本人耗费大量的业余时间独立开发,制作该开源项目的原因: 巩固Java8.Spring Boot.MyBatis等后端方面的知识 巩固HTML.JavaScript.Vue.ElementUI等 ...

最新文章

  1. java递归排雷_C语言实现扫雷小游戏
  2. XenApp_XenDesktop_7.6实战篇之十四:XenDesktop虚拟桌面的交付
  3. java网络编程面试题
  4. wifi一阵一阵卡_家里wifi总是过一会就卡一下然后又好了
  5. 4.4 高斯消元法的矩阵表示
  6. php购票排位_用PHP+MySQL实现12306购票和退票以及余票查询逻辑
  7. 西南交大计算机辅助制造a卷,计算机辅助制造 西南交大作业.doc
  8. 桌面 NAS 是什么
  9. jsp跨域访问cookies_cookie 跨域访问的解决方案
  10. Python数据结构之字节,字节数组
  11. 彻底抛弃脚本录制,LR脚本之使用web_custom_request函数自定义http请求
  12. mysql觸發器_mysql觸發器案例
  13. 今天第一次来这里开博,大家多多指教
  14. uniapp之安卓文件操作插件
  15. 假如让你从 0 到 1 实现一个直播弹幕系统
  16. swift 学习-- 元组
  17. UPS 静态旁路开关
  18. 临时表空间不足ORA-01652: unable to extend temp segment by 64 in tablespace
  19. Hexo博客发表文章、草稿、添加分类和标签
  20. 英语语法汇总(6.副词)

热门文章

  1. PyTorch——torch.Tensor与np.ndarray(NumPy)之间的类型转换
  2. Python将csv格式转换为xlsx
  3. 画图必备numpy函数
  4. 给你出道题 红绿灯问题
  5. Altium AD20原理图从库中更新变动,库中模型修改后同步到原理图中
  6. mac idea命令精简使用版常用指令
  7. RAP框架练习(续)
  8. 分析“HTTP500内部服务器错误”解决方法
  9. c++中double类型控制小数位数
  10. ElasticSearch 2 (20) - 语言处理系列之如何开始