jQuery.each()循环及隐藏显示和淡入淡出特效

最新推荐文章于 2023-03-14 13:40:30 发布

opo77_

最新推荐文章于 2023-03-14 13:40:30 发布

阅读量878

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/opo77_/article/details/109021513

版权

本文介绍了jQuery中的.each()方法，包括两种使用方式，以及如何遍历li元素集合。接着展示了如何实现点击按钮后元素的隐藏和显示，利用.toggle()方法。最后讲解了fadeIn()、fadeOut()、fadeTo()和fadeToggle()四种淡入淡出动画特效及其应用实例。

摘要由CSDN通过智能技术生成

循环

利用循环方法遍历匹配结果集中的所有元素。

.each()方法
两种用法

1.获取结果集中每个元素的信息
2.在每个选中元素上执行一系列操作

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>each方法</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body>    <ul>        <li id="first">1</li>        <li id="second">2</li>        <li id="third">3</li>
    </ul>    <script>        $("li").each(function(){
                $(this).append('<b>hello</b>');        });    </script></body></html>

第一部分选取结果包含代码中的每个li元素
第二部分.each（）方法会在每个选取结果上执行相同的代码
第三部分在每个列表项上执行一个匿名函数（匿名函数后面给每一项后面加了加粗的hello字符串）
结果就是每一个li后面加了一个hello字符串
在这里插入图片描述

如何遍历一个li集合？
答：$(“li”).each(function(){…});

动画特效

三个基本特效.show()&.hide() 注：当一个元素被隐藏时，页面中的的其他元素会进行移动来填充它原有的位置。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>动画特效</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body>    <div id="text">我是谁？我在哪？我在干什么？</div>    <button id="show">点击隐藏</button>    <script>        $(function(){
                $("#show").on('click',function()

最低0.47元/天解锁文章

opo77_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery.each()循环及隐藏显示和淡入淡出特效

循环利用循环方法遍历匹配结果集中的所有元素。.each()方法两种用法1.获取结果集中每个元素的信息2.在每个选中元素上执行一系列操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫