visible选择器

nanchen2251 发布于2019-08-21 14:06 / 1820人阅读

摘要：由于的精简，以置于之前的的代码不能运行了，其中选择器就是其中一个。总结最终我选择了最后一种，功能能够满足现有的需求。其实很强大，这选择器只是其九牛一毛，后面可以再学习学习其思想。

现在移动端项目在重构阶段，将之前的jQuery全部替换成Zepto了。由于Zepto的精简，以置于之前的jQuery的代码不能运行了，其中visible选择器就是其中一个。既然已经选择了Zepto，那就给Zepto增加visible功能。

分析

第一反应就是思考通过元素的属性来判断，然后尝试了使用display和visibility来进行判断。但是经过小的测试，是我想的简单了！

display是无法继承父元素的，visibility是能够继承父元素，但是父元素采用的是display显示与隐藏。

参考地址1
参考地址1

我的想法

既然模块的根元素是用display显示与隐藏，那我先就通过类选择器，选到元素。然后再透过递归判断父元素display，直到body元素。

;(function($) {
    
    var _filter = $.fn.filter;

    function visible(elem) {
        var $elem = $(elem);
        if($elem.css("display") === "none") {
            return false;
        }else {
            if($elem.is("body")) {
                return true;
            }else {
                if(visible($elem.parent())) {
                    return true;
                }
            }
        }
    }

    $.fn.filter = function(sel) {
        if (sel === ":visible") {
            return $([].filter.call(this, visible));
        }
        return _filter.call(this, sel);
    };
})(window.Zepto);

自己的实现是可以的，不过自我感觉有点饶了，看看能不能透过其它方式来解决。

jQuery实现

查看了jQuery3.0的内部实现，最终调用的是jQuery.expr.filters.visible

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

jQuery首先的判断元素的offsetWidth和offsetHeight。因为根元素隐藏后，导致其子元素的宽高为0。不占用文档流，这很好理解。

getClientRects：获取元素占据页面的所有矩形区域，用于获取元素占据页面的所有矩形区域
与之相关的是getBoundingClientRect。
getBoundingClientRect：用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置

而为什么要使用这个呢？在官网找到了答案。

Breaking change: Behavior of :hidden and :visible
An element is considered now visible if it has a layout box returned from the DOM getClientRects() method,even if that box has a height and/or width of zero. This means that elements such as
or an empty element that don"t have height are considered to be visible.

大体的意思是对于一个元素本身宽高都为0，但是占据了稳定流，这是能认为是visible的。比如像换行br、空的span 标签。

其它实现

在github上也找到了，对Zepto增加visible的方法。

;(function($){
  var _is = $.fn.is, _filter = $.fn.filter;

  function visible(elem){
    elem = $(elem);
    return !!(elem.width() || elem.height()) && elem.css("display") !== "none";
  }

  $.fn.is = function(sel){
    if(sel === ":visible"){
      return visible(this);
    }
    if(sel === ":hidden"){
      return !visible(this);
    }
    return _is.call(this, sel);
  }

  $.fn.filter = function(sel){
    if(sel === ":visible"){
      return $([].filter.call(this, visible));
    }
    if(sel === ":hidden"){
      return $([].filter.call(this, function(elem){
        return !visible(elem);
      }));
    }
    return _filter.call(this, sel);
  }
})(Zepto);

总结

最终我选择了最后一种，功能能够满足现有的需求。

其实Sizzle很强大，这visible选择器只是其九牛一毛，后面可以再学习学习其思想。

原文地址http://xiaoqiang730730.github.io/2016/07/16/visible%E9%80%89%E6%8B%A9%E5%99%A8/

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87797.html

jQuery 对象、基本选择器、筛选选择器

摘要：代表的上下文对象是一个的上下文对象，可以调用的方法和属性值特殊选择器点击测试通过原生处理点击测试通过原生处理直接通过的方法改变颜色通过包装成对象改变颜色 DOM对象转化成jQuery对象如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象元素一元素二元素三 var ...

source 2019-08-21 11:51 评论0 收藏0
读Zepto源码之Selector模块

摘要：如果伪类的参数不可以用转换，则参数为字符串，用正则将字符串前后的或去掉，再赋值给最后执行回调，将解释出来的参数传入回调函数中，将执行结果返回。重写的方法，改过的调用的是方法，在回调函数中处理大部分逻辑。 Selector 模块是对 Zepto 选择器的扩展，使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器。在阅读本篇文章之前，最好先阅读《...

Jioby 2019-08-22 11:09 评论0 收藏0
前端常见知识点汇总（面试）-HTML和CSS部分

摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

DevTTL 2019-08-30 15:55 评论0 收藏0
前端常见知识点汇总（面试）-HTML和CSS部分

摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

wuyangnju 2019-08-02 13:58 评论0 收藏0
web前端开发测验之css部分

摘要：部分问题与解答属性是否区分大小写不区分。对于行内元素，设置左右内边距，左右内边距将是可见的。而对于替换元素，则撑开了父元素。如下代码中文本的颜色是。 Tip：这是http://davidshariff.com/quiz/给出的web前端开发测试题,的CSS部分,我根据自己的理解给出的答案，欢迎拍砖，一起刷题==>Github 仓库地址。 Front End Web Developm...

Ajian 2019-08-28 17:59 评论0 收藏0