web学习笔记（三十）

shan33__

已于 2024-03-13 19:33:01 修改

阅读量1.6k

点赞数 57

分类专栏：笔记文章标签：学习笔记 javascript ecmascript css3 前端

于 2024-03-12 19:14:40 首次发布

本文链接：https://blog.csdn.net/shan33__/article/details/136651444

版权

笔记专栏收录该内容

82 篇文章 6 订阅

订阅专栏

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

（1）格式：$(selector).animate({params},speed,easing,callback);

参数一：必选定义形成动画的 CSS 属性。
参数二：可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
参数三：可选的 easing代表的是缓动还是匀速 linear匀速 swing缓动（默认）
参数四：可选的 callback 参数是动画完成后所执行的函数名称。

（2）stop()参数含义

格式： $(selector).stop(stopAll,goToEnd);

第一个参数：可选的 stopAll 规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
第二个参数：可选的 goToEnd 规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。
stop() 方法用于在动画或效果完成前对它们进行停止
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

shan33__

关注

57
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
web学习笔记（三十）

格式：$(selector).animate({params},speed,easing,callback);参数一：必选定义形成动画的 CSS 属性。参数二：可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。参数三：可选的 easing代表的是缓动还是匀速 linear匀速 swing缓动（默认）参数四：可选的 callback 参数是动画完成后所执行的函数名称。
复制链接

扫一扫

专栏目录