jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

jQuery 选择器

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

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

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

点我

标签选择器$("p").hide() 演示 jQuery 的 hide() 函数，隐藏所有

元素。

这是一个标题

这是一个段落。

这是另一个段落。

点我

类选择器$(".test").hide() 演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。

这是一个标题

这是一个段落。

这是另外一个段落。

点我

id选择器 $("#test").hide()演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。

这是一个标题

这是一个段落

这是另外一个段落

点我

jQuery 事件

jQuery click() 演示 jQuery jQuery click() 单击事件.

如果你点我，我就会消失。

点我消失!

点我也消失!

jQuery dblclick()演示 jQuery dblclick() 双击事件。

双击鼠标左键的，我就消失。

双击我消失！

双击我也消失！

jQuery mouseenter()演示 jQuery mouseenter() 鼠标进入事件。

鼠标指针进入此处，会看到弹窗。

jQuery mouseleave() 演示 jQuery mouseleave() 鼠标离开事件。

这是一个段落。

jQuery mousedown() 演示 jQuery mousedown() 鼠标按下事件。

这是一个段落

jQuery mouseup() 演示 jQuery mouseup() 鼠标松开事件。

这是一个段落。

jQuery hover() 演示 jQuery hover() 事件。

这是一个段落。

jQuery focus() 和 blur() 演示 jQuery focus() 和 blur() 事件。

Name:

Email:

jQuery 效果

jQuery 隐藏/显示

jQuery hide() 演示 jQuery hide() 方法--隐藏。

如果你点我，我就会消失。

继续点我!

接着点我!

jQuery hide() 和 show() 演示jQuery hide() 和 show() 方法。

如果你点击“隐藏” 按钮，我将会消失。

隐藏

显示

jQuery toggle() jQuery toggle() 用于切换 hide() 和 show() 方法。

隐藏/显示

这是一个文本段落。

这是另外一个文本段落。

jQuery hide() 另外一个隐藏文本的实例。

Google

菜鸟教程

重点： hide()和show()的参数选择

语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

$("button").click(function(){

$("p").hide(1000);

});

$(document).ready(function(){

$(".hidebtn").click(function(){

$("div").hide(1000,"linear",function(){

alert("Hide() 方法已完成!");

});

});

});

jQuery淡入淡出

一、注意大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。

二、fadeTo() 没有默认参数，必须加上 slow/fast/Time

jQuery fadeIn()淡入

以下实例演示了 fadeIn() 使用了不同参数的效果。

点击淡入 div 元素。

jQuery fadeOut()淡出

以下实例演示了 fadeOut() 使用了不同参数的效果。

点击淡出 div 元素。

jQuery fadeToggle()淡入淡出切换

实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。

点击淡入/淡出

fadeTo() 使用不同参数改变透明度

演示 fadeTo() 使用不同参数

点我让颜色变淡

jQuery - 滑动

jQuery slideDown()向下滑动

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称

jQuery slideUp()向上滑动

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称

jQuery slideToggle()滑动切换

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们

jQuery- 动画

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

开始动画

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。

如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

jQuery animate() - 操作多个属性

开始动画

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。

如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

可以用 animate() 方法来操作所有 CSS 属性吗？  

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

开始动画

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。

如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

开始动画

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。

如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用

开始动画

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。

如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

开始动画

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。

如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

队列操作

jquery中有一个Queue队列的接口，这个是内部专门为动画服务的，

队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。

jQuery 停止动画

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

停止滑动

开始

停止

停止所有

停止动画，但完成动作

点击 "开始" 按钮开始动画。

点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。

点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。

点击 "停止动画，但完成动作" 快速完成动作，并停止它。

jQuery Callback 方法

在隐藏效果完全实现后回调函数

隐藏

我们段落内容，点击“隐藏”按钮我就会消失

没有回调函数

隐藏

这是一个段落，内容很少

jQuery - 链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

菜鸟教程!!

点我

菜鸟教程!!

点我

jQuery HTML

jQuery - 获取内容和属性

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

a. text() - 设置或返回所选元素的文本内容

b. html() - 设置或返回所选元素的内容（包括 HTML 标签）

c. val() - 设置或返回表单字段的值

这是段落中的 粗体 文本。

显示文本

显示 HTML

通过 jQuery val() 方法获得输入字段的值

名称:

显示值

获取属性 - attr()

菜鸟教程

显示 href 属性的值

获取属性 - prop ()

菜鸟教程

显示 href 属性的值

attr 和 prop 的区别介绍：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

菜鸟教程

这个例子里 元素的 DOM 属性有: href、target 和 class，

这些属性就是 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，

或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。

处理这些属性时，建议使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

删除

这个例子里 元素的 DOM 属性有: href、id 和 action，

很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，

元素本身是没有这个属性的。这种就是自定义的 DOM 属性。

处理这些属性时，建议使用 attr 方法。

prop()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是 undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值

这是一个段落。

这是另外一个段落。

输入框:

设置文本

设置 HTML

设置值

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

这是一个有 粗体 字的段落。

这是另外一个有 粗体 字的段落。

显示 新/旧 文本

显示 新/旧 HTML

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

菜鸟教程

修改 href 值

点击按钮修改后，可以点击链接查看链接地址是否变化。

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

菜鸟教程

修改 href 和 title

点击按钮修改后，可以查看 href 和 title 是否变化。

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

菜鸟教程

修改 href 值

点击按钮修改后，可以点击链接查看 href 属性是否变化。

jQuery - 添加元素

添加新的 HTML 内容

append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容

1. append() - 在被选元素的结尾插入内容

这是一个段落。

这是另外一个段落。

1. List item 1
2. List item 2
3. List item 3

添加文本

添加列表项

2. prepend() - 在被选元素的开头插入内容

这是一个段落。

这是另外一个段落。

1. 列表 1
2. 列表 2
3. 列表 3

添加文本

添加列表项

我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

这是一个段落。

追加文本

3. jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

之前插入

之后插入

4. 通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

之后插入

jQuery - 删除元素

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）empty() - 从被选元素中删除子元素

jQuery remove() 方法 删除被选元素及其子元素。

移除div元素

jQuery empty() 方法 删除被选元素的子元素。

清空div元素

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有

元素：

这是一个段落。

这是另外一个段落。

这是另外一个段落。

移除所有 class="italic" 的 p 元素。

jQuery - 获取并设置 CSS 类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性

.important {

font-weight:bold;

font-size:xx-large;

}

.blue {

color:blue;

}

jQuery addClass() 方法

向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

标题 1

标题 2

这是一个段落。

这是另外一个段落。

为元素添加 class

您也可以在 addClass() 方法中规定多个类：

为第一个 div 元素添加类

jQuery removeClass() 方法

下面的例子演示如何在不同的元素中删除指定的 class 属性：

标题 1

标题 2

这是一个段落。

这是另外一个段落。

从元素中移除 class

jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

标题 1

标题 2

这是一个段落。

这是另外一个段落。

切换 class

addClass('c1 c2 ...' | function(i, c)) -- 添加一个或多个类。

removerClass('c1 c2 ...' | function(i, c)) -- 删除一个或多个类。

toggleClass('c1 c2 ...' | function(i, c), switch?) -- 切换一个或多个类的添加和删除。

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

返回首个匹配元素的 background-color 值：

这是一个标题

这是一个段落。

这是一个段落。

这是一个段落。

返回第一个 p 元素的 background-color

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

这是一个标题

这是一个段落。

这是一个段落。

这是一个段落。

这是一个段落。

设置 p 元素的 background-color

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

这是一个标题

这是一个段落。

这是一个段落。

这是一个段落。

这是一个段落。

为 p 元素设置多个样式

jQuery 尺寸

jQuery 提供多个处理尺寸的重要方法：

width()height()innerWidth()innerHeight()outerWidth()outerHeight()

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

显示 div 元素的尺寸

width() - 返回元素的宽度

height() - 返回元素的高度

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

显示 div 元素的尺寸

innerWidth() - 返回元素的宽度 (包含内边距)。

innerHeight() - 返回元素的高度 (包含内边距)。

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

下面的例子返回指定的