@[TOC]jQery
[默认已经引入了jQuery和Animate.css库]
创建起始function
<script>
$(document).ready(function() {
});
</script>
使用type选择器为所有button添加跳一下效果
<script>
$(document).ready(function() {
$(“button”).addClass(“animated bounce”);*
});
</script>
使用class选择器为所有带有某个class的div都添加左右抖动效果 如:well
<script>
$(document).ready(function() {
$(“button”).addClass(“animated bounce”);
$(".well").addClass(“animated shake”);
});
</script>
使用id选择器为某个id名元素添加淡出隐藏效果 如:target3
<script>
$(document).ready(function() {
$(“button”).addClass(“animated bounce”);
$(".well").addClass(“animated shake”);
$("#target3").addClass(“animated fadeOut”)
});
</script>
删除某种.类型某type元素的某个class 如:div的btn-default
<script> $(document).ready(function() {
$(“div”).removeClass(“btn-default”);
});
</script>
改变某个元素的某个class的样式
<script> $(document).ready(function() {
$(“#target1”).css(“color","blue”);
});
</script>
改变某个元素的状态 如:禁用所有button
<script> $(document).ready(function() {
$(“button”).prop(“disabled”,true);
});
</script>
为某个或某类元素修改文本且添加标签 如:斜体强调
<script> $(document).ready(function() {
$(“h3”).html("<em>修改后的文本<\em>");
});
</script>
删除整个元素
<script> $(document).ready(function() {
$("#target4").remove();
});
</script>
移动本元素添加到其他地方
<script>$(document).ready(function() {
$("#target1").appendTo(“left-well”);
});
</script>
复制并添加本元素到其他地方
<script>$(document).ready(function() {
$("#target1").clone().appendTo(“right-well”);
});
</script>
改变父元素
<script>$(doument).ready(function() {
$(#left-well).parent().css(“background-color”,“blue”);
});
</script>
改变子元素
<script>$(doument).ready(function(){
$(#right-well).children().css(“color”,“orange”);
});
</script>
其他获取元素的方法
$(".target:nth-child(3)").addClass(“animated bounce”); 每个的第三个
$(".target:odd").addClass(“animated shake”);
奇数项的 2.4.6…偶数是even
修改整个页面为动态效果“掉下去了”
$(“body”).addClass(“animated fadeOut”);