Javascript 检查选择器类型jquery

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

下面是扩展的示例用法

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

---

要简单确定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";
        }
}

帕拉


$（“文档”）.ready（函数（）{
功能检测（选择器）{
console.log（“----------------”；
控制台日志（“选择器”，选择器）；
var type=“未定义”；
var-allParts=[]；
变量部分=选择器。拆分（“”）；
var lastPart=零件[零件长度-1]；
var parray=lastPart.split（/（#| \.）/）；
var-strottest=parray[parray.length-1]；
日志（“strToTest”，strToTest）；
//试着找点东西
如果（$（选择器）.size（）>0）{
//是班级
if（$（选择器）.hasClass（strToTest））{
type=“类选择器”；
}
else if（$（选择器）.attr（“id”）==strottest）{
type=“id选择器”；
}否则{
if（$（选择器）.is（strToTest））{
type=“元素选择器”；
}否则{
//未定义
}
}
}
//console.log（类型）；
返回类型；
}
日志（检测（“.oi”）；
log（检测（“#文件”）；
控制台日志（检测（“p”）；
console.log（检测（“canvas#canvas”）；
log（detect（“div#content.hello”）；
log（detect（“div#content.st”）；
日志（检测（“div#content p.st”）；
});

您可以使用

String.prototype.split（）

和

RegExp

/\s+//code>一起使用
.pop（）
打开
选项。target
检索选择器字符串的每个部分；将
.pop（）
的结果传递给
jQuery（）
，使用参数
调用
.prop（）
“id”
检查与
数组的严格相等性。prototype.slice（）
在
的结果上使用参数
1
。pop（）
检查
id
，否则选择器是
类名


函数goDance（id）{
日志（“goDance id:，id”）
}
函数goSing（c）{
log（“goSing类：”，c）
}
（函数（$）{
$.fn.myFunction=函数（选项）{
var type=options.target.split（/\s+|>/）.pop（）；
if（$（type.prop（“id”）==type.slice（1））{
戈登斯（型）；
}否则{
戈辛（型）；
}
}
}（jQuery））；
$（“#div”）.myFunction（{target:#targetId>.targetClass1}）；//`戈辛`
$（“#div”）.myFunction（{target:“body#targetId”}）；//`戈登斯`

目标类
target id target class 1
试着澄清你的目标。。是的，这是可能的。@DiegoPolidoSantana你的伴侣不清楚的部分是什么？我需要检查已通过的选择器类型，这是我的目标：）为什么要检查选择器类型？如果它是组合的，比如“#a.b输入[type=text]”是什么类型？哈哈，这就是为什么我问哈哈，我已经想到了这个，检查第一个字符，但根据Vanitas和我刚刚意识到的，对于像
\a.b
：）这样的选择器，如果我在
\targetId>这样的选择器中放置一个像
.targetClass1
？@JF Mechs这样的选择器，这会起作用吗？目前，不会。尽管你可以在
.split（）
处将
添加到
RegExp
；e、 例如，
.split（/\s+|>/）
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>