jQuery学习笔记之初始jQuery

1、jQuery是什么

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2、JavaScript和JavaScript库

☞JavaScript简介
JavaScript是Netscape公司于1995年开发的一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
当时，它的主要目的是处理以前由服务器端语言负责的一些输入验证操作。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使得网页可以包含更多活跃的元素和更加精彩的内容。但JavaScript自身存在3个弊端，即复杂的文档对象模型(DOM)、不一致的浏览器实现和便捷的开发、调试工具的缺失。
☞JavaScript库

	为了简化JavaScript的开发，一些JavaScript程序库就诞生，JavaScript程序库封装了很多预定义的对象和使用函数。

Prototype：是一种JavaScript库，提供用于执行常见 web 任务的简单API。API是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作HTML DOM。Prototype通过提供类和继承，实现了对JavaScript的增强。
AngularJS：是一种流行的企业框架，许多开发人员使用其构建和维护复杂的 Web 应用程序。AngularJS 是十分受欢迎的，许多公司都使用它，像达美乐披萨、瑞安航空、iTunes Connect，PayPal 支付，谷歌等。AngularJS 是由谷歌支持的开源框架。AngularJS 把自己描述为一个 HTML 的扩展，可用来构建复杂的Web应用程序。此外，如果你熟悉TypeScript，将会很清楚AngularJS 是如何编写的。AngularJS是一个MVC类型的框架，它提供了双向的数据模型和视图之间的绑定。这种数据绑定，允许在双方只要有一个数据变化时，自动进行更新。它使你可以构建可重用的View组件。同时，它也提供了一个服务框架，以便前后端服务的轻松通信。最后它只是普通的 JavaScript。
JQueryj：是一个不需要过多介绍的框架。它凭一己之力使得跨浏览器站点成为现实并促使 Web 发展到今天。Web 标准被大多数主要浏览器厂商所采纳真正的尊重，jQuery 是其原因之一。jQuery 的基金会的使命是“通过开发和支持开源软件，提高开放的网络，使之为所有人开放，并与开发社区合作。”jQuery 是世界上最常用的 JavaScript 库，没有应用程序不去使用它，除非不在乎编码效率。它使得在所有浏览器中，DOM traversal、事件处理、动画、AJAX 是如此的简单和容易。

3、为什么学习Jquery

☞轻量级

JQuery非常轻巧，采用Dean Edwards编写的Packer压缩后，大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。

☞强大的选择器

JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而且复杂的选择器，另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。

☞出色的DOM操作的封装

JQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。

☞可靠的事件处理机制

JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面，JQuery也做得非常不错。

☞完善的Ajax

JQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

☞不污染顶级变量

JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权，绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期的冲突。

☞出色的浏览器兼容性

作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异，使开发者不必在开展项目前建立浏览器兼容库。

☞链式操作方式

JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。

☞隐式迭代

当用JQuery找到带有“.myClass”类的全部元素，然后隐藏他们时。无需循环遍历每一个返回的元素。相反JQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减少代码量。

☞行为层与结构层的分离

开发者可以使用选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使JQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。

☞丰富的插件支持

JQuery的易扩展性，吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持，而且还不断有新插件面试。

☞完善的文档

JQuery的文档非常丰富，现阶段多位英文文档，中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档，例如JQuery的中文API。

☞开源

JQuery是一个开源的产品，任何人都可以自由地使用并提出修改意见。

4、第一个jQuery代码

1）获得jQuery库文件
进入jQuery的官网 http://jquery.com/ ，下载最新的jQuery库文件。
2）jQuery库类型说明
jQuery库的类型分为两种，分别是生成版和开发版：
(1) jQuery.min.js(生成版) 约31KB 经过工具压缩，主要应用于产品和项目
(2) jQuery.js(开发版) 约229KB 完整无压缩版本，主要用于测试、学习和开发
3）使用jQuery开发
jQuery不需要安装，把下载好的jQuery库文件放在网站上的一个公共的位置就可以应用。
代码实例：

<!DOCTYPE html>
<html>
  <head>
      <!--在head标签内引用jQuery -->
      <script src=”../juery.js” type=”text/javascript”></sript>
      <script type=”text/javascript”>
        $()document).ready(function(){
   alter(“Hello World!”)
})
</sript>
  </head>
  <body>
  </body>
</html>

jQuery入口函数

1、$(document).ready(function(){ 代码。。。。。。。。})

2、$(function(){ 代码。。。。。。。。})

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
a) 试图隐藏一个不存在的元素；b) 获得未完全加载的图像的大小。

5、jQuery对象和DOM对象

jQuery对象和DOM对象简介
☞DOM对象：Document Object Model文档对象模型，把整个页面映射为一个多层节点结构，每个DOM都可以表示成一颗树。
☞jQuery对象：就是通过jQuery包装DOM对象后产生的对象。
☞使用js原生代码生成的对象为DOM对象，使用jQuery代码生成的对象为jQuery对象。DOM对象不能使用jQuery对象中的任何方法，jQuery对象也不能使用DOM对象中任何方法。
jQuery对象和DOM对象相互转化
☞jQuery对象转化为DOM对象：两种方法（[index]和get(index)）
☞jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var jq = $(“#jq”)				// jQuery对象  
var dom = jq[0]					// DOM对象 
alter(dom.checked)				// 检查这个checkbox是否被选中

☞jQuery本身提供的，通过get(index)方法得到相应的DOM对象

var jq = $(“#jq”)				// jQuery对象
var dom = jq.get[0]				// DOM对象
alter(dom.checked)				// 检查这个checkbox是否被选中

☞DOM对象转化为jQuery对象
只需要用$()把DOM对象包装起来，就可以把DOM对象转化为jQuery对象。

> var dom = document.getElementById(“#dom”)	             // DOM对象 
> var jq = $(dom)		        	                     // jQuery对象

6、jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
☞ 美元符号定义 jQuery
☞选择符（selector）“查询"和"查找” HTML 元素
☞jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() 				- 隐藏当前元素
$("p").hide() 				- 隐藏所有 <p> 元素
$("p.test").hide()			- 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() 			- 隐藏所有 id="test" 的元素