jQuery的动画，遍历，和事件绑定

最新推荐文章于 2022-05-14 18:09:42 发布

Amy_Chen_White

最新推荐文章于 2022-05-14 18:09:42 发布

阅读量128

点赞数

文章标签： jquery动画 jquery遍历 jquery事件绑定 jquery事件

本文链接：https://blog.csdn.net/weixin_43758938/article/details/102376117

版权

jQuery动画

1.三种方式的显示和隐藏
1.1 show(speed,easing,fn) 显示
speed表示的是动画速度，他的属性值slow，normal，fast或者毫秒值
easing，表示的是切换效果，他的属性值有swing（先慢再快再慢），linear（匀速）
fn，表示的是回调函数，当动画执行完成后调用，每个元素执行一次
1.2 hide(speed,easing,fn) 隐藏
1.1 toggle(speed,easing,fn) 切换
toggle就是在一个按钮里面进行显示和隐藏的来回切换
2.滑动显示和隐藏
2.1 slideDown(speed,easing,fn)滑动显示
2.2 slideUp(speed,easing,fn)滑动隐藏
2.1 slideToggle(speed,easing,fn)滑动切换
3.淡入淡出显示和隐藏
2.1 fadeIn(speed,easing,fn)淡入显示
2.2 fadeOut(speed,easing,fn)淡入隐藏
2.1 fadeToggle(speed,easing,fn)淡入切换

二，jQuery遍历

在js中我们是使用for循环进行遍历其语法是：

for(初始化值;循环结束条件;步长){
      //循环体
}

在jquery中我们的循环是什么样的呢？
第一种方法：语法：jq对象.each(callback)
回调函数的返回值：function返回false，结束循环相当于js中的break
function返回true 结束本次循环，继续下次循环，相当于continue

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	//注意：如果要用代码，一定要改这里jquery引入的路径
	<script type="text/javascript" src="jquery-2.1.0.js"></script>
	<script type="text/javascript">
		$(function() {
			var cities = $("#city li");
			cities.each(function() {
				alert($(this).html())
			})
		})

	</script>
</head>
<body>
	<ul id="city">
		<li>北京</li>
		<li>上海</li>
		<li>天津</li>
		<li>重庆</li>
	</ul>
</body>
</html>

第二种方法：$.each(obj,callback)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	//注意：如果要用代码，一定要改这里jquery引入的路径
	<script type="text/javascript" src="jquery-2.1.0.js"></script>
	<script type="text/javascript">
		$(function() {
			var cities = $("#city li");
			$.each(cities,function() {
				alert($(this).html())
			})
		})

	</script>
</head>
<body>
	<ul id="city">
		<li>北京</li>
		<li>上海</li>
		<li>天津</li>
		<li>重庆</li>
	</ul>
</body>
</html>

第三种方法：for(…(数组里的元素) of …(需要遍历的对象))

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	//注意：如果要用代码，一定要改这里jquery引入的路径
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	//注意要在3.0版本以上使用
	<script type="text/javascript">
		$(function() {
			var cities = $("#city li");
			for (li of cities) {
				alert($(this).html())
			}
		})

	</script>
</head>
<body>
	<ul id="city">
		<li>北京</li>
		<li>上海</li>
		<li>天津</li>
		<li>重庆</li>
	</ul>
</body>
</html>

jQuery中的事件绑定

jq对象.事件方法(回调函数)
当回调函数为空的时候，会触发浏览器默认行为
on绑定事件/off解除绑定
jq对象.on(“事件名称”,“回调函数”)
jq对象.off(“事件名称") 如果不写事件名称，那么就会解除所有的事件
jq对象.toggle(fn1，fn2，…) 依次执行（可循环）参数函数
从1.9版本之后，jq不在支持toggle 所以要用migrate(迁移)插件回复此功能

下面是jQuery的一些事件方法：
在这里插入图片描述

Amy_Chen_White

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的动画，遍历，和事件绑定

jQuery动画1.三种方式的显示和隐藏1.1 show(speed,easing,fn) 显示speed表示的是动画速度，他的属性值slow，normal，fast或者毫秒值easing，表示的是切换效果，他的属性值有swing（先慢再快再慢），linear（匀速）fn，表示的是回调函数，当动画执行完成后调用，每个元素执行一次1.2 hide(speed,easing,fn) 隐藏...
复制链接

扫一扫