JavaScript: Geben Sie den Selektor des angegebenen Typs ein (nur drei einfache CSS-Selektoren wie id, class und tagName werden unterstützt)
PHP中文网
PHP中文网 2017-06-26 10:57:53
0
4
966

1. Schreiben Sie eine JavaScript-Funktion und geben Sie einen Selektor des angegebenen Typs ein (nur drei einfache CSS-Selektoren, id, class und tagName, müssen unterstützt werden, keine Kompatibilität mit kombinierten Selektoren erforderlich)

Das Problem ist: Ich kann den folgenden regulären Abgleich nicht verstehen: var reg = /^(#)?(.)?(w+)$/img;var regResult = reg.exec(selector);, die Details sind wie folgt

var query = function(selector) {
                var reg = /^(#)?(\.)?(\w+)$/img;
                var regResult = reg.exec(selector);
                var result = [];
                //如果是id选择器
                if(regResult[1]) {
                    ...
                }
                //如果是class选择器
                else if(regResult[2]) {
                    ...
                      
                }
                //如果是标签选择器
                else if(regResult[3]) {
                    ...
            }
}
       
PHP中文网
PHP中文网

认证0级讲师

Antworte allen(4)
扔个三星炸死你

/^(#)?(\.)?(\w+)$/img
拆一下 //之间的是正则的内容 后面img是正则的匹配方式
i:ignorCase忽略大小写
m:mutiple允许多行匹配
g:globle进行全局匹配,指匹配到目标串的结尾

正则内容:^(#)?(\.)?(\w+)$ ^代表以xxx开头 $代表以xxxx结尾
(#)?可以带一个或者不带#
(.)? 可以带.或者没有.
(w+) 匹配一个或多个单词

曾经蜡笔没有小新

/^(#)?(.)?(w+)$/img

  1. (#)? 匹配ID的

  2. (\.)? 匹配className

  3. (\w+) 剩下都是标签名或者[1,2]中具体的ID或者className名称

ringa_lee

谢遥。

请参考 @trionfo1993

迷茫

给你一个,我写的utils中的dom片段

class dom extends base{

    constructor(){
        super();
    }
    // 根据ID获取指定DOM
    byId(_id){
        return document.getElementById(string.replace(_id,'#',''));
    }
    // 根据ID或Class获取DOM
    get(_id){
        if(_id.indexOf('.') > -1){
            let list = document.getElementsByClassName(string.replace(_id,'\\.',''));
            this._object = Array.from(list);
        }else{
            this._object = [this.byId(_id)];
        }
        
        return this;
    }
    // 根据Name获取相关DOM
    byName(_name){
        let list = document.getElementsByName(_name);
        if(list.length > 0)
            return Array.from(list);
        return null;
    }
    // 返回dom原型
    get valueOf(){
        if(this._object.length >1){
            return this._object;    
        }
        return this._object[0];
    }
    // 基础DOM操作方法
    _dom_ctrols(_func){
        for(let info of this._object){
            _func(info);
        }
        return this;
    }
    // 增加class
    addClass(_name){
        this._dom_ctrols((info)=>{
            if(info.className.indexOf(_name) == -1){
                info.className += ' ' + _name;
            }
        })
        return this;
    }
    // 删除class
    removeClass(_name){
        this._dom_ctrols((info)=>{
            info.className = string.replace(info.className,_name,'');
        })
        return this;
    }
    // 显示?隐藏DOM主方法
    _hide_show(_value){
        this._dom_ctrols((info)=>{
            info.style.display = _value;
        });
    }
    // 隐藏DOM
    hide(){
        this._hide_show('none');
    }
    // 显示DOM
    show(){
        this._hide_show('block');
    }
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!