检查选择器类型jquery

Check selector type jquery

本文关键字：jquery 类型 选择器 检查      更新时间：2023-09-26

我正在尝试创建一个jQuery扩展，该扩展具有传递目标值的选项。

以下是扩展的示例用法

//passed value : #target-element-id
$("<selector>").myFunction({ target: "#target-element-id" });
//target should return an "ID" selector type.

是否可以验证传递的值是否是id、类选择器，或者是否可以检查使用了什么类型的选择器？

对于那些问我为什么需要检查选择器类型的人。

这是因为我想做一些像。。

if (isId) {
    goDance();
}
else if (isClass) {
    goSing();
}

您可以将String.prototype.split()与RegExp一起使用/'s+/，然后在options.target上使用.pop()来检索选择器字符串的每一部分；将.pop()的结果传递给jQuery()，使用参数"id"调用.prop()以检查与.pop()的结果上的参数1的Array.prototype.slice()的严格相等性以检查id，否则选择器是className

function goDance(id) {
  console.log("goDance id:", id)
}
function goSing(c) {
  console.log("goSing class:", c)
}
(function($) {
  $.fn.myFunction = function(options) {
    var type = options.target.split(/'s+|>/).pop();
    if ($(type).prop("id") === type.slice(1)) {
      goDance(type);
    } else {
      goSing(type);
    }
  }
}(jQuery));
$("#div").myFunction({target:"#targetId>.targetClass1"}); // `goSing`
$("#div").myFunction({target:"body #targetId"}); // `goDance`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="div"></div>
<div class="targetClass">target class</div>
<div id="targetId">target id<span class="targetClass1">target class 1</span></div>

为了简单地确定id或类，您可以检查目标字符串的第一个字符：

var selectorType;
var targetFirstCharacter = options.target.charAt(0);
switch (targetFirstCharacter) {
    case "#":
        selectorType = "id";
        break;
    case ".":
        selectorType = "class";
        break;
    case "[":
        selectorType = "attribute";
        break;
    default:
        if (targetFirstCharacter.match(/[a-z]/i)) {
            selectorType = "tag";
        }
}

<canvas id="canvas" width="100" height="100"></canvas>
<input id="file" type='file' onchange="" />
<div class="oi"></div>
<p>para</p>
<div id="content" class="hello">
    <p class="st"></p>
</div>
<script>
    $("document").ready(function(){
        function detect(selector){
            console.log("-------------");
            console.log("selector",selector);
            var type = "undefined";
            var allParts = [];
            var parts = selector.split(" ");
            var lastPart = parts[parts.length-1];
            var parray = lastPart.split(/(#|'.)/);
            var strToTest = parray[parray.length-1];
            console.log("strToTest",strToTest);
            //try to find something
            if($(selector).size() > 0){
                //is class
                if($(selector).hasClass(strToTest)){
                    type = "class selector";
                }
                else if($(selector).attr("id") == strToTest){
                    type = "id selector";
                }else{
                    if($(selector).is(strToTest)){
                        type = "element selector";
                    }else{
                        //undefined
                    }
                }
            }
            //console.log(type);
            return type;
        }
        console.log(detect(".oi"));
        console.log(detect("#file"));
        console.log(detect("p"));
        console.log(detect("canvas#canvas"));
        console.log(detect("div#content.hello"));
        console.log(detect("div#content .st"));
        console.log(detect("div#content p.st"));
    });
</script>
相关文章：