jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（二）

1.隐藏和显示

hide() 和 show() 方法

隐藏和显示 HTML 元素

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
	</script>
</head>
<body>
	<p>如果你點擊“藏起來”按鈕，我就會消失。再點“出現了”就會出現，試試吧！</p>
	<button id="hide">藏起來</button>
	<button id="show">出現了</button>
	
	
</body>
</html>

在这里插入图片描述

可选的 speed 参数规定隐藏/显示的速度

可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<script >
		$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide(1000);
  });
  $("#show").click(function(){
    $("p").show(1000);
  });
});
	</script>

使用回調函數

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
div{
	width:130px;
	height: 50px;
	padding: 15px;
	margin: 15px;
	background-color: #FFB6C1;
}
 </style>
	<script >
		$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
	</script>
</head>
<body>
	<div>隐藏以及设置回调函数</div>
	<button class="hidebtn">点击隐藏</button>
	
	
</body>
</html>

在这里插入图片描述

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>

<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>

在这里插入图片描述

可选的 callback 参数说明

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；
当 callback 函数加上括号时，函数立即执行，只会调用一次，如果不加括号，元素显示或隐藏后调用函数，才会调用多次。

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

3.callback既可以是函数名，也可以是匿名函数；

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000, "linear", add());
      
  });
});
    
function  add() {
    alert("Hide() 方法已完成!");
}

add()加上括号 add是执行函数,直接执行
若是 add 那么则可以理解为把add当作参数,由click函数调用add函数
只需要记住有括号就先执行括号里面的,就跟我们数学基础运算一样

2.淡入淡出

注意大小写

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(6000);
  });
});
</script>

<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:#FFB6C1;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:#FF00FF;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:#800080;"></div>

在这里插入图片描述

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>

<body>
<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>

在这里插入图片描述

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});

在这里插入图片描述

jQuery fadeTo()

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。
fadeTo() 没有默认参数，必须加上 slow/fast/Time

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

在这里插入图片描述

3.滑动方法

slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#FFB6C1;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

</html>

在这里插入图片描述

slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素

$(document).ready(function(){
  $("#flip").click(function(){

 - List item

    $("#panel").slideUp("slow");
  });
});

slideToggle() 方法

在 slideDown() 与 slideUp() 方法之间进行切换

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

4.动画

animate() 方法

animate() 方法用于创建自定义动画
$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script>
 
</head>
<body>
	<button>开始动画</button>
 <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</html>

在这里插入图片描述

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
开始动画

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});

在这里插入图片描述

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});

animate() - 使用队列功能

$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});

在这里插入图片描述

$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});

在这里插入图片描述
jquery中有一个Queue队列的接口，这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的，Queue队列如同data数据缓存与Deferred异步模型一样，都是jQuery库的内部实现的基础设施
Queue队列

队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。

5.停止动画

stop() 方法

stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

stop() 会清除在被选元素上指定的当前动画。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

在这里插入图片描述

6.Callback 方法

Callback 函数在当前动画 100% 完成之后执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落现在被隐藏了");
    });
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>我们段落内容，点击“隐藏”按钮我就会消失</p>
</body>
</html>

在这里插入图片描述
没有回调函数，警告框会在隐藏效果完成前弹出

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("现在段落被隐藏了");
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是一个段落，内容很少</p>
</body>
</html>

在这里插入图片描述

7.方法链接

在相同的元素上运行多条 jQuery 命令，一条接着另一条
浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);