jQuery——轻量级的"写的少，做的多"的JavaScript库。

在开始学习 jQuery 之前，应该对以下知识已经掌握：

• HTML
• CSS
• JavaScript

JQuery基础：

jQuery库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

如何使用jQuery？可以使用以下方法（生产环境下使用.min.js——压缩版）：

• 从 jquery.com 下载 jQuery 库
• 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery（比如百度：scr=""https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js""）

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

//美元符号定义 jQuery
//选择符（selector）"查询"和"查找" HTML 元素
//jQuery 的 action() 执行对元素的操作

举例：
$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

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

$("#test").hide() - 隐藏所有 id="test" 的元素

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作，我们将所有的 jQuery 代码放置在一个 document ready 函数中（文档就绪事件），其他的所有jQuery代码都必须放在这里面，包括事件函数等。

jQuery 入口函数与 JavaScript 入口函数的区别：

•  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

•  JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery 选择器

jQuery 选择器对 HTML 元素组或单个元素进行操作。

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	class="intro" 的所有元素
.class,.class	$(".intro,.demo")	class 为 "intro" 或 "demo" 的所有元素
element	$("p")	所有 <p> 元素
el1,el2,el3	$("h1,div,p")	所有 <h1>、<div> 和 <p> 元素
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:odd	$("tr:odd")	所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:first-child	$("p:first-child")	属于其父元素的第一个子元素的所有 <p> 元素
:first-of-type	$("p:first-of-type")	属于其父元素的第一个 <p> 元素的所有 <p> 元素
:last-child	$("p:last-child")	属于其父元素的最后一个子元素的所有 <p> 元素
:last-of-type	$("p:last-of-type")	属于其父元素的最后一个 <p> 元素的所有 <p> 元素
:nth-child(n)	$("p:nth-child(2)")	属于其父元素的第二个子元素的所有 <p> 元素
:nth-last-child(n)	$("p:nth-last-child(2)")	属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数
:nth-of-type(n)	$("p:nth-of-type(2)")	属于其父元素的第二个 <p> 元素的所有 <p> 元素
:nth-last-of-type(n)	$("p:nth-last-of-type(2)")	属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数
:only-child	$("p:only-child")	属于其父元素的唯一子元素的所有 <p> 元素
:only-of-type	$("p:only-of-type")	属于其父元素的特定类型的唯一子元素的所有 <p> 元素
parent > child	$("div > p")	<div> 元素的直接子元素的所有 <p> 元素
parent descendant	$("div p")	<div> 元素的后代的所有 <p> 元素
element + next	$("div + p")	每个 <div> 元素相邻的下一个 <p> 元素
element ~ siblings	$("div ~ p")	<div> 元素同级的所有 <p> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$("ul li:gt(3)")	列举 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列举 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的输入元素
:header	$(":header")	所有标题元素 <h1>, <h2> ...
:animated	$(":animated")	所有动画元素
:focus	$(":focus")	当前具有焦点的元素
:contains(text)	$(":contains('Hello')")	所有包含文本 "Hello" 的元素
:has(selector)	$("div:has(p)")	所有包含有 <p> 元素在其内的 <div> 元素
:empty	$(":empty")	所有空元素
:parent	$(":parent")	匹配所有含有子元素或者文本的父元素。
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
:root	$(":root")	文档的根元素
:lang(language)	$("p:lang(de)")	所有 lang 属性值为 "de" 的 <p> 元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='default.htm']")	所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value]	$("[href!='default.htm']")	所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value]	$("[title|='Tomorrow']")	所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
[attribute^=value]	$("[title^='Tom']")	所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value]	$("[title~='hello']")	所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value]	$("[title*='hello']")	所有带有 title 属性且值包含字符串 "hello" 的元素
[name=value][name2=value2]	$( "input[id][name$='man']" )	带有 id 属性，并且 name 属性以 man 结尾的输入框
:input	$(":input")	所有 input 元素
:text	$(":text")	所有带有 type="text" 的 input 元素
:password	$(":password")	所有带有 type="password" 的 input 元素
:radio	$(":radio")	所有带有 type="radio" 的 input 元素
:checkbox	$(":checkbox")	所有带有 type="checkbox" 的 input 元素
:submit	$(":submit")	所有带有 type="submit" 的 input 元素
:reset	$(":reset")	所有带有 type="reset" 的 input 元素
:button	$(":button")	所有带有 type="button" 的 input 元素
:image	$(":image")	所有带有 type="image" 的 input 元素
:file	$(":file")	所有带有 type="file" 的 input 元素
:enabled	$(":enabled")	所有启用的元素
:disabled	$(":disabled")	所有禁用的元素
:selected	$(":selected")	所有选定的下拉列表元素
:checked	$(":checked")	所有选中的复选框选项
.selector	$(selector).selector	在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target	$( "p:target" )	选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素

如果网站包含许多页面，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

注意：载入jQuery库需要单独的一个script标签，然后必须再另用一个script标签放jQuery代码。

jQuery 事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。常见 DOM 事件，：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click    （单击）	keypress	submit	load
dblclick   （双击）	keydown	change	resize
mouseenter   （鼠标移动到被选元素）	keyup	focus	scroll
mouseleave    （鼠标离开到被选元素）	hover	blur	unload

常用jQuery事件方法：

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。


click() 方法是当按钮点击事件被触发时会调用一个函数。


dblclick() 方法触发 dblclick 双击元素事件，或规定当发生 dblclick 事件时运行的函数。


mouseenter() 方法触发 mouseenter鼠标指针穿过元素 事件，或规定当发生 mouseenter 事件时运行的函数。


mouseleave() 方法触发 mouseleave 鼠标指针离开元素事件，或规定当发生 mouseleave 事件时运行的函数。


mousedown() 方法触发 mousedown 鼠标指针移动到元素上方，并按下鼠标按键事件，或规定当发生 mousedown 事件时运行的函数。


mouseup() 方法触发 mouseup 元素上松开鼠标按钮事件，或规定当发生 mouseup 事件时运行的函数。


hover()方法用于模拟光标悬停事件。定义两个函数，当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);
当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。


focus() 方法触发 focus 元素获得焦点事件，或规定当发生 focus 事件时运行的函数，
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。


blur() 方法触发 blur 元素失去焦点事件，或规定当发生 blur 事件时运行的函数