`JQuery`高级

最新推荐文章于 2024-07-20 10:36:53 发布

昱晟168

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量74

点赞数

分类专栏： javaweb 文章标签： jquery javascript 动画

本文链接：https://blog.csdn.net/weixin_47267628/article/details/124615455

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

`JQuery`高级

动画

三种方式显示和隐藏元素

默认显示和隐藏方式

show(spedd,easing,fnu);显示

hide(spedd,easing,fun);隐藏

toggle(spedd,easing,fun);切换

滑动显示和隐藏方式

slideDown([speed],[easing],[fn]);滑动显示 

slideUp([speed,[easing],[fn]]);隐藏显示

slideToggle([speed],[easing],[fn]);切换显示

淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn]);淡出显示

fadeOut([speed],[easing],[fn]);淡入隐藏

fadeToggle([speed,[easing],[fn]]);切换显示

上述的九个方法的参数都是相同的

speed:动画速度，三个预定义的值("slow","normal", "fast")或者用毫秒数值表示动画(如：1000)【就是第一个参数可以传入预定值或毫秒值】

easing:用来指定切换效果，默认是：`swing`，可用参数`linear`，`swing`动画执行时效果是慢快慢，`linear`匀速

fn:在动画完成执行的函数，只执行一次

上述的第二个参数和第三个参数可以省略

案例：

滑动显示隐藏，淡入淡出显示隐藏和默认的使用一样

<script>
        // 隐藏
        function hideFn() {
            $("#showDiv").hide("slow","swing",function () {// 这三个参数，后面两个可以省略，第一个可以传入毫秒值
                alert("隐藏");
            });
        }

        // 显示
        function showFn() {
            $("#showDiv").show(5000,"swing");// swing是默认值
        }

        // 切换
        function toggleFn() {
            $("#showDiv").toggle(3000);//表示显示变隐藏，隐藏变显示
        }
</script>

遍历

`Javascript`方式遍历

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

$(function () {
            // Javascript方式
           var $citys = $("#city>li");
            for (let i = 0; i < $citys.length; i++) {
                // 当是上海时，跳转循环
                if ("上海"==element.innerHTML){
                    break;
                }
                // 当是上海时，跳转本次循环
                if ("上海"==element.innerHTML){
                    continue;
                }            
                var innerHTML = $citys[i].innerHTML;
                alert(i+":"+innerHTML);
            }
        });

`Jquery`方式遍历

方式一：`each`

方式一：
Jquery对象.each(function (){});
语法：
Jquery对象.each(function (){});
或
jquery对象.each(function(index,element){});
	index:就是元素在集合中的索引 
	element:就是集合中的每一个元素
	this:集合中的每一个元素对象
	
回调函数返回值：由于`each`不能使用`break`和`continue`来跳转循环和跳转本次循环，只能使用`return false或true`的方式跳转循环和跳转本次循环
	true:如果当前function返回false，则结束循环`(break)`
	false:如果当前function返回true，则结束本次循环，继续下次循环`(continue)`

由于each不能使用break和continue来跳转循环和跳转本次循环，只能使用return false或true的方式跳转循环和跳转本次循环,但是在Javascript中可以使用break和continue方式

// Jquery方式中的each方法
            //获取city中的li对象，
            var $city = $("#city>li");
            $city.each(function () {
                // 获取的this就是每个li，注意是这样获取的this是一个Javascript对象
                alert(this.innerHTML);
                // 将其转成Jquery对象
                alert($(this).html());
            });
            //由于上述的方式中，不能获取到索引，在回调函数传入索引和元素
            $("#city>li").each(function (index,element) {
                // 获取到的是一个Javascript对象
                alert(index+" : "+element.innerHTML);
                // 将其转成Jquery对象
                alert(index+" : "+$(element).html());
            });

            // 由于each方式不能使用`break`和`continue`跳转循环和跳转本次循环
            $("#city>li").each(function (index,element) {
                // 当是上海时，跳转循环
                if ("上海"==element.innerHTML){
                    return false;
                }
                // 当是上海时，跳转本次循环
                if ("上海"==element.innerHTML){
                    return true;
                }
                alert(index+" : "+element.innerHTML);
            })

方式二：`$.each(object,function(){})`

// 方式二：`$.each(object,function(){})`，使用和方式相似
            $.each($("#city>li"),function () {
                alert(this.innerHTML);
            });

方式三：`for(类型 of 集合){}`

// 方式三：for(类型 of 集合)：和增强for一样，一定在Jquery在3.0后才能使用
            for(li of $("#city>li")){
                alert(li.innerHTML);
            }

遍历案例：

<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 () {
            // Javascript方式
           var $citys = $("#city>li");
            for (let i = 0; i < $citys.length; i++) {
                var innerHTML = $citys[i].innerHTML;
                alert(i+":"+innerHTML);
            }

            // Jquery方式中的each方法
            // 获取city中的li对象，
            var $city = $("#city>li");
            $city.each(function () {
                // 获取的this就是每个li，注意是这样获取的this是一个Javascript对象
                alert(this.innerHTML);
                // 将其转成Jquery对象
                alert($(this).html());
            });
            //由于上述的方式中，不能获取到索引，在回调函数传入索引和元素
            $("#city>li").each(function (index,element) {
                // 获取到的是一个Javascript对象
                alert(index+" : "+element.innerHTML);
                // 将其转成Jquery对象
                alert(index+" : "+$(element).html());
            });
            
            // 由于each方式不能使用`break`和`continue`跳转循环和跳转本次循环
            $("#city>li").each(function (index,element) {
                // 当是上海时，跳转循环
                if ("上海"==element.innerHTML){
                    return false;
                }
                // 当是上海时，跳转本次循环
                if ("上海"==element.innerHTML){
                    return true;
                }
                alert(index+" : "+element.innerHTML);
            })

            // 方式二：`$.each(object,function(){})`，使用和方式相似
            $.each($("#city>li"),function () {
                alert(this.innerHTML);
            });
            // 方式三：for(类型 of 集合)：和增强for一样，一定在Jquery在3.0后才能使用
            for(li of $("#city>li")){
                alert(li.innerHTML);
            }
        });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>

事件绑定

`Jquery`标准绑定方式

<script type="text/javascript">
        $(function () {
            $("#name").click(function () {
                alert("绑定事件");
            });

            // Jquery中支持绑定多个事件
            $("#name").mouseover(function () {
                alert("鼠标来了")
            })

            $("#name").mouseout(function () {
                alert("鼠标去了")
            })
        })
    </script>

`on`绑定事件/`off`解除绑定事件

绑定事件

// 使用`on`绑定事件
$("#btn").on("click",function () {
      alert("我被点了");
});

解除绑定事件

$("#btn").off("click");//传入解除事件名称
注意是：当不传入事件名称时，默认将组件上的所有事件都解除

案例：

<script type="text/javascript">
        $(function () {
            // 使用`on`绑定事件
            $("#btn").on("click",function () {
                alert("我被点了");
            });

            // 使用off解除事件
            $("#btn2").click(function () {
                $("#btn").off("click");//传入解除事件名称
            });
        })
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>

事件切换`toggle`

Jquery对象.toggle(fun1,fun2,...)

当单击Jquery对象时对应的组件后，会执行fun1,第二次点击会执行fun2…

注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery-migrate-1.0.0.js"></script>
    <script type="text/javascript">
        // 由于使用Jquery是3.0版本的，在切换中不支持toggle了，注意是一定要引入插件才行
        $(function () {
            $("#btn").toggle(function () {
                $("#myDiv").css("backgroundColor","green");
            },function () {
                $("#myDiv").css("backgroundColor","red");
            });
        })
    </script>
</head>
<body>

    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色，再次点击红色
    </div>
</body>
</html>

插件：增强`JQuery`的功能

方式一：`$.fn.extend({方法})`

增强通过Jquery获取的对象功能 $("#id")【增强的是对象，就是标签增加，需要获取标签对象】

案例：

<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $.fn.extend({
            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>

方式二：`$.extend({方法})`

增强Jquery对象自身功能：$就是全局功能，直接$调用

<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;
            }
        });

        var max = $.max(4,3);
        alert(max);
        var min = $.min(4,5);
        alert(min);
    </script>

昱晟168

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
`JQuery`高级

JQuery高级动画三种方式显示和隐藏元素默认显示和隐藏方式show(spedd,easing,fnu);显示hide(spedd,easing,fun);隐藏toggle(spedd,easing,fun);切换滑动显示和隐藏方式slideDown([speed],[easing],[fn]);滑动显示 slideUp([speed,[easing],[fn]]);隐藏显示slideToggle([speed],[easing],[fn]);切换显示淡入淡出显示和隐藏方式
复制链接

扫一扫