jQuery中toggle()函数的应用总结(包含今天项目中碰到的前端控件)

       本人是一名后台开发人员,然而公司项目没有做到前后端分离,前端仅仅是写静态页面,js还得后台开发人员写。对于前端的东西呢常见东西的是没有问题,但是有些东西用的少可能容易忘记。这不今天接手维护另一个同事的一个模块就被安排了。有问题怎么办?W3s!jquery语法上的问题,我建议还是查看权威的资料,不要老是百度百度。百度上的解释可能你一时半会理解了,copy并跑通了但是以后再遇见你可能就想不起了。所以还是多花一些时间去W3s上看完整一点的介绍并笔记。好了言归正传。项目中的代码如下:

               //移动端下载二维码交互
                $(document).on('click', '.frame_down_load_app', function () {
                    $('.frame_app_code_container').toggle();
                });

实现功能为点击按钮显示二维码图片再点击则隐藏。这样交替切换。W3c上的解释如下:

定义和用法

toggle() 方法切换元素的可见状态。

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

$(selector).toggle(speed,callback,switch)

看清楚了哦,原来这里是有三个参数的,但是因为都是可选的,故可以用默认写法,全都不填。

参数描述speed

可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数,则无法使用 switch 参数。

callback

可选。回调函数。

除非设置了 speed 参数,否则不能设置该参数。

switch

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

  • True - 显示所有元素
  • False - 隐藏所有元素

如果设置此参数,则无法使用 speed 和 callback 参数。

好了,toggle我们现在理解了,那么如果我们要求在元素显示的时候点击浏览器界面任何位置都能实现隐藏呢。这就有了下面这段代码:

      $(document).click(function (event) {
                    event = event ? event : window.event;
                    var obj = event.srcElement ? event.srcElement : event.target;
                    if ($(obj).closest('.frame_down_load_app').length === 0 || 
                            $(obj).attr('class') === 'frame_down_load_app') {
                        $('.frame_app_code_container').hide();
                    }
                });

这段代码中又有俩个地方引起我的注意:

1.event和window.event 有何区别

2.“==”与“===”

首先先看event和window.event

event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;在IE/Opera中是window.event,在Firefox中是event;而事件的对象,在IE中是window.event.srcElement,在Firefox中是event.target,Opera中两者都可用。也就是说这俩个只是不同浏览器的兼容性用法。这样就实现了我们点击二维码图或桌面都能实现隐藏显示的元素。

接着是“==”与“===”

==   用于比较   判断 两者相等      ==在比较的时候可以转自动换数据类型

===用于严格比较   判断两者严格相等     ===严格比较,不会进行自动转换,要求进行比较的操作数必须类型一致,不一致时返回flase。这个就不多解释了。好了。就笔记到这里吧。

参考源:W3school

猜你喜欢

转载自blog.csdn.net/weixin_41278749/article/details/83385528