开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

1 概述

JavaScript 库

JavaScript库：即一个封装好的特定的集合。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画，比如获取元素等。

通俗来说：

库就是一个文件，里面对我们原生js进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数

常见的JavaScript库

●jQuery
●Prototype
●YUI
●Dojo
●Ext JS
●移动端的zepto

这些库都是对原生js的封装，内部都是用js实现的

jQuery 的概念

jQuery 是一个快速、简洁的 JavaScript 库，其设计宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

jQuery的意思就是，把js中的DOM操作做了封装，可以快速的查询使用里面的功能

优点

轻量级，核心文件才几十kb，不会影响页面加载速度
跨浏览器兼容，基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源

2 jQuery 的基本使用
官网地址 jquery.com/
版本
各个版本的下载 code.jquery.com/
●1x ：兼容 IE 678 等低版本浏览器，官网不再更新
●2x ：不兼容 IE 678 等低版本浏览器，官网不再更新
●3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

jQuery 的入口函数

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装
相当于原生 js中的 DOMContentLoaded
不同于原生 js中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码
更推荐使用第一种方式

1 <style>
2     div {
3        width: 200px;
4        height: 200px;
5        background-color: pink;
6          }
7 </style>
8 <script>
9 // 1.等着页面DOM加载完毕再去执行JavaScript代码
10 // $(document).ready(function() {
11 // $('div').hide();
12 **//** })
13 
14 // 2.等着页面DOM加载完毕再去执行javascript代码
15  $(function() {
16        $('div').hide();
17       });
18 </script>
19 <div></div>

jQuery的顶级对象 $

●$是jQuery 的别称，在代码中可以使用jQuery 代替$，但一般为了方便，通常都直接使用$

●$是jQuery的顶级对象，相当于原生JavaScript 中的windown。把元素利用$包装成jQuery对象，就可以调用 jQuery 的方法

jQuery 对象和 DOM 对象
●用原生JS 获取来的对象就是 DOM 对象
●jQuery 方法获取的元素就是 jQuery 对象
●jQuery 对象本质是：利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）

注意

只有 jQuery 对象才能使用 jQuery 方法，DOM对象则使用原生的 JavaScirpt 方法

jquery的基本使用

1 概述

jQuery 的概念

jQuery的顶级对象 $