jQuery 笔记

jQuery

script 和 document.ready

首先，在页面顶部添加 ​​script​​ 标签， 记得添加结束标签。

浏览器会运行 ​​script​​ 标签所有的 JavaScript 脚本包括 jQuery。

在 ​​script​​ 标签中添加代码 ​​$(document).ready(function() {​​。 然后在后面（仍在该 ​​script​​ 标签内）用 ​​});​​ 闭合它。只要浏览器加载页面，​​function​​ 中放入的代码就会运行。

有一点很重要，如果没有 ​​document ready function​​，代码将在 HTML 页面呈现之前运行，这可能会导致错误。

$(document).ready(function() {
});

选择器 Selector

所有的 jQuery 函数都以 ​​$​​ 开头，这个符号通常被称为美元符号（dollar sign operator）或 bling。

jQuery 通常选取并操作带有选择器（selector）的 HTML 标签。

标签

比如，想要给 ​​button​​ 元素添加跳跃效果。 只需要在 document ready 函数内添加如下代码:

$("button").addClass("animated bounce");

class

使用 ​​$(".well")​​ 选取类为 ​​well​​ 的 ​​div​​ 标签。

jQuery 的 ​​.addClass()​​ 方法用来给标签添加类。

值得注意的是，和 CSS 声明一样，在类名前需要添加 ​​.​​。

$(".well").addClass("animated shake");

id

首先，用 ​​$("#target3")​​ 选择器选取 id 为 ​​target3​​ 的 ​​button​​ 标签。

注意，和 CSS 声明一样，在 id 名前需要添加 ​​#​​。

$("#target3").addClass("animated fadeOut");

移除 class

利用 jQuery 的 ​​removeClass()​​ 方法移除。

$("button").removeClass("btn-default");

css

用 jQuery 直接改变 HTML 标签的 CSS。

jQuery 有一个 ​​.css()​​ 方法，能改变标签的 CSS。

下面的代码效果是把颜色变蓝：

$("#target1").css("color", "blue");

这与通常的 CSS 声明略有不同，因为这个 CSS 属性和值在英文引号里，并且它们用逗号而不是冒号间隔开。

$("#target1").css("color", "red");

禁用元素

用 jQuery 改变 HTML 标签的非 CSS 属性， 例如：禁用按钮。

当禁用按钮时，它将变成灰色并无法点击。

jQuery 有一个 ​​.prop()​​ 方法，可以用其调整标签的属性。

下面是禁用所有的按钮的代码：

$("button").prop("disabled", true);

更改文本

通过 jQuery 改变元素开始和结束标签之间的文本。 甚至改变 HTML 标签。

jQuery 有一个 ​​.html()​​ 函数，能用其在标签里添加 HTML 标签和文本， 函数提供的内容将完全替换之前标签的内容。

下面是重写并强调标题文本的代码：

$("h3").html("jQuery Playground");

jQuery 还有一个类似的函数 ​​.text()​​，可以在不添加标签的前提下改变标签内的文本。

注意，​​​​ 标签虽然传统上用来强调文本，但此后常用作图标(Font Awesome)的标签。 ​​​​ 标签作为强调标签现在已被广泛接受。

$("#target4").html("#target4");

删除元素

用 jQuery 从页面移除 HTML 标签。

jQuery 有一个 ​​.remove()​​ 方法，能完全移除 HTML 标签。

$("#target4").remove();

移动元素

现在来把标签从一个 ​​div​​ 移动到另一个里。

jQuery 有一个 ​​appendTo()​​ 方法，可以选取 HTML 标签并将其添加到另一个标签里面。

例如，如果要把 ​​target4​​ 从 right well 移到 left well，可以设置如下

$("#target4").appendTo("#left-well");

克隆元素

也可以把元素从一个地方复制到另一地方。

jQuery 有一个 ​​clone()​​ 方法，可以复制标签。

例如，如果想把 ​​target2​​ 从 ​​left-well​​ 复制到 ​​right-well​​，可以设置如下：

$("#target2").clone().appendTo("#right-well");

是否注意到这两个 jQuery 函数连在一起了？ 这被称为链式调用（function chaining），是一种用 jQuery 实现效果的简便方法。

选择父元素

每个 HTML 标签都默认 ​​inherits​​（继承）其 ​​parent​​（父标签）的 CSS 属性。

jQuery 有一个 ​​parent()​​ 方法，可以访问被选取标签的父标签。

下面的代码展示了使用 ​​parent()​​ 方法把 ​​left-well​​ 标签的父标签背景色设置成蓝色（blue）：

$("#left-well").parent().css("background-color", "blue");

选择子元素

把 HTML 标签放到另一个级别的标签里，这些 HTML 标签被称为该标签的子标签（children element）。

jQuery 有一个 ​​children()​​ 方法，可以访问被选取标签的子标签。

下面的代码展示了用 ​​children()​​ 方法把 ​​left-well​​ 标签的子标签的颜色设置成 ​​blue​​（蓝色）：

$("#left-well").children("color", "blue");

选择特定子元素

jQuery 可以用 CSS 选择器（CSS Selectors）选取标签。 ​​target:nth-child(n)​​ CSS 选择器可以选取指定 class 或者元素类型的的第 n 个标签。

下面的代码展示了给每个区域（well）的第 3 个标签设置弹跳（bounce）动画效果：

$(".target:nth-child(3)").addClass("animated bounce");

选择偶数元素

也可以用基于位置的奇 ​​:odd​​ 和偶 ​​:even​​ 选择器选取标签。

注意，jQuery 是零索引（zero-indexed）的，这意味着第 1 个标签的位置编号是 0。 这有点混乱和反常——​​:odd​​ 表示选择第 2 个标签（位置编号 1），第 4 个标签（位置编号 3）……等等，以此类推。

下面的代码展示了选取所有 ​​target​​ class 元素的奇数元素并设置 sheke 效果：

$(".target:odd").addClass("animated shake");

。请记住， 偶数指的是基于零系统的元素的位置。

修改整个页面

jQuery 也能选取 ​​body​​ 标签。

$("body").addClass("animated hinge");