`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]);切换显示
淡入淡出显示和隐藏方式
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不能使用breakcontinue来跳转循环和跳转本次循环,只能使用return false或true的方式跳转循环和跳转本次循环,但是在Javascript中可以使用breakcontinue方式

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值