fcc jQuery 练习

在页面顶端增加一行script元素，然后写上结束符，

浏览器会运行script 里所有的Javascript，包括jQuery

 

<script>$(document).ready(function() {       开始，文件准备函数
xxxxxxxxx
});</script>                                                   结束

 

 

 

所有jQuery方法都是由$开始的，通常称作为 美元符号，或者简称为bling,

jQuery通过选择器来选择一个元素的，然后操作元素做些改变,

举个例子，要让所有的按钮做弹回效果，只要把这段代码写在document ready function里面就可以了,

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

在后台引入了jQuery库和Animate.css库，可以在编辑器里直接使用这两个库，进而通过jQuery给button元素添加bounce回弹动画效果

盒子显示动画摇，摇按钮显示动画摇和回弹，子元素继承父元素的效果

<script>
$(document).ready(function() {
$("button").addClass("animated bounce"); 动画回弹

$(".well").addClass("animated shake");动画摇

$("#target3").addClass("animated fadeOut");按钮3还显示动画渐隐
});
</script>/////

<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>

 

 

3种jQuery选择器：

元素选择器：$("button")

class选择器：$(".btn")

id选择器：$("#target1")

 

<script>
$(document).ready(function() {
$("button").addClass("animated");  按钮动画
$(".btn").addClass("shake");           按钮 摇
$("#target1").addClass("btn-primary"); 按钮蓝色
});
</script>

 

 

通过jQuery的addClass()方法给元素添加class,也可以通过jQueryremoveClass()方法去掉元素上的class

去掉元素button上的btn-default的class

<script>
$(document).ready(function() {
$("button").removeClass("btn-default");
});
</script>

<!-- 请只修改这条注释以上的代码 -->

<button class="btn btn-default target" id="target1">#target1</button>

 

jQuery有一个叫做.css()的方法能改变元素的CSS样式，这里CSS的属性和值是在各自引号内的，并且用逗号分开

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

 

 

jQuery有一个.prop()的方法让你来调整元素的属性,

调整target1按钮为不可选

$("#target1").prop("disabled", true);

 

 

jQuery的.html()方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉

通过em标签来重写和强调target4按钮里的#target4文本,

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

 

 

jQuery 还有一个类似的方法叫.text()，它只能改变文本但不能修改标记,换句话说，这个方法只会把传进来的任何东西(包括标记)当成文本来显示

 

 

移除target4按钮

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

 

 

把按钮2移到（ 剪切到，粘贴）right-well格子中

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

 

 

两个jQuery方法合在一起使用叫方法链

把按钮5复制粘贴到left-well格子中

$("#target5").clone().appendTo("#left-well");

 

 

把按钮1的父元素背景色设置为红色

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

 

 

把的right-well子元素文本变成橘色

$("#right-well").children().css("color", "orange");

 

选取target的第2个子元素显示动画回弹效果

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

 

 

jQuery里的索引是从0开始的，也就是说:odd 选择第2、4、6个元素，是奇数，因为第1个元素target#1(索引为0)是偶数，target#2(索引为1)奇数，target3(索引为2)

选择元素的偶数显示动画摇

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

 

 

整个页面动画折落

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