Heim > Web-Frontend > js-Tutorial > Hauptteil

Black Horse Cloud Classroom JavaScript Advanced Framework Design-Video-Tutorial

巴扎黑
Freigeben: 2017-08-24 17:29:51
Original
1723 Leute haben es durchsucht

黑马云课堂JavaScript 高级框架设计视频教程:Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

Black Horse Cloud Classroom JavaScript Advanced Framework Design-Video-Tutorial

视频播放地址:http://www.php.cn/course/547.html

本课程难点是选择器模块,看了本视频的应该都能看出来,在本视频中用了大量的视频介绍了选择器模块,大家可以着重学习这一块。

需要区分复合选择还是单项选择,单项选择的话分别用各自的方法进行获取,复合选择的话就要进行筛选。

所以第一步,区分是单项还是组合。

实现方法是将传入选择器的字符串转换成数组,如果数组长度大于1的话,就是复合选择。如果不是的话,再判断是哪一种单项选择器。

if(trim(selector).split(" ").length > 1){ //trim()方法用于去除字符串开头和结尾的空白//复合选择器代码}//判断是哪一种单项选择器
Nach dem Login kopieren

第二步,判断是哪一种单项选择器,然后进行筛选返回第一个元素。

①判断,有两种方法:

方法一:用正则表达式。

if(/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/.test(selector)){      //ID选择器}if(/^((?:[\w\u00c0-\uFFFF\-]|\\.)+)/.test(selector)){     //Tag选择器}if(/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/.test(selector)){     //class选择器}if(/^\[[A-Za-z0-9_-\S]+\]$/.test(selector)){    //属性选择器}
Nach dem Login kopieren

方法二:检查传入选择器的第一个字符

var type=trim(selector).charAt(0);switch(type){    case ".":        //class选择器
    case "#":        //id选择器
    case "[":        //属性选择器
    default:        //tag选择器}
Nach dem Login kopieren

②根据选择器进行筛选。

id和tag直接用DOM方法就可以了。

class的document.getElementsByClassName有兼容问题,需要为IE定义方法。

属性选择器需要遍历所有的DOM节点对象,选择出符合条件的。

//ID选择器return document.getElementById(selector.slice(1,selector.length));//tag选择器return document.getElementsByTagName(selector)[0];//类选择器if(document.getElementsByClassName){    return document.getElementsByClassName(selector.slice(1,selector.length))[0];
}else{    var nodes = document.all ? document.all : document.getElementsByTagName(&#39;*&#39;);    for(var i=0;i<nodes.length;i++){        var classes=nodes[i].className.split(/\s+/);            if(classes.indexOf(selector.slice(1))!=-1){ //indexOf不兼容,需要在原型上扩展
                return nodes[i];                break;
            } 
        }
    }    
}//属性选择器if(/^\[[A-Za-z0-9_-\S]+\]$/.test(selector)){
    selector = selector.slice(1,selector.length-1);    var eles = document.getElementsByTagName("*");
    selector = selector.split("=");    var att = selector[0];    var value = selector[1];    if (value) {        for (var i = 0; i < eles.length; i++) {            if(eles[i].getAttribute(att)==value){                return eles[i];
            } 
        }
    }else{        for (var i = 0; i < eles.length; i++) {            if(eles[i].getAttribute(att)){                return eles[i];
            } 
        }
    }
}
Nach dem Login kopieren

本视频主讲老师讲课较为有激情,讲课语气慷慨激昂,能够充分调动学生的学习积极性以及学习的欲望,在不知不觉中学会所有知识点。

Das obige ist der detaillierte Inhalt vonBlack Horse Cloud Classroom JavaScript Advanced Framework Design-Video-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
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!