jQuery之$.expr用法

Posted 2021-04-08 山西软件小课堂

$.expr

对于jquery的扩展，常用的有：

1. $.extend({},obj1,obj2)

2. $.extend({  fn1:function(){  ...   }  })

3. $.fn.abc = function(){ ... }

还有一种扩展，不常用，即：$.expr，先看例子吧

实例一

<div id="one" data-color="red"></div>
    <div id="two" ></div>
    <div id="three" data-color="green"></div>
    $.extend( $.expr[ ":" ], {
    data: $.expr.createPseudo ?
    $.expr.createPseudo(function( dataName ) {
    return function( elem ) {
    return !!$.data( elem, dataName );
};
}) :
    // support: jQuery <1.8
    function( elem, i, match ) {
    return !!$.data( elem, match[ 3 ] );
}
});

$('div:data(color)')  获取的是id为 one、three

实例二

$window = $(window);
$.belowthefold = function(element, settings) {
    var fold;

    if (settings.container === undefined || settings.container === window) 
    {
        fold = $window.height() + $window.scrollTop();
    } else {
        fold = $container.offset().top + $container.height();
    }

    return fold <= $(element).offset().top - settings.threshold;
};
$.extend($.expr[":"],{
    "below-the-fold" : function(a) { return $.belowthefold(a, 
    {threshold : 0, container: window}); }
});

$("div:below-the-fold") //可以获取window屏幕以下的div

解读：
从机制上来讲，jQuery的选择符解析器首先会使用一组正则表达式来解析选择器，然后对解析出来的每个选择符执行选择器函数，最后根据true或false来决定是否保留元素
实例一：elem:当前遍历到的DOM元素，i:当前遍历到的DOM元素index，从0开始，match[3]正好匹配的元素
实例二：通过return返回true,false来筛选