day21_JQuery高级

程序员文章站 2024-03-25 13:22:10

...

今日内容：

JQuery 高级

动画

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]])

<!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>
            // 隐藏div
            function hideFn() {
                $("#showDiv").hide("slow", "swing", function () {
                   // alert("隐藏了");
                });
            };

            // 显示div
            function showFn() {
                $("#showDiv").show("slow", "swing", function () {
                    // alert("显示了");
                });
            }

            // 切换div
            function toggleFn() {
                $("#showDiv").toggle("slow", "swing", function () {
                    // alert("切换了");
                });
            }
        </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>

遍历

js遍历的方式
- for(初始化值;循环结束条件;步长)

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 容器对象)

<!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 () {
                // 获取所有的ul下的li
                var citys = $("#city li");

                // // 2. js中遍历li
                // for (var i = 0; i < citys.length; i++) {
                //     // 获取内容
                //     alert(i + ": " + citys[i].innerHTML);
                // }

                // 3.JQ中的遍历方式
                citys.each(function (index, element) {
                    // // 3.1 获取li对象 第一种方式
                    // alert(this.innerHTML);

                    // 3.2获取li的第二种方式 在回调函数中定义参数
                    alert(index + "：" + element.innerHTML);
                });
            });
        </script>
    </head>

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

事件绑定
1. jquery标准的绑定方式：
  - jq对象.事件方法(回调函数);
2. on绑定事件/off解除绑定
  - jq对象.on(“事件名称”,“回调函数”)
  - jq对象.off(“事件名称”,“回调函数”)
3. 事件切换：toggle(已经变成消失，出现功能的函数)
  - jq对象.toggle(fn1,fn2…);
    1. 当点击jq对象对应的组件后，会执行fn1，第二次点击会执行fn2
    2. 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>广告的自动显示与隐藏</title>
        <style>
            #content {
                width: 100%;
                height: 500px;
                background: #999
            }
        </style>

        <!--引入jquery-->
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
        <script>
            /*
                1. 当页面加载完，3s后，自动显示广告
                2. 5s后，广告自动消失
             */
            $(function () {
                // 定义一个定时器，调用show方法
                setTimeout(show, 3000);
                setTimeout(hide, 8000);
            });

             // 显示广告
            function show(){
                $("#ad").show("slow");
            }

             // 广告消失
            function hide(){
                $("#ad").hide("slow");
            }
        </script>
    </head>
    <body>
        <!-- 整体的DIV -->
        <div>
            <!-- 广告DIV -->
            <div id="ad" style="display: none;">
                <img style="width:100%" src="../img/adv.jpg"/>
            </div>

            <!-- 下方正文部分 -->
            <div id="content">
                正文部分
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery案例之抽奖</title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

        <script>
            var imgs = ["../img/man00.jpg",
                "../img/man01.jpg",
                "../img/man02.jpg",
                "../img/man03.jpg",
                "../img/man04.jpg",
                "../img/man05.jpg",
                "../img/man06.jpg"];

            var startId;//开始定时器的id
            var index;//随机角标

            $(function () {
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled", false);
                $("#stopID").prop("disabled", true);


                //1. 给开始按钮绑定单击事件
                $("#startID").click(function () {
                    // 1.1 定义循环定时器 20毫秒执行一次
                    startId = setInterval(function () {
                        //处理按钮是否可以使用的效果
                        $("#startID").prop("disabled", true);
                        $("#stopID").prop("disabled", false);


                        //1.2生成随机角标 0-6
                        index = Math.round(Math.random() 6);//0.000--0.999 --> 7 --> 0.0-----6.9999
                        console.log(index);     // 打印随机数，用于测试
                        //1.3设置小相框的src属性
                        $("#img1ID").prop("src", imgs[index]);
                    }, 20);
                });


                //2. 给结束按钮绑定单击事件
                $("#stopID").click(function () {
                    //处理按钮是否可以使用的效果
                    $("#startID").prop("disabled", false);
                    $("#stopID").prop("disabled", true);


                    // 1.1 停止定时器
                    clearInterval(startId);
                    // 1.2 给大相框设置src属性，并且先隐藏起来，在下面再进行动画的显示
                    $("#img2ID").prop("src", imgs[index]).hide();
                    //显示1秒之后
                    $("#img2ID").show(1000);
                });
            });
        </script>

    </head>
    <body>

        <!-- 小像框 -->
        <div style="border-style:dotted;width:160px;height:100px">
            <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
        </div>

        <!-- 大像框 -->
        <div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
            <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
        </div>

        <!-- 开始按钮 -->
        <input
                id="startID"
                type="button"
                value="点击开始"
                style="width:150px;height:150px;font-size:22px"/>

        <!-- 停止按钮 -->
        <input
                id="stopID"
                type="button"
                value="点击停止"
                style="width:150px;height:150px;font-size:22px"/>


        <script language='javascript' type='text/javascript'>
            //准备一个一维数组，装用户的像片路径
            var imgs = [
                "../img/man00.jpg",
                "../img/man01.jpg",
                "../img/man02.jpg",
                "../img/man03.jpg",
                "../img/man04.jpg",
                "../img/man05.jpg",
                "../img/man06.jpg"
            ];

        </script>
    </body>
</html>

插件：增强JQ的功能

实现方式

$.fn.extend(object)
增强通过Jquery获取的对象的功能 $("#id")
$.extend(object)
增强JQeury对象自身的功能 $/jQuery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>01-jQuery对象进行方法扩展</title>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 使用插件，实现选中和取消选中所有复选框的功能

            // 1.定义JQ的插件
            $.fn.extend({
                // 定义了check()方法，所有的JQ都可以调用该方法
                check: function () {
                    // 让复选框选中
                    this.prop("checked", true);
                },

                uncheck: function () {
                    // 让复选框不选中
                    this.prop("checked", false);
                }
            });


            $(function () {
                // 点击第一个按钮，选中三个复选框
                $("#btn-check").click(function () {
                    // 获取复选框对象
                    $("input[type=\"checkbox\"]").check();
                });

                // 点击第二个按钮，取消选中三个复选框
                $("#btn-uncheck").click(function () {
                    // 获取复选框对象
                    $("input[type=\"checkbox\"]").uncheck();
                });
            });
        </script>
    </head>


    <body>
        <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
        <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
        <br/>
        <input type="checkbox" value="football">足球
        <input type="checkbox" value="basketball">篮球
        <input type="checkbox" value="volleyball">排球

    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>01-jQuery对象进行方法扩展</title>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
            $.extend({
                max: function (a, b) {
                    // 返回两数中的较大值
                    return a >= b ? a : b;
                },
                min: function (a, b) {
                    // 返回两数中的较大值
                    return a <= b ? a : b;
                }
            });

            // 调用全局方法
            alert("最大值是：" + $.max(2,3));
            alert("最小值是：" + $.min(2,3));
        </script>
    </head>


    <body>

    </body>
</html>

相关标签： JavaEE笔记 JQuery js 动画插件

上一篇： velocityJs-动画库

下一篇： animate.css的使用

day21_JQuery高级

今日内容：

day21_JQuery高级

高级之路篇十：高性能动画

正确理解ThreadLocal 博客分类： Java 高级 ThreadLocaljava

oracle自定义函数博客分类： oracle oracle高级编程

SwiftUI 2.0 OutlineGroup 高级使用教程含源码

55. 高级文本编辑器 - Vim 的编辑模式

Android WebView使用常见问题以及解决方案（高级）

Android高级进阶01-ConstraintLayout

SwiftUI 动画之 animatableData和VectorArithmeti高级使用

Android高级UI之绘制流程分析

day21_JQuery高级

今日内容：

day21_JQuery高级

高级之路篇十：高性能动画

正确理解ThreadLocal 博客分类： Java 高级 ThreadLocaljava

oracle自定义函数 博客分类： oracle oracle高级编程

SwiftUI 2.0 OutlineGroup 高级使用教程含源码

55. 高级文本编辑器 - Vim 的编辑模式

Android WebView使用常见问题以及解决方案（高级）

Android高级进阶01-ConstraintLayout

SwiftUI 动画之 animatableData和VectorArithmeti高级使用

Android高级UI之绘制流程分析

oracle自定义函数博客分类： oracle oracle高级编程