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