zoukankan      html  css  js  c++  java
  • js重点基础知识 以及小案例_最简单的轮播图 简单的动态表格( encodeURIComponent()编码比 encodeURI()编码)

    JS的原始数据类型有:

    1.number;

    2.String;

    3.boolean;

    4.null;

    5.undefined;

     

    ------------------------------------------JavaScript 对象-------------------------------------------------------

     

    arguments对象

       
    //arguments的应用
    
     function t(){
            var sum = null;
           for(var i = 0; i <arguments.length; i++){
               sum = sum + arguments[i];
           }
            alert(sum);
        }
    
        t(1,2,3);  //结果 6;

    Array对象 

    把它当作java中的集合看待

       //数组的创建方式  js中的数组是长度可变,类型可以变的!!!!
      //array的应用
        var array = new Array(6);
        var array2 = [2,3,4];
        var array3 =new Array(1,2,3,4);

       var array2 = [2,3,4]; //初始长度为3, 整型
        array2[10] = "string string ";  //证明数组类型可以变 长度可变
        alert(array2[10]);

     Date对象

     

     Math对象

     Global对象

    编码

    URI 编码可以对链接进行编码,以便发送给浏览器。它们采用特殊的 UTF-8 编码替换所有无效字符,从而让浏览器能够接受和理解。

    不会对本身属于 URI 的特殊字符进行编码,例如冒号、正斜杠、问号和#号

    因为 encodeURIComponent()编码比 encodeURI()编码来的更加彻底,一般来说encodeURIComponent()使用频率要高一些。

    var box = '//Lee 李';
    console.log(encodeURI(box)); //只编码了中文,结果是这样//Lee%20%E6%9D%8E
    
    var box = '//Lee 李';
    console.log(encodeURIComponent(box)); //特殊字符和中文编码了,结果是这样%2F%2FLee%20%E6%9D%8E

    解码

    使用了 URI 编码过后,还可以进行解码

    URI解码方法—decodeURI()和decodeURIComponent()

    复制代码
    var box = '//Lee 李';
    box1 = encodeURI(box); //编码
    console.log(box1);
    console.log(decodeURI(box1));//解码
    
    var box2 = '//Lee 李';
    box2 = encodeURIComponent(box); //编码
    console.log(box2);
    console.log(decodeURIComponent(box2)); //解码

    eval()

    主要担当一个字符串解析器的作用,他只接受一个参数,而这个参数就是要执行的 JavaScript 代码的字符串。(即可以解析javascript代码)

    eval()方法的功能非常强大,但也非常危险。因此使用的时候必须极为谨慎。特别是在用户输入数据的情况下,非常有可能导致程序的安全性,比如代码注入等等。

    复制代码
    eval('var box = 100');     //解析了字符串代码
    console.log(box);                //100
    eval('console.log(100)'); //同上
    
    
    eval('function box() {return 123}'); //函数也可以
    console.log(box()); //调用这个函数结果是123

    -------------------------------------------BOM对象-------------------------------------------------------

    Browser 对象  (BOM 浏览器对象模型)

    • 将浏览器的各个组成部分封装成对象
    • window (窗口对象)  history(历史对象)   location(地址栏对象)                , navigator(浏览器对象)  screen(显示器对象)

       

      window:窗口对象

           

          

     

      最简单的轮播图

    <script>
    
        window.onload = function (ev) {
            /*
                1:再页面上显示一个图片
                2:定义一个方法 修改图片的src
                3: 定义一个定时器 每隔一段时间调用方法一次
             */
    
            var num = 1;
            function changeImg() {
                num++;
                if(num > 3){
                    num = 1;
                }
                var img = document.getElementById("img");
                img.src = num+".png";
            }
    
            //设置定时器
            setInterval(changeImg,2000);
        }
    </script>
    
    <body>
        <img src="1.png" id="img" />
    </body>

     

    ---------------------------------------------HTML DOM对象-------------------------------------------------

    HTML DOM 对象 (包含再Bom对象中的)

            // var els = document.getElementsByName("1");   根据name值获取标签
            //var els = document.getElementsByTagName("input");  根据标签名获取标签 例如:input p..
            //document.getElementById("id");   根据Id获取标签
            //document.getElementsByClassName("class");  根据class获取标签

    //动态表格

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    <script>
    
        window.onload = function (ev) {
            var bt = document.getElementById("bt");
            bt.onclick = function (ev1) {
                var tb = document.getElementById("t");
                var puts = document.getElementsByTagName("input");
    
                var a = document.createElement("a");
                a.appendChild(document.createTextNode("删除"));
                a.setAttribute("href","javascript:void(0);");
                a.setAttribute("onclick","del(this);");
                var td = document.createElement("td");
                td.appendChild(a);
    
    
                var tr = document.createElement("tr");
                tr.style.backgroundColor="yellow";
                tr.style.textAlign = "center";
                tr.innerHTML = "<td>"+puts[0].value+"</td><td>"+puts[1].value+"</td><td>"+puts[2].value+"</td>";
                tr.appendChild(td);
    
                tb.appendChild(tr);
            }
        }
    
    
        function del(a) {
            var tb = a.parentNode.parentNode.parentNode;
            var tr = a.parentNode.parentNode;
            tb.removeChild(tr);
        }
    
    
    </script>
    
    <style type="text/css">
    
        table th{
             60px;
            background-color: yellowgreen;
        }
    </style>
    <body>
    
        <input type="text" value="11"/>
        <input type="text" value="11"/>
        <input type="text" value="11"/>
        <input type="button" id="bt" value="添加"/><br/><br/><br/>
       <table id="t">
           <thead><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></thead>
       </table>
    
    
    </body>
    </html>
    坚持
  • 相关阅读:
    mmdetection安装问题(nms is not compiled with GPU support)
    【洛谷日报#75】浅谈C++指针
    NOIP专题复习3 图论-强连通分量
    NOIP专题复习2 图论-生成树
    NOIP专题复习1 图论-最短路
    题解 P1967 货车运输
    【转】linux expoll模型
    spring mvc 4.1支持protobuf converters
    ubuntu install jdk
    nosql理论基础
  • 原文地址:https://www.cnblogs.com/gaoSJ/p/12888586.html
Copyright © 2011-2022 走看看