目录
1.jQuery选择器
2. jQuery祖宗的相关方法
3.jQuery子代的相关方法
4.jQuery同胞的相关方法
5.jQuery的class类操作
6.jQuery动画
6.1显示show()和hide()
6.2滑入slideDown()和滑出slideUp()
6.3淡入fadeIn()和淡出fadeOut()
7.自定义动画 animate()
1.jQuery选择器
$('*') | 选取所有元素 |
$(this) | 选取当前html元素 |
$("p.intro") | 选取 class 为 intro 的 <p> 元素 |
$("p:first") | 选取第一个 <p> 元素 |
2. jQuery祖宗的相关方法
- parent() 方法返回被选元素的直接父元素,只返回一个。
$(document).ready(function(){$("span").parents(); });
- parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
$(document).ready(function(){$("span").parents("ul"); });
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){$("span").parentsUntil("div");
});
3.jQuery子代的相关方法
- find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
$(document).ready(function(){$("div").children("p.1"); });
children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
$(document).ready(function(){$("div").children();
});
4.jQuery同胞的相关方法
- siblings() 方法返回被选元素的所有同胞元素(除去自身之外的所有兄弟元素)。
- next() 方法返回被选元素的下一个同胞元素。只返回一个。
- nextAll() 方法返回被选元素的所有跟随的同胞元素。
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev() 方法返回被选元素的上一个同胞元素。只返回一个。
- prevAll() 方法返回被选元素的所有上方的同胞元素。
- prevUntil() 方法返回介于两个给定参数之间的所有上方的同胞元素。
5.jQuery的class类操作
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作,在括号内写入一个类名,若该元素节点有这个类名就给他去掉,若没有该类名就添加上去。
- hasClass()-判断一个元素有没有某个类
6.jQuery动画
6.1显示show()和hide()
- $(selector).hide(speed,callback);里面的参数都是可选的,speed表示速度,可以用毫秒或者"slow(600ms)"、"normal(400ms)"、 "fast(200ms)"来表示。callback表示回调函数,一般写为function(){}
- $(selector).show(speed,callback);里面的参数都是可选的,speed表示速度,可以用毫秒或者"slow(600ms)"、"normal(400ms)"、 "fast(200ms)"来表示。callback表示回调函数,一般写为function(){}
-
$(selector). toggle(speed,callback); 里面的参数都是可选的,speed表示速度,可以用毫秒或者"slow(600ms)"、"normal(400ms)"、 "fast(200ms)"来表示。callback表示回调函数,一般写为function(){}
6.2滑入slideDown()和滑出slideUp()
-
$(selector).slideDown(speed,callback);
-
$(selector).slideUp(speed,callback); 参数的使用和显示隐藏是一样的。
6.3淡入fadeIn()和淡出fadeOut()
- $(selector).fadeIn(speed,callback); 参数的使用和显示隐藏是一样的。
- $(selector).fadeOut(speed,callback);
7.自定义动画 animate()
格式:$(selector).animate({params},speed,easing,callback);
- 参数一:必选 定义形成动画的 CSS 属性。
- 参数二:可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
- 参数三:可选的 easing代表的是缓动还是匀速 linear匀速 swing缓动(默认)
- 参数四:可选的 callback 参数是动画完成后所执行的函数名称。