认识JQuery

一. jQuery 简介
1.jQuery是一个JavaScript库
2.jQuery具备简洁的语法和跨平台的兼容性
3.简化了JavaScript的操作。
主旨：以更少的代码、实现更多的功能
二. 学习jQuery的条件
jQuery是JavaScript库，所以jQuery在使用上要比原生的JavaScript要简单，但是对于网页编程来说，有些通用的基础知识是必备的：

1. HTML4.0（含CSS，网页必备的基础技术）；
2. JavaScript（虽然jQuery使用比JavaScript简单，但各种语法来自JavaScript，并不需要完全精通，只要理解语法和项目中简单的用法即可。）；
3. 服务器语言如：jsp（jQuery属于前端技术和后端技术是相辅相成、互相呼应的 ）

三. 下载jQuery
进入官方网站获取最新的版本 http://jquery.com 。
其他网站： http://www.jq22.com/jquery-info122
这里需要注意 jQuery 分 3 个系列版本 1.x 、 2.x 和 3.x ，主要的区别在于 2.x 不再兼容 IE6 、 7 、 8 浏览器，这样做的目的是为了兼容移动端开发。由于减少了一些代码，使得该版本比 jQuery 1.x 更小、更快。
如果开发者比较在意老版本 IE 用户，只能使用 jQuery1.9 及之前的版本了

jQuery库类型说明
jQuery库的类型分为两种，分别是生产版（最小压缩版）和开发版（未压缩版）,它们的区别如表所示：

在页面中引入jQuery
jQuery 是一个 JavaScript 脚本库，不需要特别的安装，只需要我们在页面 标签内中，通过 script 标签引入 jQuery 库即可，可以使用以下两种方法：
• 引入本地 jQuery 库
• 从远程 CDN 中载入 jQuery , 如从百度中加载 jQuery jQuery 是一个 JavaScript 脚本库，不需要特别的安装，只需要我们在页面 标签内中，通过 script 标签引入 jQuery 库即可，可以使用以下两种方法：
• 引入本地 jQuery 库
• 从远程 CDN 中载入 jQuery , 如从百度中加载 jQuery
jQuery HelloWorld初体验
当页面加载完成后，弹框显示“Hello World”字样。

jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是： $(selector).action()
• 美元符号定义 jQuery
• 选择符（ selector ）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作
示例
• $(this).hide() - 隐藏当前元素
• $(“p”).hide() - 隐藏所有段落
• $(".test").hide() - 隐藏所有 class=“test” 的所有元素
• $("#test").hide() - 隐藏所有 id=“test” 的元素

演示 jQuery hide() 函数，隐藏当前的 HTML 元素

jQuery文档就绪函数
在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
在延迟等待加载，JavaScript提供了一个事件为load，方法如下 ：
• window.onload = function () {}; // JavaScript等待加载
• $(document).ready(function () {}); // jQuery等待加载

四.jQuery对象与DOM对象
对于才开始接触 jQuery 库的初学者，我们需要清楚认识一点 ： jQuery 对象与 DOM 对象是不一样 的 。
通过一个简单的例子，简单区分下 jQuery 对象与 DOM 对象 ：
• 需求：我们 要获取页面上这个 id 为 hp 的 p 元素，然后给这个文本节点增加一段文字：“您好 ！欢迎进入 jQuery 的学习。” ，并且让文字颜色变成红色。

普通处理，通过标准JavaScript处理：

jQuery的处理：

jQuery对象与DOM对象的对比
通过 jQuery 方法包装后的对象，是一个数组对象 ， 而 DOM 对象就是一个单独的 DOM 元素 。 它与 DOM 对象完全不同，唯一相似的是它们都能操作 DOM ;
jQuery 对象是 jQuery 独有的，如果 一个对象 是 jQuery 对象 , 那么 它就可以 使用 jQuery 里的方法 : $(“#p1”). html();
jQuery 对象 无法 使用 DOM 对象 的任何方法 , 同样 DOM 对象 也不能 使用 jQuery 里 的任何 方法 ;
约定 ：如果获取的是 jQuery 对象 , 那么要在变量前面加上 $.
• var $variable = jQuery 对象
• var variable = DOM 对象
jQuery对象转化成DOM对象

在很多场景中，我们需要 jQuery 与 DOM 能够相互的转换。
jQuery 对象转成 DOM 对象，有如下两种处理方法 :
• 1.jQuery 对象是一个数组对象 , 利用数组下标 [index] 的方法得到对应的 DOM 对象 .
• 2. 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
示例： HTML代码

通过数组下标[index]的方法得到对应的DOM对象:

通过jQuery自带的get()方法, jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：

相比较 jQuery 转化成 DOM ，开发中更多的情况是把一个 DOM 对象加工成 jQuery 对象。
对于一个 DOM 对象 , 只需要用 $() 把 DOM 对象包装起来 ( jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 ), 就可以获得一个 jQuery 对象 .
JavaScript代码:

通过 getElementsByTagName 获取到所有 div 节点的元素，结果是一个 dom 合集对象，不过这个对象是一个数组合集 (3 个 div 元素 ) 。通过 $(div) 方法转化成 jQuery 对象，通过调用 jQuery 对象中的 first 与 css 方法查找第一个元素并且改变其颜色。