FreeCodeCamp总结——jQuery
用法:页面顶端加入<script></script>
添加方法:$(document).ready(function(){});
在没有document ready function以前,代码会在HTML没有渲染完成就执行,会产生bug
注:所有的jQuery方法都是由美元符$开始的
1.添加css 类
JQuery是通过选择器来操作元素的,例如
$("button").addClass("animated bounce");
后台已经引入了jQuery库和Animate.css库,直接使用就可以添加bounce回弹动画效果。
用$("button")来选中按钮,然后用jQuery的addClass()方法来给按钮添加Css class
用$(".well")来获取所有class为well的div元素
2.去掉class:
$("#target2").removeClass("btn-default");
3.改变HTML元素的CSS样式:例如改变颜色为蓝色:属性和值是再引号内的,并且用逗号分开。
$("#target1").css("color", "blue");
4.让按钮变不可点(置灰)
jQuery有一个.prop()方法可以调整元素的属性
$("button").prop("disabled",true);
5.jQuery不仅可以改变元素开始标记和结束标记间的文本,甚至可以改变元素标记本身。
jQuery的.html()方法可以添加Html标签和文字到元素,之前的内容都会被替换掉。
通过em[emphasize]来重写和强调标题文本
$("h3").html("<em>jQuery Playground</em>");
6. .text()方法只能改变文本,不能修改标记,这个方法会把传进来的任何东西(包括标记)当成文本来显示。
7. .remove()方法来移除HTMl元素$("#target4").remove();
8.移动元素:把元素从第一个div移到另一个div中
JQuery有一个appendTo()方法可以把选中的元素加到其它元素中,比如将target4从right-well移到left-well,可以这样使用:
$("#target4").appendTo("#left-well");
9.拷贝元素:clone()方法 例如:将target2从left-well拷贝到right-well
$("#target2").clone().appendTo("#right-well");
将两个jQuery方法一起用,叫方法链function chaining,使用起来很方便。10.父parent元素:每个元素都有,比如很多div的父元素是body
jQuery有一个方法可以访问指定元素的父元素:parent(),比如让left-well元素的父元素的背景颜色变成蓝色:
$("#left-well").parent().css("background","blue");
11.children()方法——类似parent()方法
12.索引选择元素:
我们已经看到了当用jQuery选择器通过id属性来选取元素的时候是多么方便,但不能总是写这么整齐的id,幸运的是,jQuery有一些另外的技巧可以达到同样的效果。例如target : nth-child (n),允许按照索引顺序(从1开始)选择子元素
例如:给目标元素的第三个子元素添加bounce class
$(".target:nth-child(3)").addClass("animated bounce");
例如:获取class为target且索引为基数的所有元素,并添加class
$(".target:odd").addClass("animated shake");
记住,jQuery里的索引是从0开始的,也就是说::odd选择第2、4、6个元素,因为target#2(索引为1),target#4(索引为3),target6(索引为5)。例如:索引为偶数的所有元素,也就是target#1(索引为0),target#3(索引为2),target5(索引为4),并给它们添加classanimated 和 shake。
$(".target:even").addClass("animated shake");
13.结束:让整个body都有淡出效果(fadeOut): $("body").addClass("animated fadeOut");让我们做一些更为激动人心的事情,给body添加class : animated和hinge 。
代码:
下一篇: 绪论