一、什么是jQuery？
jQuery是JavaScript的一个库，它简化了使用JavaScript进行网页特效开发的一些复杂性，提供了对常见任务的自动化和复杂任务的简化。使用jQuery不仅能够将原本需要很多JavaScript代码才能实现的功能缩减为几行代码，而且提供了足够高速的性能。
相对于传统的Javascript和DOM操作来说，JQuery的优势：
1、轻量级
JQuery非常小,压缩包只有200KB左右
2、强大的选择器
JQuery不仅支持CSS里的所有选择器,还有JQuery独有的选择器.
3、出色的DOM操作封装.
JQuery封装了大量常用的DOM操作.
4、兼容性好
JQuery能够在不同浏览器中兼容,同时还修复了一些浏览器之间的差异.
5、链式编程
即对发生在同一个JQuery对象上的一组动作,可以直接连写而无需重复获取对象,使得JQuery的代码无比优雅.
6、隐式迭代
当用JQuery找到带有".class"类的全部元素,然后隐藏它们时,无需循环遍历每个返回的元素.
7、行为与结构分离
8、丰富的插件支持
9、开源
任何人都可以自由使用并提出自己的意见
JQuery的核心理念翻译过来是：写更少代码，做更多事情(write less,do more)。
二、为什么要使用jQuery？
因为jQuery是轻量级的框架，体积小，它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。)出色的浏览器的兼容性。 而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jQuery的文档也非常的丰富。
三、下载jQuery
目前jQuery有三个大版本：
- 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4
- 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
- 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。
四、jQuery如何引入使用？
关于jQuery的使用需要先导入jQuery的js文件,jQuery本身就是一个JavaScript文件。jQuery.min.js是jQuery文件的压缩版，生产环境下推荐压缩版
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>页面加载函数，其实就是页面加载完成后，执行的操作</title> <!-- 引入jQuery文件 --> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> </body> </html>
五、页面加载函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>页面加载函数，其实就是页面加载完成后，执行的操作</title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <!-- 方式一：原生js 获取span标签的内容 --> <!-- <script type="text/javascript"> function f1(){ var s1Element = document.getElementById('s1') var s1Text = s1Element.innerText console.log(s1Text) } </script> --> <!-- 方式二：使用jQuery --> <!-- <script type="text/javascript"> jQuery(document).ready(function (){ var s1Element = document.getElementById('s1') var s1Text = s1Element.innerText console.log(s1Text) }) </script> --> <!-- 方式三：将jQuery 简写成 $ --> <!-- <script type="text/javascript"> $(document).ready(function (){ var s1Element = document.getElementById('s1') var s1Text = s1Element.innerText console.log(s1Text) }) </script> --> <!-- 方式四：对于方式三再次简写 可以同时执行多个页面加载事件 --> <script type="text/javascript"> $(function (){ var s1Element = document.getElementById('s1') var s1Text = s1Element.innerText console.log(s1Text) }) </script> <script type="text/javascript"> $(function (){ console.log("零丁洋里叹零丁") }) </script> <script type="text/javascript"> $(function (){ console.log("念去去，千里烟波") }) </script> </head> <body> <span id="s1"> 这是一个span标签 </span> <!-- <br> <button type="button" onclick="f1()">点我 即可在控制台打印span标签的文本信息</button> --> </body> </html>
$是jQuery是使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。
作用1：页面加载函数
jQuery(document).ready(function(){});和$(document).ready(function({}));简写为$(function(){}),相当于window.onload=function(){}但是功能比window.onload更强大window.onload一个页面只能写一个,但是可以写多个$() 而不冲突,window.onload要等整个页面加载完后再执行(包括图片、超链接、音视频等)，但是$()的执行时间要早
作用2：选择器标志 $(selector)
选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍