Question

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

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

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

等

是否有任何教程或插件能够证明这种解析选择器语法以便与对象进行比较的能力？

Answer 1

jQuery使用的选择器语法被抽象为Sizzle library。你可以在GitHub上查看the source到Sizzle。

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;
},

这些正则表达式和逻辑的使用方式可以为您提供有关如何实现数据结构查询的建议。

是否有任何jQuery教程演示创作插件接受选择器语法？

1 个答案: