js--JavaScript高级总结

前言

之前几篇博客都介绍了JavaScript的高级部分,所以对JavaScript的这些已经有了初步的认识,所以,这篇博客将JavaScript高级部分大致总结一下。

内容

获取HTML中所需要的信息

获取任何东西,在JavaScript中都需要用到正则表达式,所以这方面需要好好学学,现在直接上代码:

<script type="text/javascript">
    var htmlcode = function(code) {
        //&lt; <
        //&gt; >
    }
    // 字符串对象中
    // 类型.prototype.函数名 = function() {};
    String.prototype.htmlcode = function() {
        // this指当前字符串
        // &lt;html&gt;&lt;html&gt;
        // 正则表达式
        // replace(/正则/, func(0,1,2,3))
        var json = {
            "lt":"<",
            "gt":">"
        };
        return this.replace(/&(.+?);/g, function(a, b) {
            // 看看b是什么就返回什么
            return json[b];
        });
    };

    onload = function() {
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            // 要复制
            // 获得pre标签
            var pre = document.getElementById("code");
            // 得到innerHTML
            var txt = pre.innerHTML;

            var res = txt.htmlcode();

            clipboardData.setData("text", res);
        };
    };
</script>
</head>
<body>
    <input type="button" value="复制代码" id="btn"/>
    <pre id="code">&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;</pre>
</body>

获得边框

<script type="text/javascript">
    var  o ={
        length:0,
        css:function(styles){   //styles 是一个json类型的样式数据
            for(var k  in styles){                  
                for(var  i =0 ;i<this.length;i++){
                    this[i].style[k] = styles[k];
                }
            }
        }
    };
    //获得成员,给成员添加到 对象中,让这个节点成员也具有css的方法
    var G = function(selector){   //#id , div :id选择器和标签选择器
        var r = /#(.+)/;  //匹配到的第一组是具体的id
        var  m =r.exec(selector);
        if( m ){ //是id选择器
            var node =  document.getElementById(m[1]);          
            o[length++] = node;
            return o;

        }else{ //标签选择器
            var  nodes = document.getElementsByTagName(selector);
            for(var i =0;i<nodes.length;i++){   //将所有的标签节点都放入到对象中
                o[o.length++] = nodes[i];               
            }
            return o;
        }
    }
    onload = function(){
        G("div").css({
            border:"1px solid red",
            width:"300px",
            height:"200px"
        }); 
    };
    </script>

弹出登录

<script type = "text/Javascript">
    onload = function(){
        var body = document.getElementsByTagName("body")[0];
        var a = document.getElementById("login");
        a.onclick = function(){
            //创建登陆界面
            var divCover = document.createElement("div");
            divCover.style.position = "absolute";
            divCover.style.top = "0";
            divCover.style.left = "0";
            divCover.style.right = "0";
            divCover.style.bottom = "0";
            divCover.style.backgroundColor = "#ccc";//#cccccc

            divCover.style.opacity = "0.5";
            divCover.style.filter = "alpha(Opacity=50)";

            body.appendChild(divCover);

            return false
        }
    }
</scripy>

验证密码强度

<script type="text/javascript">
    onload = function () {
        var pwd = document.getElementById("pwd");
        pwd.onkeyup = function () {
            var level = 0;
            var input = this.value;
            //if (input.length<6) return;                
            //验证(数字、字母、特殊字符)
            //权值(满足数字+1、满足字母+1、满足特殊字符+1)
            if (/[a-zA-Z]+/.text(input)) {
                level++;
            }
            if (/\d+/.test(input)) {
                level++;
            }
            if (/[!@#$%^&*\(\)\_\+\=\{\}\[\]\.]/.test(input)) {
                level++;
            }
            var msg = document.getElementById("msg");
            //if (input.length<6 && level-1<0) level--;                
            mas.innerHTML = ",<span style=\"background-color:red;\">弱</span>,<span style=\"background-color:yellow;\">中等</span>,<span style=\"background-color:green;\">强</span>".split(',')[level];
        }
    }
</script>
<body>
    <input type="text" name="name" value=" " id="pwd" />
    <p id="msg"> </p>
</body>

总结

这篇博客基本上都是代码,大神们看看有什么bug没有,希望给点提示,因为这都是日后宝贵的经验!

end

谢谢您的阅读!

猜你喜欢

转载自blog.csdn.net/luojun13class/article/details/81092684