关于前端: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("<em>jQuery Playground</em>");

jQuery 还有一个相似的函数 .text()，能够在不增加标签的前提下扭转标签内的文本。

留神，<i> 标签尽管传统上用来强调文本，但尔后罕用作图标 (Font Awesome) 的标签。<em> 标签作为强调标签当初已被宽泛承受。

$("#target4").html("<em>#target4</em>");

删除元素

用 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");