JQuery简单学习(5)——JQuery效果

最新推荐文章于 2022-09-03 10:39:40 发布
最新推荐文章于 2022-09-03 10:39:40 发布
阅读量278 收藏
点赞数
分类专栏： JQuery专栏 文章标签： jQuery Java CSS HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cengxiangshun/article/details/83948814
版权
jQuery 是为事件处理特别设计的。
————————————————————
jQuery 事件函数
隐藏、显示、切换、滑动 以及动画
实例
jQuery hide()
Js代码 
<html>  

<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("p").click(function(){  
  $(this).hide();  
  });  
});  
</script>  
</head>  

<body>  
<p>If you click on me, I will disappear.</p>  
</body>  

</html>


演示简单的 jQuery hide() 函数。

jQuery hide()
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
$(".ex .hide").click(function(){  
$(this).parents(".ex").hide("slow");  
});  
});  
</script>  
<style type="text/css">   
div.ex  
{  
background-color:#e5eecc;  
padding:7px;  
border:solid 1px #c3c3c3;  
}  
</style>  
</head>  

<body>  

<h3>Island Trading</h3>  
<div class="ex">  
<button class="hide" type="button">Hide me</button>  
<p>Contact: Helen Bennett<br />   
Garden House Crowther Way<br />  
London</p>  
</div>  

<h3>Paris Trading</h3>  
<div class="ex">  
<button class="hide" type="button">Hide me</button>  
<p>Contact: Marie Bertrand<br />   
265, Boulevard Charonne<br />  
Paris</p>  
</div>  

</body>  
</html>


另一个 hide() 演示。如何隐藏部分文本。

jQuery slideToggle()
Js代码 
<html>  
<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
$(".flip").click(function(){  
    $(".panel").slideToggle("slow");  
  });  
});  
</script>  

<style type="text/css">   
div.panel,p.flip  
{  
margin:0px;  
padding:5px;  
text-align:center;  
background:#e5eecc;  
border:solid 1px #c3c3c3;  
}  
div.panel  
{  
height:120px;  
display:none;  
}  
</style>  
</head>  

<body>  

<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  

<p class="flip">Show/Hide Panel</p>  

</body>  
</html>


演示简单的 slide panel 效果。

jQuery fadeTo()
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $("div").fadeTo("slow",0.25);  
  });  
});  
</script>  
</head>  

<body>  
<div id="test" style="background:yellow;width:300px;height:300px">  
<button type="button">Click to Fade</button>  
</div>  

</body>  

</html>


演示简单的 jQuery fadeTo() 函数。

jQuery animate()
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $("#start").click(function(){  
  $("#box").animate({height:300},"slow");  
  $("#box").animate({width:300},"slow");  
  $("#box").animate({height:100},"slow");  
  $("#box").animate({width:100},"slow");  
  });  
});  
</script>   
</head>  

<body>  

<p><a href="#" id="start">Start Animation</a></p>  

<div id="box"  
style="background:#98bf21;height:100px;width:100px;position:relative">  
</div>  

</body>  
</html>


演示简单的 jQuery animate() 函数。

————————————————————
jQuery 隐藏和显示
通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：

实例
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("#hide").click(function(){  
  $("p").hide();  
  });  
  $("#show").click(function(){  
  $("p").show();  
  });  
});  
</script>  
</head>  
<body>  
<p id="p1">If you click on the "Hide" button, I will disappear.</p>  
<button id="hide" type="button">Hide</button>  
<button id="show" type="button">Show</button>  
</body>  
</html>

hide() 和 show() 都可以设置两个可选参数：speed 和 callback。

语法：
Js代码
$(selector).hide(speed,callback)

$(selector).show(speed,callback)
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

speed 参数可以设置这些值："slow", "fast", "normal" 或 milliseconds：

实例
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $("p").hide(1000);  
  });  
});  
</script>  
</head>  
<body>  
<button type="button">Hide</button>  
<p>This is a paragraph with little content.</p>  
<p>This is another small paragraph.</p>  
</body>  
</html>

————————————————————
jQuery 切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

隐藏显示的元素，显示隐藏的元素。

语法：
Js代码 
$(selector).toggle(speed,callback)  
 speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。


实例
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $("p").toggle();  
  });  
});  
</script>  
</head>  
<body>  
<button type="button">Toggle</button>  
<p>This is a paragraph with little content.</p>  
<p>This is another small paragraph.</p>  
</body>  
</html>

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
————————————————————
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数：
Js代码 
$(selector).slideDown(speed,callback)  

$(selector).slideUp(speed,callback)  

$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例

Js代码 
<html>  
<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $(".flip").click(function(){  
    $(".panel").slideDown("slow");  
  });  
});  
</script>  

<style type="text/css">   
div.panel,p.flip  
{  
margin:0px;  
padding:5px;  
text-align:center;  
background:#e5eecc;  
border:solid 1px #c3c3c3;  
}  
div.panel  
{  
height:120px;  
display:none;  
}  
</style>  
</head>  

<body>  

<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  

<p class="flip">Show Panel</p>  

</body>  
</html>



slideUp() 实例
Js代码 
<html>  
<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $(".flip").click(function(){  
    $(".panel").slideUp("slow");  
  });  
});  
</script>  

<style type="text/css">   
div.panel,p.flip  
{  
margin:0px;  
padding:5px;  
text-align:center;  
background:#e5eecc;  
border:solid 1px #c3c3c3;  
}  
div.panel  
{  
height:120px;  
}  
</style>  
</head>  

<body>  

<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  

<p class="flip">Hide Panel</p>  

</body>  
</html>

slideToggle() 实例
Js代码 
<html>  
<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
$(".flip").click(function(){  
    $(".panel").slideToggle("slow");  
  });  
});  
</script>  

<style type="text/css">   
div.panel,p.flip  
{  
margin:0px;  
padding:5px;  
text-align:center;  
background:#e5eecc;  
border:solid 1px #c3c3c3;  
}  
div.panel  
{  
height:120px;  
display:none;  
}  
</style>  
</head>  

<body>  

<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  

<p class="flip">Show/Hide Panel</p>  

</body>  
</html>

————————————————————
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数：
Js代码 
$(selector).fadeIn(speed,callback)  

$(selector).fadeOut(speed,callback)  

$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。

fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

fadeTo() 实例
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $("div").fadeTo("slow",0.25);  
  });  
});  
</script>  
</head>  

<body>  
<div id="test" style="background:yellow;width:300px;height:300px">  
<button type="button">Click to Fade</button>  
</div>  

</body>  

</html>


fadeOut() 实例
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("#test").click(function(){  
  $(this).fadeOut(4000);  
  });  
});  
</script>  
</head>  

<body>  
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>  
<p>If you click on the box above, it will be removed.</p>  
</body>  

</html>

————————————————————
jQuery 自定义动画
jQuery 函数创建自定义动画的语法：
Js代码 
$(selector).animate({params},[duration],[easing],[callback])  
 关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：
Js代码  
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});  
 第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是："slow", "fast", "normal" 或 毫秒。


实例 1
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $("#start").click(function(){  
  $("#box").animate({height:300},"slow");  
  $("#box").animate({width:300},"slow");  
  $("#box").animate({height:100},"slow");  
  $("#box").animate({width:100},"slow");  
  });  
});  
</script>   
</head>  

<body>  

<p><a href="#" id="start">Start Animation</a></p>  

<div id="box"  
style="background:#98bf21;height:100px;width:100px;position:relative">  
</div>  

</body>  
</html>

实例 2
Js代码 
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $("#start").click(function(){  
  $("#box").animate({left:"100px"},"slow");  
  $("#box").animate({fontSize:"3em"},"slow");  
  });  
});  
</script>   
</head>  

<body>  

<p><a href="#" id="start">Start Animation</a></p>  

<div id="box"  
style="background:#98bf21;height:100px;width:200px;position:relative">  
HELLO  
</div>  

</body>  
</html>

HTML 元素默认是静态定位，且无法移动。
如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。

————————————————————

jQuery 效果 - 来自本页
函数 描述 $(selector).hide() 隐藏被选元素 $(selector).show() 显示被选元素 $(selector).toggle() 切换（在隐藏与显示之间）被选元素 $(selector).slideDown() 向下滑动（显示）被选元素 $(selector).slideUp() 向上滑动（隐藏）被选元素 $(selector).slideToggle() 对被选元素切换向上滑动和向下滑动 $(selector).fadeIn() 淡入被选元素 $(selector).fadeOut() 淡出被选元素 $(selector).fadeTo() 把被选元素淡出为给定的不透明度 $(selector).animate() 对被选元素执行自定义动画
cengxiangshun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery学习——jQuery效果
WLkkjm的博客
04-13 231
一、jQuery学习——jQuery效果 1.显示和隐藏效果：hide()和show() <1>hide()方法:是把指定元素隐藏; show()方法:是把指定元素显示出来. <2>效果练习：实现jquery动画效果隐藏与显示 ●代码如下： <!DOCTYPE html> <html lang="en"...
JQuery的简单学习
java_spring6的博客
04-29 109
document.addEventListener(‘DOMContentLoaded’, function() { //js代码 }); 他们的区别: window.load是在窗口加载事件，是文档所有内容（图像、js文件、css文件等）都加载完成后才触发。只能写一次，如果注册多个事件则会以最后注册的为准，后者覆盖前者。 document.addEventListener窗口加载事件，在DOM加载完成就会立刻触发，不包括样式图片动画等。 JQuery的方式则是可以写多个. [](()选择器 ![请添加
jQuery学习笔记（5）效果——淡入淡出
DTCloud
04-25 2161
文章目录jQuery fade方法fadeIn() 方法fadeOut() 方法fadeToggle() 方法fadeTo() 方法 jQuery fade方法 通过 jQuery中的几个fade方法，各位读者可以实现元素的淡入淡出效果。 jQuery中存在以下种4种 fade 方法： fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn() 方法 该方法用于淡入已经隐藏的元素。 基本语法： $(selector).fadeIn(speed,callback);
【JQuery】JQuery入门——JQuery 插件-validation
专注于Java领域开发 关注我 带你玩转Java
08-04 582
简述、导入、为指定表单加入校验、为校验加入规则、为规则自定义错误信息
用jQuery实现轮播图——超简单(代码解释)
热门推荐
weixin_48466991的博客
09-03 1万+
鼠标悬浮时停止轮播，离开时自动轮播，点下一张小圆点会随着动。这里只要把图片地址更换一下 ，引用jquery文件就可以了。// 控制图片显示隐藏,小圆点背景色。/* 5张图片叠加到一块 *//* 左右箭头 */
2014-11-15-深入理解jQuery（5）——Data1
08-04
深入理解jQuery之Data jQuery中的Data机制是为了解决在DOM节点上绑定数据时出现的一系列问题，如数据与展示混淆、DOM结构复杂化、属性值只能是字符串等问题。Data机制的出现解决了这些问题，并提供了一种高效、安全...
jquery写个checkbox——类似邮箱全选功能
12-10
最近在学习jquery，今天抽空用jquery 写个checkbox——类似邮箱全选功能。 代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title>checkbox</...
jQuery——学习笔记.md
08-01
jq语法
jQuery图片轮播插件——前端开发必看
11-24
在本文中，我们将深入探讨如何利用jQuery实现一个简单的图片轮播插件。 首先，HTML结构是轮播的基础。在这个示例中，`<div class="slider">` 是轮播容器，包含一个图片列表`<ul>`，每个`<li>`代表一张图片。同时，...
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
VisualSVN-VS2022
07-20
VisualSVN-VS2022-8.0.5.vsix SVNVS插件，使用VS自带更新速度太慢，可下载后直接安装即可
基于PSO优化的BP神经网络训练与测试matlab仿真，包括程序，注释，参考文献，操作步骤
07-20
1.版本：matlab2022A。 2.包含：程序，中文注释，参考文献，仿真操作步骤（使用windows media player播放）。 3.领域：PSO优化的BP神经网络 4.仿真效果：仿真效果可以参考博客同名文章《基于PSO优化的BP神经网络训练与测试matlab仿真》 5.内容：基于PSO优化的BP神经网络训练与测试matlab仿真。粒子群优化（Particle Swarm Optimization, PSO）结合BP（Backpropagation）神经网络是一种常见的优化方法，用于提升神经网络的学习能力和泛化能力。PSO不仅帮助BP神经网络找到了一个较好的初始解，从而可能加快了训练过程并提高了最终模型的质量，而且还能探索到更广泛的解空间，有助于避免局部最优解。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。
超详细讲C++cout语句
07-20
超详细讲C++cout语句，专门为C++初学者录制。
java基于ssm+jsp网络安全宣传网站系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
java基于ssm+jsp奶茶店管理系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
[课设项目]Java-SSM框架开发框架的安全教育平台+vue+MySQL+前后端分离毕业论文和源码.zip
07-20
本项目是一个基于Java-SSM框架开发的安全教育平台，采用前后端分离的设计理念，前端使用Vue框架，后端则采用SSM框架进行搭建。项目旨在提供一个全面、安全的教育平台，以满足计算机相关专业学生毕业设计的需求，同时也为Java学习者提供实战练习的机会。 资源包中包含了完整的项目源码、数据库脚本以及详细的开发说明，更有论文参考，助力开发者顺利完成项目并可作为毕设作品提交。项目已历经严格的调试过程，确保在JDK、IDEA和Tomcat的开发环境下能够稳定运行。 对于有一定Java基础的学习者而言，这个项目不仅提供了一个现成的实战案例，更可以在其基础上进行创新和改进，实现更多个性化功能，从而提升技术水平和解决实际问题的能力。无论是毕业设计还是日常学习，这都是一个极具价值的资源。请放心下载使用，相信它会为你带来不少帮助。
【独家首发】Matlab实现减法平均优化算法SABO优化Transformer-BiLSTM实现负荷数据回归预测.rar
07-20
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
03-数据类型转换.md
最新发布
07-20
03-数据类型转换
物联网工程_文物古迹保护遗址环境和安全远程监控系统.docx
07-20
物联网工程_文物古迹保护遗址环境和安全远程监控系统
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值