首页 > web前端 > js教程 > 正文

黑马云课堂JavaScript 高级框架设计视频教程

巴扎黑
发布: 2017-08-24 17:29:51
原创
1971人浏览过

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

593750b454b39345.jpg

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

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

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

立即学习Java免费学习笔记(深入)”;

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

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

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

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

①判断,有两种方法:

方法一:用正则表达式。

if(/#((?:[wu00c0-uFFFF-]|\.)+)/.test(selector)){      //ID选择器}if(/^((?:[wu00c0-uFFFF-]|\.)+)/.test(selector)){     //Tag选择器}if(/.((?:[wu00c0-uFFFF-]|\.)+)/.test(selector)){     //class选择器}if(/^[[A-Za-z0-9_-S]+]$/.test(selector)){    //属性选择器}
登录后复制

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

var type=trim(selector).charAt(0);switch(type){    case ".":        //class选择器
    case "#":        //id选择器
    case "[":        //属性选择器
    default:        //tag选择器}
登录后复制

②根据选择器进行筛选。

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('*');    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];
            } 
        }
    }
}
登录后复制

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

以上就是黑马云课堂JavaScript 高级框架设计视频教程的详细内容,更多请关注php中文网其它相关文章!

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号