javascript:事件，物件-有解無憂

 事件: 當執行某件事情|某個動作觸發一段js代碼的執行,觸發一個函式的執行,函式js已經定義好了 
分類: 
滑鼠事件 
        單擊事件 onclick 
        雙擊事件 ondblclick 
        移入 移出 
鍵盤事件: 鍵盤按下 抬起 
焦點事件: 聚焦事件 失焦事件 
檔案事件 :window.onload 帶內面內容全部加載完成之后才出發函式的執行 
表單事件: 焦點事件 change 表單元素內容改變觸發的時間
    <title>事件</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1,.box3,.box5{
            background: cyan;
        }
        .box2,.box4{
            background: pink;
        }
    </style>
</head>
<body>
   
    <div class="box1">div1</div>
    <div class="box2" οnmοuseοver="func_over();">div2</div>
    <div class="box3" >div3</div>
    <div class="box4">div4</div>
    <div class="box5">div5</div>

    <input type="text" id="username" name="username" οnfοcus="func_focus()" οnblur="func_blur()"><span id="info"></span>

    <script>
        var box1 = document.getElementsByClassName("box1")[0];
        var box2 = document.getElementsByClassName("box2")[0];
        var box3 = document.getElementsByClassName("box3")[0];
        var box4 = document.getElementsByClassName("box4")[0];
        var box5 = document.getElementsByClassName("box5")[0];

        var info = document.getElementById("info");
        var username = document.getElementById("username");


        //為元素節點系結事件
        box1.ondblclick = function(){
            console.log("12345");
        }

        function func_over(){
            console.log("滑鼠移入事件");
        }

        function func_focus(){
            info.innerHTML = "請輸入用戶名,不能為null";
        }

        function func_blur(){
            if(username.value==""){
                info.innerHTML = "用戶名不合法不能為null";
                console.log(123);
            }
        }

    </script>
</body>
</html>

 js中的物件 {} 鍵值對資料的集合 
鍵值對: key : value 
        兩個鍵值對之間使用,分隔 
        key : 字串,引號可以省略的,當key非標準的識別符號的命名形態,需要通過"" 
        value : 可以使js中的任意型別 
json 是一種輕量級的資料交換格式， 采用完全獨立于編程語言的文本格式來存盤和表示資料， 易于人閱讀和撰寫，同時也易于機器決議和生成，并有效地提升網路傳輸效率， 
JSON 是 JS 物件的字串表示法，它使用文本表示一個 JS 物件的資訊，本質是一個字串， 
'{鍵值對}' key是是字串 "" 
value : 數值型,字串"",物件,陣列,null,boolean 

    <title>物件</title>
</head>
<body>
   
    <script>
        /*1.字面量創建方式*/
        var obj = {
            name : "laopei",
            age : 18,
            son : [
                {name:"xiaopei",age:5},
                {name:"xiaoxiaopei",age:2}
            ],
            car : null,
            teach : function(){
                console.log("裴校越講越嗨,越嗨越快!!!");
            }
        };

        console.log(obj);
        //獲取物件的屬性值
        console.log(obj.name);

        //2.new Object() 創建一個空物件
        var obj2 = new Object();
        /*為物件添加屬性*/
        obj2.name='haha';
        obj2.age=18;
        console.log(obj2);

        //3.Object.create(null) 創建一個空物件
        var obj3 = Object.create(null);
        console.log(obj3);

        //  JSON決議器 : 通過JSON決議器決議json效率較高
        /*json串-->js物件*/
        var json = '{"a": "Hello", "b": "World"}';
        console.log(JSON.parse(json));

        /*jjs物件-->son串*/
        var obj4 = {name:"zhangsan",age:18,'gender':true};
        console.log(JSON.stringify(obj4));
    </script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292361.html

標籤：其他

上一篇：2021-08-06 Vue（二）

下一篇：Node.js 簡介