jQuery工具的一些内容

@[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”);