1 jQuery 概述

1.1 JavaScript 库

库，是用于开发软件的子程序集合。库和可执行文件的区别是，库不是独立程序，他们是向其他程序提供服务的代码库链接。

JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。

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

比如 jQuery，就是为了快速方便的操作 DOM，里面基本都是函数（方法）。再比如 Prototype、Dojo、Extjs 、 YUI、移动端的 zepto 等等，这些都是优秀的 JavaScript 库。它们都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的。

1.2 jQuery

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（ 或 JavaScript 框架 ）。 jQuery 设计的宗旨是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。

jQuery = javascript Query（查询）。意思是查询 js，把 js 中的 DOM 操作做了封装，我们可以快速的查询使用里面的功能。

它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

优势：

  1. 轻量级。体积小，不会影响页面加载速度
  2. 强大的选择器
  3. 方便的选择页面元素（模仿 css 选择器更精确、更灵活）
  4. 出色的 DOM 操作的封装
  5. 对事件、样式、动画支持，大大简化了 DOM 操作
  6. 跨浏览器兼容。基本兼容了现在主流的浏览器
  7. 链式操作、隐式迭代
  8. 支持插件扩展开发。有着丰富的第三方插件。
  9. 免费、开源

2 jQuery 基本使用

2.1 jQuery 下载

① 官网地址：jQuery

② 版本区别：

  • 1x：兼容IE678,使用最为广泛，官网只做BUG维护，功能不再新增。因此一般项目来说，使用1.X版本就可以了。
  • 2x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x。(过渡)
  • 3x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。

2.2 导入方式

方式一：本地导入

直接在需要使用 jQuery 的页面引入 .js 文件：

<script src=" jQuery.js 文件路径"></script>

方式二：在线导入

我们可以通过在 script 的 src 属性中写一个网址来导入在线的 jquery 代码。

<script src="http://code.jquery.com/jquery-latest.js"></script>

2.3 jQuery 的入口函数

Js 入口函数会在 DOM 元素加载完毕并且图片也加载完毕之后再执行

jQuery 入口函数会等到 DOM 元素加载完毕，但不会等到图片加载完毕再执行

$(document).ready(function (){
    alert("hello jquery");
})
jQuery(document).ready(function () {
    alert("hello jquery");
})

// 简化方式，推荐
$(function () {
    alert("hi jquery");
})
jQuery(function () {
    alert("hi jquery");
})

2.4 jQuery 的顶级对象 $

  • $是 jQuery 的别称，在代码中可以使用 jQuery 代替$，但为了方便，通常都使用$。
  • 冲突——多库共存

原因：随着jQuery的流行，采用jQuery和$符为命名空间的 js 库越来越多，当然 jQuery 的$符也是参照的 Prototype库的，所以当多个库同时以$符或者 jQuery 为命名空间时，那么此时，就会产生冲突。

解决方法：

1.释放使用权

jQuery.noConflict();
//1.释放操作在其他函数之前
//2.释放后不能用dollar符

2.修改访问符号

var suiBian = jQuery.noConflict();
//此时suiBian为新的访问符号

2.5 DOM对象 和 jQuery 对象

DOM 对象：用原生 js 获取过来的对象就是 DOM 对象。

jQuery 对象：用 jQuery 方式获取过来的对象就是 jQuery 对象。本质：通过 $ 把 DOM 元素进行了封装（伪数组形式存储）。

区别：jQuery 对象只能使用 jQuery 方法，反之亦然。

相互转换：

  • DOM --> jQuery
$('DOM对象');
  • jQuery --> DOM（两种方式）

$('DOM对象')[index]; // index 是索引号
$('DOM对象').get(index);