JQuery-学习笔记05【高级——JQuery动画和遍历】

Bertha 。 2022-10-30 11:19 134阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [JQuery-学习笔记01【基础——JQuery基础】][JQuery-_01_JQuery]——【day01】
> 2.  [JQuery-学习笔记02【基础——JQuery选择器】][JQuery-_02_JQuery]
> 3.  [JQuery-学习笔记03【基础——DOM操作】][JQuery-_03_DOM]
> 4.  [JQuery-学习笔记04【基础——JQuery基础案例】][JQuery-_04_JQuery]
> 5.  [JQuery-学习笔记05【][JQuery-_05][高级][JQuery-_05]——[JQuery动画和遍历】][JQuery-_05]——【day02】
> 6.  [JQuery-学习笔记06【高级——JQuery事件绑定和切换】][JQuery-_06_JQuery]
> 7.  [JQuery-学习笔记07【高级——JQuery高级案例】][JQuery-_07_JQuery]

**目录**

第4节 JQuery动画和遍历

今日内容

JQuery\_动画1

JQuery\_动画2

JQuery\_遍历1\_for循环

JQuery\_遍历2\_each方法

JQuery\_遍历3\_全局each&for...of

--------------------

# 第4节 JQuery动画和遍历 #

## 今日内容 ##

> 1. JQuery 高级  
>     1. 动画  
>     2. 遍历  
>     3. 事件绑定  
>     4. 案例  
>     5. 插件

## JQuery\_动画1 ##

> **JQuery 高级**  
> 1. 动画  
>     1. 三种方式显示和隐藏元素  
>         1. 默认显示和隐藏方式  
>             1. show(\[speed,\[easing\],\[fn\]\])  
>                 1. 参数：  
>                     1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)  
>                     2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"  
>                         \* swing：动画执行时效果是 先慢，中间快，最后又慢  
>                         \* linear：动画执行时速度是匀速的  
>                     3. fn：在动画完成时执行的函数，每个元素执行一次。  
>             2. hide(\[speed,\[easing\],\[fn\]\])  
>             3. toggle(\[speed\],\[easing\],\[fn\])  
>         2. 滑动显示和隐藏方式  
>             1. slideDown(\[speed\],\[easing\],\[fn\])  
>             2. slideUp(\[speed,\[easing\],\[fn\]\])  
>             3. slideToggle(\[speed\],\[easing\],\[fn\])  
>         3. 淡入淡出显示和隐藏方式  
>             1. fadeIn(\[speed\],\[easing\],\[fn\])  
>             2. fadeOut(\[speed\],\[easing\],\[fn\])  
>             3. fadeToggle(\[speed,\[easing\],\[fn\]\])  
> 2. 遍历  
> 3. 事件绑定  
> 4. 案例  
> 5. 插件

> ![2021021910102958.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
        <script>
            function hideFn() { // 隐藏div
                $("#showDiv").hide("slow", "swing", function () {
                    alert("隐藏了...")
                });
                $("#showDiv").hide(5000, "swing"); // 默认方式
                $("#showDiv").hide("slow", "swing");
                $("#showDiv").hide("fast", "swing");
            }
            function showFn() { // 显示div
                $("#showDiv").show("slow", "swing", function () {
                    alert("显示了...")
                });
                $("#showDiv").show(5000, "linear"); // 默认方式
            }
            function toggleFn() { // 切换显示和隐藏div
                $("#showDiv").toggle("slow"); // 默认方式
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
        <input type="button" value="点击按钮显示div" onclick="showFn()">
        <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
        <div id="showDiv" style="width:300px;height:300px;background:pink">
            div显示和隐藏
        </div>
    </body>
    </html>

## JQuery\_动画2 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Insert title here</title>
    	<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    	<script>
    		function hideFn() { // 隐藏div
    			$("#showDiv").slideUp("slow"); // 滑动方式
    			// $("#showDiv").fadeOut("slow"); // 淡入淡出方式
    		}
    		function showFn() { // 显示div
    			$("#showDiv").slideDown("slow"); // 滑动方式
    			// $("#showDiv").fadeIn("slow"); // 淡入淡出方式
    		}
    		function toggleFn() { // 切换显示和隐藏div
    			$("#showDiv").slideToggle("slow"); // 滑动方式
    			// $("#showDiv").fadeToggle("slow"); // 淡入淡出方式
    		}
    	</script>
    </head>
    <body>
    	<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    	<input type="button" value="点击按钮显示div" onclick="showFn()">
    	<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
    	<div id="showDiv" style="width:300px;height:300px;background:pink">
    		div显示和隐藏
    	</div>
    </body>
    </html>

## JQuery\_遍历1\_for循环 ##

> **遍历**  
>     1. js的遍历方式  
>         \* for(初始化值;循环结束条件;步长)  
>     2. jq的遍历方式  
>         1. jq对象.each(callback)  
>         2. $.each(object, \[callback\])  
>         3. for..of:jquery 3.0 版本之后提供的方式

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

## JQuery\_遍历2\_each方法 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

## JQuery\_遍历3\_全局each&for...of ##

> **JQuery 高级**  
> 1. 动画  
> 2. 遍历  
>     1. js的遍历方式  
>         \* for(初始化值;循环结束条件;步长)  
>     2. jq的遍历方式  
>         1. jq对象.each(callback)  
>             1. 语法：  
>                 jquery对象.each(function(index,element)\{\});  
>                     \* index:就是元素在集合中的索引  
>                     \* element：就是集合中的每一个元素对象  
>                     \* this：集合中的每一个元素对象  
>             2. 回调函数返回值：  
>                 \* true:如果当前function返回为false，则结束循环(break)。  
>                 \* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)  
>         2. $.each(object, \[callback\])  
>         3. for..of: jquery 3.0 版本之后提供的方式  
>             for(元素对象 of 容器对象)  
> 3. 事件绑定  
> 4. 案例  
> 5. 插件

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			/**
    				遍历
    					1. js的遍历方式
    						* for(初始化值;循环结束条件;步长)
    					2. jq的遍历方式
    						1. jq对象.each(callback)
    						2. $.each(object, [callback])
    						3. for..of:jquery 3.0 版本之后提供的方式
    			 */
    			$(function() {
    				//1.获取所有的ul下的li
    				var citys = $("#city li");
    				//2.遍历li
    				for (var i = 0; i < citys.length; i++) {
    					if ("上海" == citys[i].innerHTML) {
    						//break; 结束循环
    						//continue; //结束本次循环，继续下次循环
    					}
    					//获取内容
    					// alert(i + "：" + citys[i].innerHTML);
    					console.log(i + "：" + citys[i].innerHTML);
    				}
    
    				//2. jq对象.each(callback)
    				citys.each(function(index, element) {
    					//3.1 获取li对象 第一种方式 this
    					//alert(this.innerHTML);
    					//alert($(this).html());
    					//3.2 获取li对象 第二种方式 在回调函数中定义参数,index（索引）,element（元素对象）
    					//alert(index+":"+element.innerHTML);
    					//alert(index+":"+$(element).html());
    					//判断如果是上海，则结束循环
    					if ("上海" == $(element).html()) {
    						//如果当前function返回为false，则结束循环(break)。
    						//如果当前function返回为true ，则结束本次循环，继续下次循环(continue)
    						return true;
    					}
    					// alert(index + ":" + $(element).html());
    				});
    
    				//3 $.each(object, [callback])
    				$.each(citys, function() {
    					// alert($(this).html());
    				});
    
    				//4. for ... of:jquery 3.0 版本之后提供的方式
    				for (li of citys) {
    					// alert($(li).html());
    				}
    			});
    		</script>
    	</head>
    	<body>
    		<ul id="city">
    			<li>北京</li>
    			<li>上海</li>
    			<li>天津</li>
    			<li>重庆</li>
    		</ul>
    	</body>
    </html>

> 我们就观察天地自然也是这样的，事物一定要刚刚开始萌发，还没到极点的时候，这是最好的状态。一旦到了极点之后，就开始衰弱。所以我们看人生也是这样的，就是永远处于一种上升的状态，把心态归零，永远处于一种少火生气的状态，每天都在努力。每天都意识到自己的不足，意识到自己的缺陷，每天都要反省。—— 微信公众号：pengxinboshi（彭鑫博士）

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[JQuery-_01_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113846421
[JQuery-_02_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113850915
[JQuery-_03_DOM]: https://blog.csdn.net/weixin_44949135/article/details/113852198
[JQuery-_04_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113857383
[JQuery-_05]: https://blog.csdn.net/weixin_44949135/article/details/113857980
[JQuery-_06_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113860817
[JQuery-_07_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113861878
[2021021910102958.png]: /images/20221024/f8ca66e32c734bc6b95039a254ddb81d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/7f4011d43a0442a3abfad56a7cd077b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/34a537e2bc8747b4ab7d9840221747fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/4d4f1e9522cb456b9aac0538c1856825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/473cf5a4e2ba4afdb24ac178a8c947f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/5b825cf61803408989c61483308e5335.png