代码之家 › 专栏 › 技术社区 › BenAlabaster

是否有任何jquery教程演示编写插件以接受选择器语法?

jquery-selectors jquery-plugins jquery

BenAlabaster · 技术社区 · 15 年前

我正在尝试编写我的第一个jquery插件来查询复杂对象的多维数组。它有点像我想要的那样,但是现在它接收到一个属性名和值作为项目比较的输入。我想修改它,以便它可以接收jquery的选择器语法作为输入,以便以更包容的方式过滤我的对象。

我希望能够提供与jquery的“native”选择器语法相同或类似的语法:

"string"
"number"
"boolean"
"object"
"string,number,boolean"
"object[FirstName='Ben'][LastName='Alabaster']"
"object[LastName^='Ala']"
"object[LastName$='er']"

等。

是否有任何教程或插件可以演示这种分析选择器语法以与对象进行比较的能力?

1 回复 | 直到 15 年前

artlung 15 年前

jquery使用的选择器语法被抽象为 Sizzle library . 你可以看到 the source 在Github上发出咝咝声。

sizzle是非常清楚地定制来查询文档的文档对象模型的,所以您需要做一些修改,使其能够查询其他类型的数据。看看第294到303行:

match: {
    ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
    CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
    NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,
    ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,
    TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,
    CHILD: /:(only|nth|last|first)-child(?:\((even|odd|[\dn+\-]*)\))?/,
    POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,
    PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/
},

这里的代码似乎可以分析属性选择器,比如 ^= 和 ~= ,第661至691行:

ATTR: function(elem, match){
    var name = match[1],
        result = Expr.attrHandle[ name ] ?
            Expr.attrHandle[ name ]( elem ) :
            elem[ name ] != null ?
                elem[ name ] :
                elem.getAttribute( name ),
        value = result + "",
        type = match[2],
        check = match[4];

    return result == null ?
        type === "!=" :
        type === "=" ?
        value === check :
        type === "*=" ?
        value.indexOf(check) >= 0 :
        type === "~=" ?
        (" " + value + " ").indexOf(check) >= 0 :
        !check ?
        value && result !== false :
        type === "!=" ?
        value !== check :
        type === "^=" ?
        value.indexOf(check) === 0 :
        type === "$=" ?
        value.substr(value.length - check.length) === check :
        type === "|=" ?
        value === check || value.substr(0, check.length + 1) === check + "-" :
        false;
},

使用这些正则表达式和逻辑的方式可能会让您了解如何实现数据结构查询。