初识 jQuery

jQuery

简介

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的宗旨 “Write Less，Do More”，及倡导写更少的代码、做更多的事情。它封装 JavaScript
常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

• jQuery 由美国人John Resig 于2006年创建
• jQuery 是目前最流行的JavaScript 程序库，它是对 JavaScript 对象和函数的封装
• 设计思想 write less，do more

jQuery 的核心特性可总结为：具有独特的链接语法和短小清晰的多功能接口；具有高效灵活的 css 选择器，并且可对 css 选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery 兼容各种主流浏览器，如 IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

详细的发展过程等，请在下面的超链接处了解。。。jQuery

应用

• 访问和操作 DOM 元素
• 控制页面样式
• 对页面事件进行处理
• 扩展新的 jQuery 插件
• 与 Ajax 技术完美结合

提示

jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高开发效率

jQuery 与其它 JavaScript 库

• jQuery

• Bootstrap

• Zepto

• Ext

• YUI
  
  jQuery 优势

  • 体积小、压缩后只有 100KB 左右
  • 强大的选择器
  • 出色的 DOM 封装
  • 可靠的事件处理机制
  • 出色的浏览器兼容性
  • 使用隐式迭代简化编程
  • 丰富的插件支持

jQuery 安装

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

• 从 jQuery.com 下载 jQuery 库
• 从 CDN 中载入 jQuery ，如从 Google 中加载 jQuery
  

下载 jQuery

有两个版本的 jQuery 可供下载：

名 称	大 小	说 明
Production version	约 94.8KB	经过工具压缩或经过服务器开启 Gzip 压缩，主要应用于发布的产品和项目
Development version	约 286KB	完整无压缩版本，主要用于测试、学习和开发

jQuery 库是一个 JavaScript 代码，您可以使用 HTML 的 < script > 标签引用它：

<script src="js/jquery-1.12.4.js" type="text/javaScript"></script>

jQuery 语法

语法

	$(selector).action();

• 工厂函数 $()：将 DOM 对象转化为 jQuery 对象
• 选择器 selector：获取需要操作的 DOM 元素
• 方法 action()：jQuery 中提供的方法，其中包括绑定事件处理的方法

jQuery 操作页面元素

addClass()方法

语法
	jQuery 对象.addClass([样式名]);
	eg:
	$("#current").addClass("current");

css() 方法

语法：
	css("属性","属性值");//设置一个css属性
	css({"属性1":"属性值1","属性2":"属性值2"......});//同时设置多个css属性

设置元素的显示和隐藏

语法
	$(selector).show();//显示
	$(selector).hide();//隐藏

jQuery 代码风格

• “$” 等同于 “jQuery”
• 链式操作（对一个对象进行多重操作，并将操作结果返回给该对象）
• 隐式操作

注释

阶 段	说 明
开发阶段	为代码添加注释，可以增加代码的可读性，能够让别人很容易的读懂你的代码，便于后期维护
维护阶段	建议把关键的模块形成开发文档，便于后期维护，即便后期删除代码注释，也不影响后期维护
产品正式发布	建议删除注释，减少文件大小，加快下载速度，提高用户体验

文件就绪事件

您也许已经注意到在我们的实例中所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
	//jQuery 代码
})

这时为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成之后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能会失败。

说到这，大家可能会发现 $(document).ready() 与 window.onload 相似，但是也有区别的：

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有 DOM 文档结构记载完毕后即可执行，可能与 DOM 元素关联的内容（图片、flash、视频等）并没有加载完就执行
编写个数	同一个页面只能编写一个	同一个页面同时能编写多个
简化写法	无	$(function(){ //jQuery代码 })

DOM 对象 和 jQuery 对象

DOM 对象：直接使用 JavaScript 获取的节点对象

eg:
	var objDOM=document.getElementById("title").innerHTML;

jQuery 对象：使用 jQuery 包装 DOM 对象后产生的对象，它能够使用 jQuery 中的方法

eg：
	$("#title").html();
	等同于上面的
	document.getElementById("title").innerHTML;

提示

DOM 对象和 jQuery 对象分别拥有自己独立的方法，不能混用

DOM 对象转化为 jQuery 对象
使用 $() 函数进行转化

eg:
	var txtName=document.getElementById("txtName");
	var $txtName=$(txtName);

注意

jQuery 对象命名一般以 $ 开头
在事件中经常使用 $(this) ，this 指的是触发该事件的对象

jQuery 对象转为 DOM 对象
jQuery 对象是一个类似数组的对象，可以通过 [index] 的方法得到相应的 DOM 对象

eg:
	var $txtName=$("#txtName");//jQuery 对象
	var txtName=$txtName[0];//DOM 对象

通过 get(index) 方法得到相应的 DOM 对象

eg:
	var $txtName=$("#txtName");//jQuery 对象
	var txtName=$txtName.get(0);//DOM 队形

归纳