js--JavaScript高级总结

爱被打了一巴掌 2021-09-27 04:26 366阅读 0赞

# 前言 #

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

# 内容 #

## 获取HTML中所需要的信息 ##

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

<script type="text/javascript"> var htmlcode = function(code) { //< < //> > } // 字符串对象中 // 类型.prototype.函数名 = function() {}; String.prototype.htmlcode = function() { // this指当前字符串 // <html><html> // 正则表达式 // 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"><html><head><title></title></head><body></body></html></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 #

谢谢您的阅读！

发表评论取消回复

表情：

评论列表（有 0 条评论，366人围观）

还没有评论，来说两句吧...

相关阅读

相关学习总结——hive高级

json数据的解析小结基本json和字符串数组（重点） * json数据的解析 * 内置函数 ...

冷不防/ 2024年04月18日 13:20/ 0 赞/ 89 阅读

相关 vue高级特性总结

![在这里插入图片描述][dd6e9b8523254718bc3afb91afa2f4d4.webp_pic_center] -------------------- 文

Dear 丶/ 2024年04月01日 09:23/ 0 赞/ 58 阅读

相关 Java高级部分总结

TCP&&UDP&&URL（传输层主要使用的协议） > 1.UDP不提供复杂的控制机制，发送数据之前不需要建立连接。并且它是将应用程序发来的数据在收到的那一刻，立刻按照原

小咪咪/ 2023年07月22日 03:48/ 0 赞/ 29 阅读

相关 Java高级部分总结

IO流 File类 File(File parent, String child) 从父抽象路径名和子路径名字符串创建新的 File实例。

墨蓝/ 2023年07月20日 10:49/ 0 赞/ 28 阅读

相关 Java高级部分总结

时间类 1.java.lang.System public static long currentTimeMillis() 2.java.util.Date

今天药忘吃喽~/ 2023年07月18日 06:42/ 0 赞/ 31 阅读

相关 Java高级部分总结

String类 1.String类被final修饰，所以不能被继承 2.String实现了Serializable接口：表示字符串支持实例化。 3.String实

末蓝、/ 2023年07月17日 09:54/ 0 赞/ 30 阅读

相关 oracle高级查询总结

oracle与我们常用的sqlserver、mysql相比，有非常多的优势，它可以支持多个实例同时运行，功能非常强大,主要在传统行业的数据化业务中，比

不念不忘少年蓝@/ 2022年08月19日 05:56/ 0 赞/ 218 阅读

相关 python高级特性总结

Python追求的是代码越少越好，越简单越好。基于这一思想，以下将总结一些非常有用的高级特性： 1、切片（Slice） L=['alice','bob','co

墨蓝/ 2022年05月17日 11:28/ 0 赞/ 263 阅读

相关 mysql高级知识总结

一、索引（1）什么是索引索引index是帮助MySQL高效获取数据的一种数据结构。![20190806092727692.png][] 可以看出，索引其实就是BT

逃离我推掉我的手/ 2021年11月11日 16:32/ 0 赞/ 334 阅读

相关 js--JavaScript高级总结

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

爱被打了一巴掌/ 2021年09月27日 04:26/ 0 赞/ 367 阅读