jQuery

Learn how Script Tags and Document Ready Work

最流行的JavaScript库jQuery

<script>
  $(document).ready(function(){
    
  });
</script>

浏览器会运行 script 里所有的Javascript，包括jQuery。
The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.
在没有document ready function以前，你的代码会在HTML没有渲染完成就执行，这样会产生bug。

Target HTML Elements with Selectors Using jQuery

所有jQuery方法都是由$开始的，通常称作为美元符号，或者简称为bling。
jQuery通过选择器来选择一个元素，然后操作元素做些改变。
举个例子，要让所有的按钮做弹回效果，只要把这段代码写在document ready function里面就可以了。

$("button").addClass("animated bounce");（确保已引入jQuery库和Animate.css库）
注：另外，single-quote selectors（单引号选择器）不会通过测试，一定要使用double-quote selectors（选择器）

Target Elements by Class Using jQuery

我们是怎么给所有的按钮做弹回效果的？

$("button")来选中按钮
.addClass("animated bounce")给按钮加CSS class。
同理，我们来使用$(".well")来获取所有class为well的div元素，在well前加** . **就像之前CSS声明一样。
然后使用jQuery的.addClass()方法添加2个class：animated、shake。

Target Elements by ID Using jQuery

可以根据id属性来获取元素
$("#target6").addClass("animated fadeOut")

Target the same element with multiple jQuery Selectors

现在你已经了解了3种选择器：元素选择器：$("button")、class选择器：$(".btn")、id选择器：$("#target1")。

Remove classes from an element with jQuery

可以通过jQuery的addClass()方法给元素添加class,也可以通过jQueryremoveClass()方法去掉元素上的class。
$("#target2").removeClass("btn-default");

Change the CSS of an Element Using jQuery

可以通过jQuery来改变HTML元素的CSS样式。
jQuery有一个叫做.css()的方法能让你改变元素的CSS样式。
$("#target1").css("color", "blue");
这跟通常的CSS语法有点不同，这里CSS的属性和值是在引号内的，并且用逗号分开。

Disable an Element Using jQuery

可以用jQuery改变除了CSS以外的属性。比如，你可以让按钮变不可选。
当你把按钮设置成不可选以后，这会让按钮变灰并且不能点击。
jQuery有一个.prop()的方法让你来调整元素的属性.
$("button").prop("disabled", true)

Change Text Inside an Element Using jQuery

jQuery不仅可以改变元素开始标记和结束标记间的文本，甚至可以改变元素标记本身。
jQuery的.html()方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。
通过em[emphasize]标签来重写和强调标题文本：
$("h3").html("<em>jQuery Playground</em>");
jQuery 还有一个类似的方法叫.text()，它只能改变文本但不能修改标记。换句话说，这个方法只会把传进来的任何东西(包括标记)当成文本来显示。

Remove an Element Using jQuery

jQuery 有一个.remove() 的方法可以移除HTML元素:
$("#target4").remove();（）不需要设置参数

Use appendTo to Move Elements with jQuery

jQuery有一个appendTo()方法可以把选中的元素加到其他元素中。
比如，你想让target4从我们的从right-well移到left-well，我们可以这样使用:
$("#target4").appendTo("#left-well");

Clone an Element Using jQuery

除了移动元素，你还可以拷贝元素。简单理解：移动元素就是剪切，拷贝元素就是复制。

jQuery的clone()方法可以拷贝元素。
把target2从left-well拷贝到right-well，可以这样写:
$("#target2").clone().appendTo("#right-well");
这里，两个jQuery方法合在一起使用了，这就叫方法链function chaining。

Target the Parent of an Element Using jQuery

每个HTML元素根据继承属性都有父parent元素。
jQuery有一个方法叫parent()，它允许你访问指定元素的父元素:
$("#left-well").parent().css("background-color", "blue")

Target the Children of an Element Using jQuery

每个人都继承了自己的父母的一些属性，譬如：DNA、相貌、血型、体型等等，HTML也不例外。许多HTML元素都有children(子元素)，每个子元素都从父元素那里继承了一些属性。

jQuery有一个方法叫children()，它允许你访问指定元素的子元素:
$("#left-well").children().css("color", "blue")

Target a Specific Child of an Element Using jQuery

你已经看到了当用jQuery选择器通过id属性来选取元素的时候是多么方便，但是你不能总是写这么整齐的id。
幸运的是，jQuery有一些另外的技巧可以达到同样的效果。

jQuery 用CSS选择器来选取元素，target:nth-child(n) CSS选择器允许你按照索引顺序(从1开始)选择目标元素的所有子元素。
- 你可以给目标元素的第三个子元素添加bounce class。
  $(".target:nth-child(3)").addClass("animated bounce");

Target Even Numbered Elements Using jQuery

even-numbered 偶数的
odd-numbered 奇数的

获取class为target且索引为奇数的所有元素，并给他们添加class:
$(".target:odd").addClass("animated shake");
记住，jQuery里的索引是从0开始的，也就是说：:odd 选择第2、4、6个元素，因为target#2(索引为1)，target#4(索引为3)，target6(索引为5。

Use jQuery to Modify the Entire Page

让整个body都有淡出效果(fadeOut)：
$("body").addClass("animated fadeOut");
让我们做一些更为激动人心的事情，给body添加class animated 和hinge :
$("body").addClass("animated hige");