Jquery学习笔记二——Jquery动画&事件绑定&遍历

本文链接：https://blog.csdn.net/m0_66947873/article/details/123317272

Jquery学习笔记二

1、动画

三种显示和隐藏元素的方式

1、默认显示和隐藏方式

1、show([speed],[easing]，[function 回调函数])

参数：
speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
easing：用来指定切换效果，默认是"swing"，可用参数"linear"
swing：动画执行时效果是先慢，中间快，最后又慢
linear：动画执行时速度是匀速的
fn：在动画完成时执行的函数，每个元素执行一次。

2、hide([speed],[easing]，[function 回调函数])

3、toggle([speed],[easing]，[function 回调函数])

<!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() {
            $("#showDiv").hide("slow","swing"); // 先慢 中间快 最后慢
        }
        function showFn() {
            $("#showDiv").show("slow","linear"); // 匀速
        }
        function toggleFn() {
            $("#showDiv").toggle("slow","linear")
        }

    </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>
</body>
</html>

2、滑动显示和隐藏方式

slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])

3、淡入淡出的显示和隐藏

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])

function hideFn() {
    // 1、默认隐藏
    // $("#showDiv").hide("slow","swing"); // 先慢 中间快 最后慢

    // 2、滑动隐藏
    // $("#showDiv").slideUp("slow","linear");

    // 3、淡出的隐藏
    $("#showDiv").fadeOut("slow","linear");

}
function showFn() {
    // 1、默认显示
    // $("#showDiv").show("slow","linear"); // 匀速

    // 2、滑动显示
    // $("#showDiv").slideDown("slow","linear");

    // 3、淡入
    $("#showDiv").fadeIn("slow","linear");

}
function toggleFn() {
    // 1、默认切换
    // $("#showDiv").toggle("slow","linear")

    // 2、滑动切换
    // $("#showDiv").slideToggle("slow","linear");

    // 3、淡出淡入的切换
    $("#showDiv").fadeToggle("slow","linear");v

}

2、遍历

1、js的遍历

for(初始化值；循环结束条件；步长)

2、jq的遍历方式

jq对象.each(callback)
语法：
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 容器对象)

<!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">
        $(function () {
           $("#city").each(function () {

               // 获取ul下的所有li
               var cities = $("#city li");


               /*// 1、 js的遍历方式
               for (let i = 0; i < cities.length; i++) {
                   // 获取内容
                   alert(i + ":" + cities[i].innerHTML);
               }*/

               // 2、jq的遍历方式 jq对象.each
               /*cities.each(function () {
                  // alert(this.innerHTML); // this是一个js对象
                   alert($(this).html());
               });*/

               // 2、jq的遍历方式 jq对象.each 在回调函数中定义参数 index表示索引 element表示元素
               // cities.each(function (index,element) {
               //     // alert(this.innerHTML); // this是一个js对象
               //     alert(index + ":" + element.innerHTML);
               // });

               // 3、jquery全局遍历 $.each(obj,callback)
                $.each(cities,function () {
                   alert(this.innerHTML);
                });

                // 4、for .. of
               for (li of cities){
                   alert($(li).html());
               }

           });
        });

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

3、事件绑定

jquery标准的绑定方式
jq对象.事件方法(回调函数)；
注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
表单对象.submit();//让表单提交

on绑定事件/off解除绑定
jq对象.on(“事件名称”,回调函数)
jq对象.off(“事件名称”)
如果off方法不传递任何参数，则将组件上的所有事件全部解绑

事件切换：toggle
jq对象.toggle(fn1,fn2…)
当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>