jQuery学习笔记

写function时，需要注意的是，function里面的代码会在浏览器加载页面后立即运行。
这很关键，因为在没有document ready function以前，你的代码可能会在HTML渲染完成之前就执行了，这样会产生bug。

jQuery方法都是以$开头

$(“button”).addClass(“animated bounce”);//给所有button添加弹回动画
$(".well").addClass(“animated shake”);//给类属性well添加shake动画，蛇形动画
$("#target3").addClass(“animated fadeOut”);//给id属性target3添加淡出动画

jQuery使用appendTo()移动HTML元素
栗子：
比如，我们想让target4从right-well移动到left-well，我们用以下代码：

$("#target4").appendTo("#left-well");
//部分代码
$(".target:nth-child(2)").addClass("animated bounce");//选择了其父元素left-well和right-well的第二个子元素的每个target
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>

jQuery有一个clone()方法，可以复制元素。

例如，如果我们想把target2从left-well复制到right-well，我们用以下代码：

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

你有没有注意到上面是将两个jQuery方法合在一起使用了？这种叫方法链function chaining，它是jQuery的一种便捷方式。

jQuery里的索引是从0开始的，也就意味着我们使用：odd操作奇数索引时会与我们的直觉相反：:odd选择的是第2、4、6……个元素，因为索引是1、3、5……。使用：even时选择的是1、3、5、7…元素，索引为：0、2、4、6…

<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");//设置父元素的背景颜色
$("#right-well").children().css("color", "orange");//设置#right-well的子元素属性
});
$(".target:odd").addClass("animated shake");//选择器操作奇数索引元素，操作排序为2、4、6……的元素
$(".target:even").addClass("animated shake");//选择器操作偶数索引元素，操作排序为1、3、5、7....的元素
$("body").addClass("animated hinge");//jQuery也可以获取body元素。这里给整个页面添加了hinge动画

</script>