《Day05》jQuery进阶【一篇让你会制作网页特效】以及表单验证插件validation的使用

最新推荐文章于 2024-08-04 16:33:59 发布

阿福真的不想掉头发

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量204

点赞数

分类专栏： Javaweb 文章标签： javascript html jquery js 列表

本文链接：https://blog.csdn.net/HZMMC/article/details/110310821

版权

一、jQuery特效

jQuery特效就是对页面中的元素的显示和隐藏做了一些特殊的动画效果。将js的代码进行了封装，形成函数，直接调用。

1、普通显示和隐藏

1、show(speed,callback) 显示元素

参数1：speed，表示速度，可以取以下值：“slow”、“fast” 或毫秒。

参数2：回调函数，在隐藏的同时可以做其他功能

//图片显示
$("#img").show("fast",function(){
   
    $(this).css("width","300px");
    $(this).css("height","300px");
});

2、hide(speed,callback) 隐藏元素

参数1：speed，表示速度，可以取以下值：“slow”、“fast” 或毫秒。

参数2：回调函数，在隐藏的同时可以做其他功能

 $("#btn2").click(function(){
   
     //图片隐藏
     $("#img").hide(2000);
 }) ;

3、toggle(speed,callback) 实现show()和 hide()之间的切换，如果元素是显示状态则隐藏，如果元素是隐藏状态则显示。

参数同上

 $("#btn3").click(function(){
   
     //图片显示隐藏
     $("#img").toggle(2000);
 }) ;

2、淡入淡出

1、fadeIn(speed,callback) 淡入等价于show()

 $("#btn").click(function(){
   
     //图片淡入
     $("#img").fadeIn(5000);
 }) ;

2、fadeOut(speed,callback) 淡出等价于hide()

 $("#btn2").click(function(){
   
     //图片淡出
     $("#img").fadeOut(5000);
 }) ;

3、fadeToggle(speed,callback) 实现了fadeIn()和fadeOut()之间切换

$("#btn3").click(function(){
   
    //图片淡入淡出
    $("#img").fadeToggle(2000);
}) ;

3、滑动效果

1、slideDown(speed,callback) 向下滑动等价于show()

 $("#btn").click(function(){
   
     //图片滑入
     $("#img").slideDown(3000);
 }) ;

2、slideUp(speed,callback) 向上滑动等价于hide()

 $("#btn2").click(function(){
   
     //图片滑出
     $("#img").slideUp(3000);
 }) ;

3、slideToggle(speed,callback) 实现了slideDown()和slideUp()之间的切换

 $("#btn3").click(function(){
   
     //图片滑入滑出
     $("#img").slideToggle(3000);
 }) ;

综合案例：

需求：页面加载后延迟3s在网页的右下角显示（滑动效果）一张广告图片，当鼠标双击该广告图片时，将广告隐藏（滑动效果）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			img{
   
				position: absolute;
				left: 1200px;
				top: 400px;
				height: 300px;
				width: 300px;
				display: none;
			}
		</style>
	</head>
	<body>
		 <img id="img" src="img/1.jpg" >
	</body>
</html>
<script type="text/javascript">
	$(function(){
   
		window.setTimeout(function(){
   
			$("#img").slideDown(3000);
		},3000);
		//双击隐藏
		$("#img").dblclick(function(){
   
			$(this).slideUp(3000);
		});
	});
	
</script>

二、jQuery操作CSS样式

1、 css(“样式属性名”,”值”)；操作一个样式

 $("#div").css("width","300px");
 $("#div").css("height","300px");
 $("#div").css("border","1px solid");

css({“样式属性名1”:”值1”,”样式属性名2”:”值2”,…})；操作多个样式

$("#div").css({
   "width":"300px","height":"300px","border":"1px solid"});

2、添加和移除类样式

addClass(“类样式名类样式名”):添加类样式

//添加样式  addClass
$("#btn2").click(function(){
   
    //移除样式
    $("#div").removeClass("div");

});

removeClass(“类样式名类样式名”)：移除类样式 removeClass()

 $("#btn3").click(function(){
   
     //添加样式
     $("#div").addClass("div");

 });

3、toggleClass() 实现addClass()和removeClass()两个方法的切换。如果当前添加了指定的类样式，则移除，如果移除了则添加。

$("#btn4").click(function()

最低0.47元/天解锁文章

阿福真的不想掉头发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
《Day05》jQuery进阶【一篇让你会制作网页特效】以及表单验证插件validation的使用

一、jQuery特效jQuery特效就是对页面中的元素的显示和隐藏做了一些特殊的动画效果。将js的代码进行了封装，形成函数，直接调用。1、普通显示和隐藏1、show(speed,callback) 显示元素参数1：speed，表示速度，可以取以下值：“slow”、“fast” 或毫秒。参数2：回调函数，在隐藏的同时可以做其他功能//图片显示$("#img").show("fast",function(){ $(this).css("width","300px"); $(this
复制链接

扫一扫