05-javascript基礎学習ノート

12405 ワード
1.ノードの操作###
バックグラウンドから返されたデータに基づいてノードを作成し、前に書いた操作:ページ構造を書き、domツリーでノードを取得し、取得したノードを操作します.今日はdomノードの作成、追加、削除、挿入について学びます.
親要素var body=documentを最初に取得します.getElementsByTagName("body")[0];
  • ノード
    • を作成して追加
        /* 1.          */
    var btnAdd = document.getElementsByTagName("button")[0];
    var box;
    btnAdd.onclick = function () {
        /*1.2     （    document   ）*/
        box = document.createElement("div");
        /*    */
        box.style.width = 100 + "px";
        box.style.height = 100 + "px";
        box.style.background = "yellow";
        /* 1.3     （          ）*/
        body.appendChild(box);
    };
  • 削除ノード
    •  /* 2.          ，          */
    var btnDel = document.getElementsByTagName("button")[1];
    btnDel.onclick= function () {
        body.removeChild(box);
    };
  • 挿入ノード
    •     /* 3.          ，          */
    var btnIns = document.getElementsByTagName("button")[2];
    btnIns.onclick = function () {
        //    
        var box1 = document.createElement("div");

        //    
        box1.style.width = 100+"px";
        box1.style.height = 100+"px";
        box1.style.background = "pink";

        //    ，       
        //             ，           
        body.insertBefore(box1,box);
    };
  • ノードの取得(サブノード、親ノード、兄弟ノード)サブノードの取得(擬似配列を返す)
    •   box      ,childNodes      ，             ，      
var  rst = box.childNodes;

           children  ，            
    var myChildren = box.children;
    console.log(myChildren.length);
  • 兄弟ノード
    •      
                    
    //1.  btn1
    var btn1 = document.getElementById("btn1");
    //2.      
    /* nextElementSibling:      ，              
     * IE           ，  nextSibling   ie      
      *         */
    var brotherSym = btn1.nextElementSibling||btn1.nextSibling;
    console.log(brotherSym);
  • 親ノード
    •     //1.  btn1
    var btn1 = document.getElementById("btn1");
    //2.     
    var parentSym = btn1. parentNode;
    console.log(parentSym);

    2.dateの認識###
    1.現在の時間var myDate=new Date()を表す時間オブジェクトを作成します.
    2.現在時刻のタイムスタンプは、1970年1月1日からのミリ秒数を取得し、unixの誕生を記念するための時間var minS = myDate.getTime();3.32ビットは最大2の32回しか記憶できないので、32ビットのパソコンのdateオブジェクトは最大2038年までしか取得できません.
    4.自分のタイムスタンプを定義するvar myDate = new Date("2017/07/03 18:20:20");5.dateオブジェクトの関連方法
    //    1.      
    var myDate = new Date();
//    2.1      
    var year = myDate.getFullYear();
//    2.2    ，     0 11
    var month = myDate.getMonth();
//    2.3    ，0    ，     
    var day = myDate.getDate();
//    2.4    
    var weekDay = myDate.getDay();
//    2.5     
    var hour = myDate.getHours();
//    2.6     
    var min = myDate.getMinutes();
//    2.7    
    var second = myDate.getSeconds();
//    2.8    
    var mins = myDate.getMilliseconds();

    3.js三部####
    1.ECMA仕様2.DOM(文書オブジェクトモデル)3.BOM(ブラウザオブジェクトモデル)
    borderボーダーnoneと0####
    インタフェースのすべての内容はレンダリングされ、枠線がnoneに設定されている場合はレンダリングされず、0に設定されている場合はレンダリングされます.
    this###
    通常はイベントコマンドに配置され、誰がこのイベントをトリガーしたかを表し、通常はイベントソースです.
    イベントドメイン####
    動的ノードが追加されると、動的ノードが存在する{}内がイベントドメインになります.
    forサイクル中のi++と++i###
    for(   ;   ;  ){
    //      
}
  • 第1サイクルにおけるi++と++iの区別はない
  • すべての言語は実行中に最終的にマシン言語(アセンブリ言語)に移行し、i++はマシン言語に中間変数を作成し、++iはできないため、++iの性能はi++
    • より高い.
  • 人々はずっとi++を使っていて、++iの性能がi++よりやや高いことを発見したとき、すでに習慣を身につけました.だからいつもi++
    • を使っています
    九宮格アルゴリズム(掌握)####
  • 行番号と列番号の計算
  • 動的作成ノードアプリケーション
    • 次は九宮格を動的に作成するコードです
    CSSコード:
            #box{
            position: relative;
        }
        /*                            ，
                                 */
        .newBox{
            width: 100px;
            height: 100px;
            position: absolute;
            background: yellow;
            border-radius: 10px;
            display: inline-block;
        }

    HTMLコード:

    JSコード:
    
    //1.        
    var btn = document.getElementsByTagName("button");
    var box = document.getElementById("box");
    //2.    
    //2.1            ，            
    var index = 0;
    btn[0].onclick = function () {
        index++;
        //2.1    
        var div = document.createElement("div");
        //2.2     —     
        div.className = "newBox";
        div.innerHTML = index;

        //2.3        
        //2.3.1        
        var col = (index-1)%3;
        console.log(col);
        var row = parseInt((index-1)/3);
        div.style.left = col * (100+10)+"px";
        div.style.top = row * (100+10)+"px";

        console.log(div);

        //2.4    
        box.appendChild(div);
    }

    //3.     
    btn[1].onclick= function () {
        if(box.children.length-1<0)return;
        //3.1    
        box.removeChild(box.children[index-1]);
        //3.2                   ，       
        index--;
    };

    微博を発表
    ulを作成すると、クリックイベントの外に作成されます.
  • ボタン(挿入)1をクリックする.入力ボックスの内容が空であるか否かを判断する、そうであればヒントが空である、そうでなければliノード2を追加する.ノードを追加する場合は、ulにノードがあるかどうかを判断する必要があり、ない場合は直接追加し、ある場合は最初の前の
    • に挿入する.
  • ボタン(削除)1.liを削除し、aラベルを取得し、aラベル配列を遍歴し、それぞれクリックイベントを追加します.クリックすると対応するli
    • が削除される.
    次はコードです
    CSSコード:
    
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            border: 1px solid #000;
            padding: 10px;
            width: 600px;
            height: 600px;
            margin: 100px auto;
            text-align: center;
        }
        #txta{
            width: 490px;
            height: 200px;
            resize: none;
            border: 1px solid #000;
        }
        #box ul{
            width: 460px;
            margin: 0 auto;
        }
        #box ul li{
            list-style:none;
            border-bottom: 1px dashed black;
            height: 30px;
            line-height:30px;
            text-align: left;
        }
        #box ul li a {
            float: right;
            cursor: pointer;
        }

    HTMLコード:
    Salome-Meca 2020のインストール方法と新機能
    PrePoMaxを用いたシェル解析